php入門到就業(yè)線上直播課：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用

前端代碼格式化社區(qū)提供了兩種比較常用的工具ESLint和Prettier，他們分別提供了對應的vscode的插件，二者在代碼格式化方面有重疊的部分，規(guī)則不一致時會導致沖突。vscode作為前端開發(fā)編輯器已經(jīng)越來越普遍了，這需要開發(fā)者在vscode對他們的使用有一定的了解，掌握其中的原理對提升開發(fā)效率保證代碼質(zhì)量方面會有很大的幫助，俗話中的工欲善其事必先利其器、磨刀不誤砍柴工都是類似的道理?！就扑]學習：vscode教程、編程視頻】

ESLint介紹

ESLint的作用

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

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

• 代碼質(zhì)量檢查

  可以發(fā)現(xiàn)代碼中存在的可能錯誤，如使用未聲明變量、聲明而未使用的變量、修改 const 變量、代碼中使用debugger等等

• 代碼格式化

  可以用來統(tǒng)一團隊的代碼風格，比如加不加分號、使用 tab 還是空格、字符串使用單引號 等等

如何在vscode中啟用ESLint

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

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

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

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

  登錄后復制

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

  若沒有安裝，則在vsconde的eslint控制臺輸出如下錯誤：

• 最后，需要在項目根目錄有配置文件.eslintrc.js或者.eslintrc.json，或者在根項目的package.json中配置項eslintConfig中配置eslint的規(guī)則。

  若沒有任何配置文件，則eslint控制臺會輸出如下錯誤：

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

eslint根據(jù)設置值的規(guī)則檢查兩個問題：紅色波浪線提示變量定義但未使用；黃色波浪線提示字符串必須使用單引號。對于這些錯誤，vscode編輯器將eslint的檢查結(jié)果僅展示給開發(fā)者。

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

{     "eslint.enable": true, // 開啟eslint檢查     "editor.codeActionsOnSave": {         // 使用eslint來fix，包括格式化會自動fix和代碼質(zhì)量檢查會給出錯誤提示         "source.fixAll.eslint": true       } }

修改后再次保存代碼，部分不符合規(guī)則的代碼自動格式化了，如下圖所示：

順便提示下：

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

Prettier介紹

Prettier的作用

Prettier的作用是對代碼進行格式化，并不關(guān)注代碼質(zhì)量潛在問題的檢查。

Prettier 自身的規(guī)范傾向于團隊的代碼風格的規(guī)范或統(tǒng)一，例如每行最大長度，單引號還是雙引號，等號左右空格，使用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中設置編輯器的默認代碼格式化器：

{    "editor.defaultFormatter": "esbenp.prettier-vscode" }

或者為指定語音設置默認格式化器：

{    "[javascript]" {        "editor.defaultFormatter": "esbenp.prettier-vscode"    } }

上面雖然在vscode啟用了Prettier，但是并沒有在保存文件時進行代碼格式化，要想實現(xiàn)自動保存代碼進行代碼格式化，需要：

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

  • 若配置"prettier.requireConfig": true則要求根目錄下有Prettier的配置文件，它會覆蓋Prettier擴展中的默認配置，如下圖所示；否則保存時不會自動格式化?？梢詤⒖歼@里。

  

  • 若配置"prettier.requireConfig": false則不要求根目錄下有配置文件，若有的話也會被感知到并以配置文件的內(nèi)容為準，如下圖是沒有配置文件時的提示信息：

  

上面三個步驟的在vscode中的配置體現(xiàn)如下：

{   "editor.formatOnSave": true, // 開啟保存文件自動格式化代碼   "editor.defaultFormatter": "esbenp.prettier-vscode", // 默認的代碼格式化工具   "prettier.requireConfig": true // 需要Prettier的配置文件 }

再啰嗦一句：若設置需要配置文件，則必須要求根目錄下有配置文件.prettierrc或.editorconfig中的一個或者兩個同時存在，否則代碼保存不會進行格式化。

可能你會對上面.editorconfig文件作為Prettier的配置文件感到疑惑，vscode的Prettier插件中有關(guān)配置文件有這樣的一段描述，如下圖：

可以看出Prettier插件獲取配置文件有一個優(yōu)先級：.prettierrc > .editorconfig > vscode默認配置。

上面的前兩者并不是說.prettierrc和.editorconfig同時存在時，后者的配置內(nèi)容就被忽略，實際的表現(xiàn)：

.prettierrc和.editorconfig同時存在時，二者內(nèi)容會進行合并，若配置項有沖突，這.prettierrc的優(yōu)先級更高。

ESLint與Prettier的沖突

沖突的原因

ESLint和Prettier都可以進行代碼格式化方面，若二者同時出現(xiàn)下面的情況就會出現(xiàn)沖突：

• 重疊的格式化規(guī)則不一致，二者重疊的配置規(guī)則可以參考這里。
• vscode同時開啟二者進行格式化

  {     "editor.formatOnSave": true,     "editor.defaultFormatter": "esbenp.prettier-vscode",     "prettier.requireConfig": true,     "eslint.enable": true, // eslint開啟     "editor.codeActionsOnSave": {        "source.fixAll.eslint": true // 代碼保存使用eslint格式化      } }

  登錄后復制

滿足上面的條件就會出現(xiàn)沖突，借鑒這篇文章的一幅圖來展示：

例如當前的項目中ESLint使用array-bracket-newline配置數(shù)組項不需要換行，而Prettier對其默認是按換行進行格式化，那么該規(guī)則就出現(xiàn)沖突，在文件保存時代其表現(xiàn)下圖：

可以看出文件保存后代碼格式化時會出現(xiàn)閃縮的效果，這是因為二者都對代碼進行了格式化，但是最終結(jié)果取決是誰最后一個進行格式化，從上圖結(jié)果來看是Prettier是最后執(zhí)行，它的格式化的結(jié)果為最終輸出結(jié)果，原因：

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

最終以Prettier的格式化結(jié)果來輸出，但是這就與ESLint的規(guī)則沖突，vscode編輯器就會將ESLint結(jié)果給展示出來。

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

鑒于Prettier在代碼格式化方面的優(yōu)劣:

• 優(yōu)勢：可以對多種語言進行代碼格式化，不僅僅是javascript
• 劣勢：不具備代碼質(zhì)量檢查的能力

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

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

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

二者重疊的格式化規(guī)則保持一致

前面提到，二者之所以出現(xiàn)沖突的條件之一是同時在vscode中開啟:

{     "editor.formatOnSave": true,     "editor.defaultFormatter": "esbenp.prettier-vscode",     "prettier.requireConfig": true,     "eslint.enable": true,     "editor.codeActionsOnSave": {        "source.fixAll.eslint": true      } }

那么要搞清楚二者重疊的規(guī)則有哪些？重疊的規(guī)則有哪些是沖突的呢？好在社區(qū)有了答案可以參考這里，針對這種情況也給出了比較好的解決方案，具體來說：

在使用ESLint作為代碼的格式化工具時，關(guān)閉可能與Prettier有沖突的格式化規(guī)則，把Prettier當做一個linter規(guī)則。

主要是使用下面兩個包：

• eslint-config-prettier 會關(guān)閉ESLint中有關(guān)代碼格式化的配置，具體參考這里。

• eslint-plugin-prettier 把Prettier配置成ESLint的一個插件，讓其當做一個linter規(guī)則來運行，可參考其官網(wǎng)。

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

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

{   "extends": ["plugin:prettier/recommended"] }

而plugin:prettier/recommended幫我們做了如下事情：

{   "extends": ["prettier"], // 使用eslinst-config-prettier中的配置項   "plugins": ["prettier"], // 注冊該prettier插件   "rules": {     "prettier/prettier": "error", // 在eslint中運行prettier，并啟用該插件提供的規(guī)則     "arrow-body-style": "off", // 關(guān)閉規(guī)則     "prefer-arrow-callback": "off" // 關(guān)閉規(guī)則   } }

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

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

方案一讓二者協(xié)同工作的思路在ESLint中關(guān)閉跟Prettier可能存在沖突的規(guī)則，但是并沒有避免二者同時格式化，也就是說實際上二者都參與了代碼的格式化，只是輸出內(nèi)容一致而已。

可以從vscode的用戶settings.json配置文件可以看出：

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

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

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

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

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

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

補充：editor.formatOnSave vs editor.codeActionsOnSave

ESLint和Prettier存在沖突的一個原因，也在于vscode對文件保存時的配置操作有重合的地方，體現(xiàn)在formatOnSave和codeActionsOnSave上，二者都可以實現(xiàn)文件保存時格式代碼，有重合的地方，對稱有人在vscode社區(qū)提出是否可以刪除一個：Merge/remove "editor.formatOnSave" and "editor.codeActionsOnSave->"source.fixAll""。

vscode并沒有采納刪除或者合并的建議，其提供這兩個的配置，其出發(fā)點是不一樣的，下面是社區(qū)的一段描述：

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" ]