徹底搞懂ESLint與Prettier在vscode中的代碼自動格式化

語言: CN / TW / HK

前言

前端代碼格式化社區提供了兩種比較常用的工具ESLintPrettier,他們分別提供了對應的vscode的插件,二者在代碼格式化方面有重疊的部分,規則不一致時會導致衝突。vscode作為前端開發編輯器已經越來越普遍了,這需要開發者在vscode對他們的使用有一定的瞭解,掌握其中的原理對提升開發效率保證代碼質量方面會有很大的幫助,俗話中的工欲善其事必先利其器磨刀不誤砍柴工都是類似的道理。

ESLint介紹

ESLint的作用

ESLint的具體的用法以及原理等不在本文的介紹範圍,可自行查詢資料。

ESLint的作用應該大家都知道,它是一個檢查代碼質量與風格的工具,配置一套規則,就能檢查出你代碼中不符合規則的地方,部分問題支持自動修復;總結起來就兩個功能:

  • 代碼質量檢查

    可以發現代碼中存在的可能錯誤,如使用未聲明變量聲明而未使用的變量修改 const 變量代碼中使用debugger等等 + 代碼格式化

    可以用來統一團隊的代碼風格,比如加不加分號使用 tab 還是空格字符串使用單引號 等等

如何在vscode中啟用ESLint

vscode使用ESLint進行代碼檢查的條件:

  • 首先,需要在vscode中安裝ESLint插件並啟用,同時需要在vscode配置中開啟eslint的檢查。

    具體開啟在用户級別的setting或者項目級別的settings.json中進行如下設置:

    js { "eslint.enable": true, // 開啟eslint檢查 }

  • 其次,需要在當前項目根目錄或者全局安裝eslint,另外eslint的規則配置項中的依賴也需要安裝。

    若沒有安裝,則在vsconde的eslint控制枱輸出如下錯誤:

    image.png

  • 最後,需要在項目根目錄有配置文件.eslintrc.js或者.eslintrc.json,或者在根項目的package.json中配置項eslintConfig中配置eslint的規則。

    若沒有任何配置文件,則eslint控制枱會輸出如下錯誤:

    image.png

上面三個步驟缺一不可,都配置完後我們在vscode編輯中就能看到代碼被eslint檢查的結果,js代碼結果類似如下圖所示:

image.png

eslint根據設置值的規則檢查兩個問題:紅色波浪線提示變量定義但未使用;黃色波浪線提示字符串必須使用單引號。對於這些錯誤,vscode編輯器將eslint的檢查結果僅展示給開發者。

其實,vscode可以用eslint在文件保存時對部分的問題代碼進行自動修復,如上圖中的黃色波浪線部分,這需要在vscode配置eslint進行文件保存時自動格式化代碼,具體是通過vscode的codeActionsOnSave.source.fixAll來設置,詳情如下:

js { "eslint.enable": true, // 開啟eslint檢查 "editor.codeActionsOnSave": { // 使用eslint來fix,包括格式化會自動fix和代碼質量檢查會給出錯誤提示 "source.fixAll.eslint": true } } 修改後再次保存代碼,部分不符合規則的代碼自動格式化了,如下圖所示:

image.png

順便提示下:

若設置codeActionsOnSave.source.fixAll: true,表示使用所有提供的代碼格式工具進行代碼格式化,包括eslint,猛戳這裏

Prettier介紹

Prettier的作用

Prettier的作用是對代碼進行格式化,並不關注代碼質量潛在問題的檢查。

Prettier 自身的規範傾向於團隊的代碼風格的規範或統一,例如每行最大長度,單引號還是雙引號,等號左右空格,使用tab還是空格等等。

除了js/ts外,它還支持對多種語言進行格式化,如vue、html、css、less、scss、json、jsx等等,是一個比較綜合的代碼格式化工具。

有了ESLint為啥還要用Prettier

介紹ESLint時説到它也有代碼格式化的功能,為啥還需要用Prettier,引用這篇文章介紹了幾個點:

  • ESLint 安裝和配置比較麻煩,而且 lint 的速度並不快
  • Prettier 並不只針對 JavaScript,它可以格式化各種流行語言
  • Prettier 的配置選項沒那麼眼花繚亂,比 ESLint 少很多,這在Prettier選項的哲學中説明精簡的原因。

如何在vscode啟用Prettier

vscode中啟用Prettier相對來説比較簡單,並不需要在當前項目中安裝Prettier,只需:

在vscode中安裝Prettier插件並啟用,同時需要設置Prettier為對應的代碼默認格式化,或者將其設置為指定語言的代碼格式化。

在用户級別的settings.json中設置編輯器的默認代碼格式化器: json { "editor.defaultFormatter": "esbenp.prettier-vscode" }

或者為指定語音設置默認格式化器: json { "[javascript]" { "editor.defaultFormatter": "esbenp.prettier-vscode" } }

上面雖然在vscode啟用了Prettier,但是並沒有在保存文件時進行代碼格式化,要想實現自動保存代碼進行代碼格式化,需要:

  • vscode開啟代碼保存時進行格式化
  • Prettier作為默認的格式化工具,或者將Prettier設置為指定語言的格式化器
  • 是否設置需要Prettier的配置文件(.prettierrc.editorconfig),有兩種情況:

    • 若配置"prettier.requireConfig": true則要求根目錄下有Prettier的配置文件,它會覆蓋Prettier擴展中的默認配置,如下圖所示;否則保存時不會自動格式化。可以參考這裏

      image.png

    • 若配置"prettier.requireConfig": false則不要求根目錄下有配置文件,若有的話也會被感知到並以配置文件的內容為準,如下圖是沒有配置文件時的提示信息: image.png

上面三個步驟的在vscode中的配置體現如下:

js { "editor.formatOnSave": true, // 開啟保存文件自動格式化代碼 "editor.defaultFormatter": "esbenp.prettier-vscode", // 默認的代碼格式化工具 "prettier.requireConfig": true // 需要Prettier的配置文件 } 再囉嗦一句:若設置需要配置文件,則必須要求根目錄下有配置文件.prettierrc.editorconfig中的一個或者兩個同時存在,否則代碼保存不會進行格式化。

可能你會對上面.editorconfig文件作為Prettier的配置文件感到疑惑,vscode的Prettier插件中有關配置文件有這樣的一段描述,如下圖:

image.png

可以看出Prettier插件獲取配置文件有一個優先級:.prettierrc > .editorconfig > vscode默認配置

上面的前兩者並不是説.prettierrc.editorconfig同時存在時,後者的配置內容就被忽略,實際的表現:

.prettierrc.editorconfig同時存在時,二者內容會進行合併,若配置項有衝突,這.prettierrc的優先級更高。

ESLint與Prettier的衝突

衝突的原因

ESLintPrettier都可以進行代碼格式化方面,若二者同時出現下面的情況就會出現衝突:

  • 重疊的格式化規則不一致,二者重疊的配置規則可以參考這裏
  • vscode同時開啟二者進行格式化 json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.requireConfig": true, "eslint.enable": true, // eslint開啟 "editor.codeActionsOnSave": { "source.fixAll.eslint": true // 代碼保存使用eslint格式化 } }

滿足上面的條件就會出現衝突,借鑑這篇文章的一幅圖來展示:

image.png

例如當前的項目中ESLint使用array-bracket-newline配置數組項不需要換行,而Prettier對其默認是按換行進行格式化,那麼該規則就出現衝突,在文件保存時代其表現下圖:

v6zq5-h3y8x.gif

可以看出文件保存後代碼格式化時會出現閃縮的效果,這是因為二者都對代碼進行了格式化,但是最終結果取決是誰最後一個進行格式化,從上圖結果來看是Prettier是最後執行,它的格式化的結果為最終輸出結果,原因:

Prettier的格式化耗時 > ESLint的格式化耗時

最終以Prettier的格式化結果來輸出,但是這就與ESLint的規則衝突,vscode編輯器就會將ESLint結果給展示出來。

以和為貴:ESLint與Prettier和諧共處

鑑於Prettier在代碼格式化方面的優劣:

  • 優勢:可以對多種語言進行代碼格式化,不僅僅是javascript
  • 劣勢:不具備代碼質量檢查的能力

所以最佳方案是整合二者,取各方之長。但上一節分析了兩者同時存在時衝突的原因,那麼在二者共存的情況下解決思路就比較明確了,有兩種方案:

  • 二者重疊的格式化規則保持一致
  • 二者共同作用的語言使用其中一種進行格式化

下面分別對這兩種方案進行介紹。

二者重疊的格式化規則保持一致

前面提到,二者之所以出現衝突的條件之一是同時在vscode中開啟: json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.requireConfig": true, "eslint.enable": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }

那麼要搞清楚二者重疊的規則有哪些?重疊的規則有哪些是衝突的呢?好在社區有了答案可以參考這裏,針對這種情況也給出了比較好的解決方案,具體來説:

在使用ESLint作為代碼的格式化工具時,關閉可能與Prettier有衝突的格式化規則,把Prettier當做一個linter規則。

主要是使用下面兩個包:

  • eslint-config-prettier 會關閉ESLint中有關代碼格式化的配置,具體參考這裏

  • eslint-plugin-prettierPrettier配置成ESLint的一個插件,讓其當做一個linter規則來運行,可參考其官網

注意:eslint-plugin-prettier需要項目安裝Prettier依賴

這樣,只需在項目根目錄下的.eslintrc.js中配置如下:

js { "extends": ["plugin:prettier/recommended"] }plugin:prettier/recommended幫我們做了如下事情:

js { "extends": ["prettier"], // 使用eslinst-config-prettier中的配置項 "plugins": ["prettier"], // 註冊該prettier插件 "rules": { "prettier/prettier": "error", // 在eslint中運行prettier,並啟用該插件提供的規則 "arrow-body-style": "off", // 關閉規則 "prefer-arrow-callback": "off" // 關閉規則 } }

這樣配置後,ESLint進行格式化時就會忽略跟Prettier重疊的格式規則,這些交由Prettier來進行格式化,這樣二者可以愉快地一起分工協作了。

二者共同作用的語言使用其中一種進行格式化

方案一讓二者協同工作的思路在ESLint中關閉跟Prettier可能存在衝突的規則,但是並沒有避免二者同時格式化,也就是説實際上二者都參與了代碼的格式化,只是輸出內容一致而已

可以從vscode的用户settings.json配置文件可以看出:

"editor.formatOnSave": true"editor.defaultFormatter": "esbenp.prettier-vscode"配置,告訴vscode在文件保存時都使用默認的Prettier來對代碼格式化。

editor.codeActionsOnSave.source.fixAll.eslint: true設置代碼保存時使用ESLint來進行格式化。

因為方案一本質上執行了兩次代碼格式化,所以我們可以有另一種思考:只使用二者中的一個進行代碼格式化。

我們知道,ESLint只對javascript、typescript以及javascrpitreact進行代碼格式化,而對其他語言則無效,而Prettier是可以的,所以針對二者共同作用的語言,我們可以關閉文件保存時自動格式化,也就是關閉Prettier作為代碼格式化工具,如下配置:

json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", //針對共用的語言如JS、TS和JSX關閉文件保存自動格式化功能,通過eslint來做這件事 "[javascript]": { "editor.formatOnSave": false }, "[javascriptreact]": { "editor.formatOnSave": false }, "[typescript]": { "editor.formatOnSave": false }, "editor.codeActionsOnSave": { //告訴ESLint插件在保存時運行 "source.fixAll.eslint": true } }

這樣,在js、ts或者jsx的文件保存時,不會調用Prettier進行格式化,而是交由ESLint來完成,除此之前的語言則是使用Prettier來進行代碼格式化。

補充:editor.formatOnSave vs editor.codeActionsOnSave

ESLintPrettier存在衝突的一個原因,也在於vscode對文件保存時的配置操作有重合的地方,體現在formatOnSavecodeActionsOnSave上,二者都可以實現文件保存時格式代碼,有重合的地方,對稱有人在vscode社區提出是否可以刪除一個:Merge/remove "editor.formatOnSave" and "editor.codeActionsOnSave->"source.fixAll""

vscode並沒有採納刪除或者合併的建議,其提供這兩個的配置,其出發點是不一樣的,下面是社區的一段描述:

But the main difference between codeActionsOnSave and formatOnSave remains that:

  • the latter (formatOnSave) only formats code,
  • while the former (codeActionsOnSave) can run one or several commands on the code, commands which might not be related to formatting.

The following editor.codeActionsOnSave will always run Organize Imports followed by Fix All once organize imports finishes:

"editor.codeActionsOnSave": [ "source.organizeImports", "source.fixAll" ]

參考:

vscode eslint配置

vscode配置eslint自動保存功能不生效

認識 ESLint 和 Prettier

詳解VSCode 格式化不符合預期的問題

用Prettier和ESLint自動格式化修復JavaScript代碼