背景
每個人的程式碼風格不同，比如有的人程式碼縮排喜歡用Tab，有的人喜歡用Space；有的人程式碼語句後會加上分號，有的人則不加。並且不同的人使用的開發工具也不同，有的人喜歡使用WebStorm，有的人喜歡用VSCode。。。
如果是一個人獨立開發，這些當然都沒啥問題，自己想怎麼寫就怎麼寫。程式碼規範化之後可能也沒法立即看到帶來的好處。並且相反，可能在某些人看來反而是一種束縛。
但是如果是團隊協同開發，程式碼規範化所帶來的好處就很明顯。比如，統一團隊成員的程式碼風格，方便後期維護，避免擾亂Git Diff等等。
針對以上這些問題，本文會介紹如何在Vue專案中實現基本的程式碼規範配置。
思路
不同人可能會使用不同開發工具，不同開發工具有著不同的預設配置，針對這個問題，這裡我們採用開發工具配置工具EditorConfig去統一這些開發工具的預設配置。
有時候開發中難免會寫出一些語法錯誤等問題，比如使用了未聲名的變數，switch語句少寫了break等等，而這些問題要等到編譯或者執行時才會被發現。針對這個問題，這裡我們使用程式碼檢查工具Eslint來檢查這些程式碼問題，將這些問題提前暴露出來並修復，而不是等到編譯或執行時提示報錯才發現。
此外，每個人的程式碼風格不同，比如有的人程式碼縮排喜歡用Tab，有的人喜歡用Space，有的人一行寬度設定了80個字元，有的人設定了120甚至更多等等，針對這個問題，這裡我們使用程式碼格式化工具Prettier來統一這些程式碼風格。
實現
考慮到有的Vue專案是用Vue CLI搭建的，有的是用Webpack或其他工具搭建的，因此接下來我將用VSCode開發工具，根據不同的搭建工具分別實現程式碼規範。
使用Vue CLI建立的Vue專案
給新專案新增程式碼規範
當我們使用vue create命令建立新專案時，命令列介面會詢問我們是否選擇 Linter / Formatter，這就是Vue CLI給我們提供的程式碼規範工具，這裡需要選上。
選擇Eslint + Prettier
選擇之後，命令列會接著詢問我們選擇哪一種Eslint配置。列表中都是比較流行的配置，可以根據自己的需要選擇。這裡我們選擇Eslint + Prettier。
自動執行lint規則配置
接下來，命令列還會詢問何時自動執行lint，這裡我們需要把兩個都選上，選上之後不管是儲存檔案，還是使用Git提交程式碼，都會自動執行lint，並自動修復錯誤（提交程式碼時）。
選擇獨立配置檔案
最後，命令列還會詢問是否把這些配置放在各自獨立的檔案中，還是全部放在package.json中，考慮到模組的明確性和後期維護，這裡我們選擇In dedicated config files。
最後，等專案初始化完成後，我們使用開發工具開啟專案，會發現專案的根目錄多了一個.eslintrc.js檔案。
這就是Eslint配置檔案，可以參考Eslint官方配置文件瞭解更多。對了，開發工具還要安裝Eslint外掛並配置好，這樣Eslint才會生效。
配置Prettier
首先，我們需要在專案的根目錄新建檔案.prettierrc.js，然後參考Prettier官方配置文件，配置一些常用項，這裡列出我經常使用的配置，大家可以根據需要自行調整。
// .prettierrc.js
module.exports = {
useTabs: false, // 關閉tab縮排，使用Space縮排
tabWidth: 2, // 每次縮排2個字元
semi: true, // 結尾加分號
singleQuote: true, // 使用單引號
jsxSingleQuote: true, // jsx中使用單引號
trailingComma: 'es5', // 結尾逗號使用es5規則
bracketSpacing: true, // 括號和引數之間有空格
jsxBracketSameLine: false, // 標籤屬性較多時，標籤箭頭>另起一行
arrowParens: 'always', // 箭頭函式引數永遠加括號
quoteProps: 'as-needed', // 屬性加引號需要加時再加
printWidth: 80, // 每行字元個數
};其次，我們還需要給開發工具做一些配置，讓開發工具識別我們剛剛新增的Prettier配置。
以VSCode開發工具為例，首先，我們需要去擴充套件商店中查詢並安裝Prettier外掛
其次，我們還需要設定開發工具中的預設格式化工具為Prettier
然後，選擇“配置預設格式化程式“
然後，選擇Prettier，這樣開發工具就會使用Prettier作為預設格式化工具。
最後，我們還需要勾選上開發工具中設定的Format On Save設定。這樣當我們儲存檔案時，開發工具就會自動使用之前設定好的預設格式化工具Prettier進行格式化程式碼，並且格式化後會自動儲存檔案。
配置好Prettier之後，我們可以以src/main.js檔案為例，測試Prettier配置是否生效。
下圖是src/main.js檔案預設的狀態，注意看檔案中的雙引號。
當我們使用快捷鍵cmd/ctrl+s儲存檔案後，會發現雙引號全部變成了單引號。這是因為我們在.prettierrc.js檔案中配置了使用單引號規則singleQuote: true，這也證明了Prettier配置生效了。
EditorConfig配置
因為大多數開發工具都支援EditorConfig，因此配置起來很簡單。一般來說，只需要在專案的根目錄建立一個.editorconfig檔案，然後新增常用配置項即可。這裡我列出我經常使用的配置，大家可以根據需要自行調整。
# 頂層配置檔案，不會繼續向上層搜尋配置檔案
root = true
# 匹配任意格式檔案
[*]
# 字符集
charset = utf-8
# 縮排風格
indent_style = space
# 縮排值
indent_size = 2
# 換行符
end_of_line = lf
# 儲存檔案後檔案末尾是否插入一行
insert_final_newline = true
# 刪除行尾空格
trim_trailing_whitespace = true給已有的專案新增程式碼規範
假設現在有一個Vue專案，並沒有配置Eslint, Prettier和EditorConfig，那我們該如何實現程式碼規範呢？
安裝並配置Eslint
首先，我們可以根據Vue CLI官方文件的推薦，使用vue add命令安裝Eslint外掛:
這裡我們使用的是vue add命令，而不是npm install命令。這是因為vue add命令會自動給我們安裝相關和依賴的外掛，並配置好。而npm install只是安裝了指定的外掛，依賴外掛的安裝和配置還需要我們手動去實現。
安裝完成後，命令列會提示我們選擇哪一種Eslint配置：
這裡我們選擇Prettier，並且把兩個自動lint規則都選上，這樣Vue CLI就會幫我們自動安裝Prettier外掛並配置好。
配置Prettier和EditorConfig
已有專案中的Prettier和EditorConfig配置和前文在新專案中的配置是同樣的步驟，這裡不再贅述。
使用Webpack等工具建立的Vue專案
假設我們現在有一個使用Webpack或其他工具建立的Vue專案，那我們就沒法享有Vue CLI帶給我們的便利。不過，實現的思路都是一樣的，實現起來也很簡單，下面以Webpack工具為例。
配置Eslint
參考Vue Eslint官方文件，首先我們需要安裝Eslint外掛
安裝好之後，新建檔案.eslintrc.js，並新增常用配置項
然後確保開發工具中的Eslint正確配置：
最後我們可以檢驗下配置是否生效：
配置Prettier
Eslint和Prettier在有些規則上會有衝突，根據Prettier官方文件提示，我們可以通過安裝eslint-config-prettier外掛來解決。
安裝好之後，還需要修改下Eslint配置。
然後新建Prettier配置檔案.prettierrc.js並配置好，最後設定Prettier為預設格式化工具即可（參考前文，這裡不再贅述）。
配置Webpack
根據Webpack官方文件，如果想讓Webpack整合Eslint，我們需要安裝eslint-webpack-plugin外掛。
安裝完成後，還需要配置下Webpack。
// webpack.config.dev.js
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
// ...
plugins: [
new ESLintPlugin({
extensions: ['js', 'vue'],
exclude: 'node_modules',
}),
],
// ...
};最後重啟專案即可。如果程式碼有問題，命令列就會顯示具體的Eslint報錯資訊。
配置EditorConfig
EditorConfig配置和前文在新專案中的配置是同樣的步驟，這裡不再贅述。
總結
本篇文章主要介紹瞭如何在Vue專案中實現程式碼規範，主要使用了
Eslint + Prettier + EditorConfig等工具。在非Vue專案中也可以參考著實現，本質上都是一樣的。其實，程式碼規範化不僅對團隊協同開發有幫助，對於個人開發，也有不少好處。最直觀的就是，可以促使我們養成良好的程式碼習慣，而不是“隨意編碼”。這種好習慣有助於我們走得更好, 更遠。