vscode 和 vue-cli 開發中 eslint 和美化程式碼的配置

matteao發表於2019-12-12

前言

最近，我使用 vscode 寫 vue專案時遇到這樣的情況：修改了 .vue檔案並儲存時，樣式總是不符合 .eslintrc.js 的配置。我嘗試修改 vscode 的Vetur 外掛的配置，卻發現不瞭解vetur。這樣的情況出現的多了，我終於下定決心解決這個問題。

環境

vscode 編輯器，外掛：vetur，eslint ，prettier
vue-cli 環境， cli外掛：babel, eslint

兩個問題

vscode 編輯器中 vetur 外掛，eslint 外掛， prettier外掛，我都必須要安裝嗎？它們之間是如何協同工作的？
vue-cli 開發中，會安裝如下圖所示的 npm 依賴包，它們又是如何工作的，會不會和 vscode 編輯器中的外掛重複了？

vscode 中的外掛

使用vscode 編輯器開發vue 專案，應該安裝哪些 vscode 外掛呢？

需要安裝vetur 外掛嗎？

vetur 外掛是必須要安裝的，作用如下：

程式碼高亮
支援特定型別的程式碼片段
emmet 語法
程式碼語法檢查
樣式美化
程式碼提示
主流框架支援

比如說：你在編輯器裡輸入 el ，會出現一個下拉框，顯示了很多 element-ui 的元件。為什麼呢？因為 vetur 外掛支援了 element-ui 框架，會自動在專案的package.json 檔案裡尋找 element-ui 配置（前提是安裝了element npm 包）。

需要安裝 eslint 外掛嗎？

eslint 是進行程式碼語法檢查的，也幹少量的程式碼格式化的活。如果你不需要在vscode 編輯器裡進行程式碼檢查，那麼就不需要安裝 eslint 外掛。

安裝了eslint 外掛，就可以進行程式碼檢查了嗎？

不能。eslint 工作的前提是必須在專案中或者全域性安裝 eslint npm 包。eslint npm 包之所以流行，有一部分babel的功勞，所以你還需要安裝 babel-eslint npm 包。eslint-plugin-html 和 eslint-plugin-vue npm包也需要安裝一下，這兩個包是有關語法和格式化的規則。然後，你在專案根目錄下配置 .eslintrc.js 檔案。

需要安裝 prettier 外掛嗎？

prettier 是美化程式碼的，如果你對 prettier 很熟悉並且對格式要求很高，就可以安裝。我沒有安裝。

vetur 、eslint 和 prettier 之間如何協同工作，會不會衝突？

vetur 內建了 eslint-plugin-vue，所以，如果你不安裝eslint，也會進行一些程式碼檢查，但是不全面。如果你安裝eslint 以及相關npm包，那麼就會遇到我前言裡遇到的問題：我在格式化程式碼時，.eslintrc.js 的配置不生效，vetur 配置也不知道修改哪裡？如何解決呢？就是下圖中，不要勾選箭頭所指的核取方塊。因為vetur 中預設的 eslint-plugin-vue 的配置很可能和你在專案中的 .eslintrc.js 配置衝突了。

vscode 和 vue-cli 開發中 eslint 和風格配置

vetur 內建了prettier ,所以，如果你不安裝prettier, 也會進行程式碼格式化。prettier 就不需要安裝了。優先順序為專案中.prettierc.js 檔案最高。

vue-cli 中的外掛