ESLint與Prettier在vscode中如何進行代碼自動格式化

這篇文章主要介紹“ESLint與Prettier在vscode中如何進行代碼自動格式化”，在日常操作中，相信很多人在ESLint與Prettier在vscode中如何進行代碼自動格式化問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”ESLint與Prettier在vscode中如何進行代碼自動格式化”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

ESLint介紹

ESLint的作用

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

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

• 代碼質量檢查

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

• 代碼格式化

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

如何在vscode中啟用ESLint

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

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

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

  
  

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

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

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

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

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

上面三個步驟缺一不可，都配置完后我們在vscode編輯中就能看到代碼被eslint檢查的結果

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

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

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

修改后再次保存代碼，部分不符合規則的代碼自動格式化了

順便提示下：

若設置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中設置編輯器的默認代碼格式化器：

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

登錄后復制

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

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

登錄后復制

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

• vscode開啟代碼保存時進行格式化

• 將Prettier作為默認的格式化工具，或者將Prettier設置為指定語言的格式化器

• 是否設置需要Prettier的配置文件（.prettierrc或.editorconfig），有兩種情況：

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

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

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

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

登錄后復制

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

可能你會對上面.editorconfig文件作為Prettier的配置文件感到疑惑，vscode的Prettier插件中有關配置文件有這樣的一段描述，可以看出Prettier插件獲取配置文件有一個優先級：.prettierrc > .editorconfig > vscode默認配置。

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

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

ESLint與Prettier的沖突

沖突的原因

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

• 重疊的格式化規則不一致，二者重疊的配置規則可以參考這里。

• vscode同時開啟二者進行格式化

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

  
  

  
  

滿足上面的條件就會出現沖突

例如當前的項目中ESLint使用array-bracket-newline配置數組項不需要換行，而Prettier對其默認是按換行進行格式化，那么該規則就出現沖突

但是最終結果取決是誰最后一個進行格式化，從結果來看是Prettier是最后執行，它的格式化的結果為最終輸出結果，原因：

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

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

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

鑒于Prettier在代碼格式化方面的優劣:

• 優勢：可以對多種語言進行代碼格式化，不僅僅是javascript

• 劣勢：不具備代碼質量檢查的能力

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

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

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

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

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

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

{
    "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-prettier 把Prettier配置成ESLint的一個插件，讓其當做一個linter規則來運行，可參考其官網。

注意：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，并啟用該插件提供的規則
    "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作為代碼格式化工具，如下配置：

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

ESLint和Prettier存在沖突的一個原因，也在于vscode對文件保存時的配置操作有重合的地方，體現在formatOnSave和codeActionsOnSave上，二者都可以實現文件保存時格式代碼，有重合的地方，對稱有人在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"
]

到此，關于“ESLint與Prettier在vscode中如何進行代碼自動格式化”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！