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 和 vue-cli 開發中 eslint 和風格配置

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-htmleslint-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 中的外掛

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

在使用 vue-cli 構建專案時,如果安裝了 @vue/cli-plugin-babel@vue/cli-plugin-eslint, 那麼就會安裝諸如 babel-eslint, eslint-plugin-vue 等npm包。這些安裝包會在專案執行時,專案打包時起到程式碼轉義,程式碼檢查的作用,在開發程式碼時,也是vscode 中vetur, eslint 的外掛所需要的依賴包。

小結

  • vscode編輯器中,vetur 必須安裝,eslint 最好也安裝,prettier不要安裝。另外,把vetur 中的 eslint-plugin-vue 檢查去掉
  • vue-cli 中,一定要安裝babel ,eslint 外掛,因為它們會極大的方便你的開發,是vscode編輯器中eslint外掛所必需的 。

參考資料

相關文章