用VS Code開發Vue應用

摘要：0錯誤0警告應該是每個程式設計師最基本的要求。

• 原文： 用vscode開發vue應用
• 作者： 張京

Fundebug經授權轉載，版權歸原作者所有。

現在用 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警告 。