現在用 VSCode 開發 Vue.js 應用幾乎已經是前端的標配了，但很多時候我們看到的代碼混亂不堪，作為一個前端工程師，單引號雙引號亂用，一段有分號一段沒有分號，有的地方有逗號有的地方沒有逗號，空格回車都對不齊，還說自己做事認真，這不是開玩笑的事情。
我們今天從頭開始，完整地講述一下一個重度代碼潔癖患者該如何用 VSCode 開發 Vue，以及如何把一個已經可以宣判死刑的全身各種格式錯誤幾萬條的項目整容成標準美女。
從安裝開始
為了準確起見，我們把 VSCode 裡所有插件全部禁用，把用戶設置清空，以讓它儘可能恢復成原始的樣子：
作為代碼潔癖患者，對於系統的版本要求一定也是最苛刻的，不管什麼時候，都讓我們把所有的系統能升級的都升級到最高版本：
npm install -g @vue/cli
然後，我們開始創建項目：
vue create hello-world
在這裡，一定要選擇第一項：babel + eslint，這兩個是必不可少的。我見到有些人嫌 eslint 麻煩，居然在項目建立好之後手工把 eslint 關掉的，簡直無語。
安裝完畢：
我們先不急著執行，執行代碼是最容易的事情，我們先打開代碼看一下：
好吧，至少我們需要先安裝 vetur 插件。這幾乎已經確定是開發 Vue 項目的標配了，即使我不說，VSCode 也會強烈建議你安裝它。
裝上 vetur 以後多少有點人樣了。接下來我們來試一試能不能自動格式化，這部分才是潔癖患者的最愛。胡亂加幾個空格，然後保存試試看：
不能格式化，連個提示都沒有！
用lint格式化
就算 VSCode 裡的 vetur 不能幫我們自動格式化，好在 package.json 命令裡還有一個 lint 命令，我們看看
lint 命令能不能幫我們自動格式化：
lint 居然說沒有錯誤！明明就是多了很多空格的錯誤好吧，為什麼？
這是因為缺省的 vue-cli 沒有為我們安裝 @vue/prettier 插件，我們先來手工安裝一下：
yarn add -D @vue/eslint-config-prettier
然後在package.json或者.eslintrc.js或者其它什麼你設置eslint的地方，給它加上：
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/prettier"
],
特別是最後這一個 @vue/prettier，非常重要。然後再執行 yarn lint。多餘的空格被自動幹掉了，但是我們發現有一些地方同時也被篡改了：
所有的單引號被變成雙引號了，原本行尾沒有的分號被加上了分號。這是為什麼呢？因為我們雖然引入了 prettier，但是還沒有對 prettier 做設置，我們在項目的根目錄下創建一個 .prettierrc.js 文件，然後在其中加入：
module.exports = {
semi: false,
singleQuote: true
}
再次執行 yarn lint，現在我們看到 lint 已經能夠起作用了。它不但能把我們多餘插入的空格刪掉，並且能按照規則把雙引號變成單引號，把行尾多餘的分號刪掉。當然，關於行尾加不加分號這是一個哲學命題，你可以根據你個人的喜好自行決定。在這裡，我們權且按照 vue-cli 的標配執行。
到這一步很關鍵，假設你拿到一個爛的不再爛的 vue 項目，裡面有幾千個 .vue 文件，幾萬個各種格式錯誤，也都能通過 yarn lint 這一行命令把它們全部修正過來！
在vscode裡格式化
事情還沒有完，我們注意到雖然 yarn lint 命令能在編寫完代碼之後幫我們格式化，但是既然我們是用 VSCode 進行開發，我們當然希望能在 VSCode 裡直接看到對於錯誤的標註。
這時候我們需要在 VSCode 裡再安裝一個插件 eslint。
你以為安裝上 eslint 插件就行了嗎？不行的。因為 eslint 並不知道我們的 .vue 文件裡面包含了
js 語法，所以還需要打開我們的 VSCode 設置文件。注意：這裡一定要設置到項目的設置裡，而不要只是設置到你自己個人的設置裡，否則你團隊的小夥伴隨便一改又亂掉了。正確的方法是在你項目的文件夾下有一個 .vscode 文件夾，而vue最討厭的地方是它居然會把這個文件夾放到 .gitignore 裡，這個錯誤你必須要糾正過來，也就是說從 .gitignore 文件裡把 .vscode 刪掉。切切。
在你項目的 settings.json 裡文件裡添加以下代碼：
{
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
}
這時候所有錯誤都被標註出來了，注意看左側，一定要讓這個 settings.json 文件是綠色的，而不能是灰色的，如果是灰色的，請檢查你的 .gitignore 文件：
因為我們在 settings.json 文件裡設置了autoFixOnSave，所以不管多麼亂的格式，只要一按
Ctrl+S 保存，自動就幫我們把代碼格式整理好了，是不是很方便呢？和Prettier的衝突
有些時候我們的 VSCode 裡插件裝的比較多，譬如還安裝了 prettier 插件，因為我們不只開發 Vue 項目，可能還有其它類型的 js 項目特別是傳統 js 項目，需要用到 prettier 進行美化，而 prettier 的一些功能是會和 eslint 相沖突的，比如說我們在全局設置了 prettier 的formatOnSave，這個功能就會和 eslint 的 autoFixOnSave 打架，為了避免這個矛盾，我們通常還會在本項目的 settings.json 文件裡再多加幾個選項，類似於這樣：
"editor.tabSize": 2,
"editor.formatOnSave": false,
"prettier.semi": false,
"prettier.singleQuote": true
有了這些設置，基本上 prettier 就不會和 eslint 打架了。
小結
以上就是用 VSCode 開發 vue 程序的標配，並不像網上有些文章說的那麼簡單，不是隻需要配一個 eslint 就能解決的事情，這裡還用到了 vetur，eslint 和 prettier，把幾個工具綜合用好，才能真正達到我們的錯誤隨時可見，保存自動修改，更正既往錯誤的目的。希望每個前端工程師寫出的代碼都如出一人之手，漂亮簡潔乾淨。
我們的目標始終如一：0 錯誤 0 警告。
原文鏈接：https://segmentfault.com/a/1190000019055976
閱讀更多 開發指南 的文章
