ESLint與Prettier在vscode中如何進(jìn)行代碼自動(dòng)格式化

這篇文章主要介紹“ESLint與Prettier在vscode中如何進(jìn)行代碼自動(dòng)格式化”，在日常操作中，相信很多人在ESLint與Prettier在vscode中如何進(jìn)行代碼自動(dòng)格式化問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”ESLint與Prettier在vscode中如何進(jìn)行代碼自動(dòng)格式化”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

ESLint介紹

ESLint的作用

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

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

• 代碼質(zhì)量檢查

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

• 代碼格式化

  可以用來(lái)統(tǒng)一團(tuán)隊(duì)的代碼風(fēng)格，比如加不加分號(hào)、使用 tab 還是空格、字符串使用單引號(hào) 等等

如何在vscode中啟用ESLint

vscode使用ESLint進(jìn)行代碼檢查的條件：

• 首先，需要在vscode中安裝ESLint插件并啟用，同時(shí)需要在vscode配置中開(kāi)啟eslint的檢查。

  具體開(kāi)啟在用戶級(jí)別的setting或者項(xiàng)目級(jí)別的settings.json中進(jìn)行如下設(shè)置：

  
  

  {
      "eslint.enable": true, // 開(kāi)啟eslint檢查
   }

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

  若沒(méi)有安裝，則在vsconde的eslint控制臺(tái)輸出錯(cuò)誤

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

  若沒(méi)有任何配置文件，則eslint控制臺(tái)會(huì)輸出錯(cuò)誤

上面三個(gè)步驟缺一不可，都配置完后我們?cè)?code>vscode編輯中就能看到代碼被eslint檢查的結(jié)果

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

其實(shí)，vscode可以用eslint在文件保存時(shí)對(duì)部分的問(wèn)題代碼進(jìn)行自動(dòng)修復(fù)，如上圖中的黃色波浪線部分，這需要在vscode配置eslint進(jìn)行文件保存時(shí)自動(dòng)格式化代碼，具體是通過(guò)vscode的codeActionsOnSave.source.fixAll來(lái)設(shè)置，詳情如下:

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

修改后再次保存代碼，部分不符合規(guī)則的代碼自動(dòng)格式化了

順便提示下：

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

Prettier介紹

Prettier的作用

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

Prettier 自身的規(guī)范傾向于團(tuán)隊(duì)的代碼風(fēng)格的規(guī)范或統(tǒng)一，例如每行最大長(zhǎng)度，單引號(hào)還是雙引號(hào)，等號(hào)左右空格，使用tab還是空格等等。

除了js/ts外，它還支持對(duì)多種語(yǔ)言進(jìn)行格式化，如vue、html、css、less、scss、json、jsx等等，是一個(gè)比較綜合的代碼格式化工具。

有了ESLint為啥還要用Prettier

介紹ESLint時(shí)說(shuō)到它也有代碼格式化的功能，為啥還需要用Prettier，引用這篇文章介紹了幾個(gè)點(diǎn)：

• ESLint 安裝和配置比較麻煩，而且 lint 的速度并不快

• Prettier 并不只針對(duì) JavaScript，它可以格式化各種流行語(yǔ)言

• Prettier 的配置選項(xiàng)沒(méi)那么眼花繚亂，比 ESLint 少很多，這在Prettier選項(xiàng)的哲學(xué)中說(shuō)明精簡(jiǎn)的原因。

如何在vscode啟用Prettier

在vscode中啟用Prettier相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，并不需要在當(dāng)前項(xiàng)目中安裝Prettier，只需：

在vscode中安裝Prettier插件并啟用，同時(shí)需要設(shè)置Prettier為對(duì)應(yīng)的代碼默認(rèn)格式化，或者將其設(shè)置為指定語(yǔ)言的代碼格式化。

在用戶級(jí)別的settings.json中設(shè)置編輯器的默認(rèn)代碼格式化器：

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

登錄后復(fù)制

或者為指定語(yǔ)音設(shè)置默認(rèn)格式化器：

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

登錄后復(fù)制

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

• vscode開(kāi)啟代碼保存時(shí)進(jìn)行格式化

• 將Prettier作為默認(rèn)的格式化工具，或者將Prettier設(shè)置為指定語(yǔ)言的格式化器

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

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

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

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

{
  "editor.formatOnSave": true, // 開(kāi)啟保存文件自動(dòng)格式化代碼
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默認(rèn)的代碼格式化工具
  "prettier.requireConfig": true // 需要Prettier的配置文件
}

登錄后復(fù)制

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

可能你會(huì)對(duì)上面.editorconfig文件作為Prettier的配置文件感到疑惑，vscode的Prettier插件中有關(guān)配置文件有這樣的一段描述，可以看出Prettier插件獲取配置文件有一個(gè)優(yōu)先級(jí)：.prettierrc > .editorconfig > vscode默認(rèn)配置。

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

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

ESLint與Prettier的沖突

沖突的原因

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

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

• vscode同時(shí)開(kāi)啟二者進(jìn)行格式化

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

  
  

  
  

滿足上面的條件就會(huì)出現(xiàn)沖突

例如當(dāng)前的項(xiàng)目中ESLint使用array-bracket-newline配置數(shù)組項(xiàng)不需要換行，而Prettier對(duì)其默認(rèn)是按換行進(jìn)行格式化，那么該規(guī)則就出現(xiàn)沖突

但是最終結(jié)果取決是誰(shuí)最后一個(gè)進(jìn)行格式化，從結(jié)果來(lái)看是Prettier是最后執(zhí)行，它的格式化的結(jié)果為最終輸出結(jié)果，原因：

Prettier的格式化耗時(shí)  > ESLint的格式化耗時(shí)

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

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

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

• 優(yōu)勢(shì)：可以對(duì)多種語(yǔ)言進(jìn)行代碼格式化，不僅僅是javascript

• 劣勢(shì)：不具備代碼質(zhì)量檢查的能力

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

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

• 二者共同作用的語(yǔ)言使用其中一種進(jìn)行格式化

下面分別對(duì)這兩種方案進(jìn)行介紹。

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

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

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

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

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

主要是使用下面兩個(gè)包：

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

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

注意：eslint-plugin-prettier需要項(xiàng)目安裝Prettier依賴

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

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

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

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

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

二者共同作用的語(yǔ)言使用其中一種進(jìn)行格式化

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

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

"editor.formatOnSave": true和"editor.defaultFormatter": "esbenp.prettier-vscode"配置，告訴vscode在文件保存時(shí)都使用默認(rèn)的Prettier來(lái)對(duì)代碼格式化。

而editor.codeActionsOnSave.source.fixAll.eslint: true設(shè)置代碼保存時(shí)使用ESLint來(lái)進(jìn)行格式化。

因?yàn)榉桨敢槐举|(zhì)上執(zhí)行了兩次代碼格式化，所以我們可以有另一種思考：只使用二者中的一個(gè)進(jìn)行代碼格式化。

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

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

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

補(bǔ)充：editor.formatOnSave vs editor.codeActionsOnSave

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

vscode并沒(méi)有采納刪除或者合并的建議，其提供這兩個(gè)的配置，其出發(fā)點(diǎn)是不一樣的，下面是社區(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"
]

到此，關(guān)于“ESLint與Prettier在vscode中如何進(jìn)行代碼自動(dòng)格式化”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！