VSCode中Eslint和Prettier沖突問(wèn)題如何解決

這篇文章主要講解了“VSCode中Eslint和Prettier沖突問(wèn)題如何解決”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“VSCode中Eslint和Prettier沖突問(wèn)題如何解決”吧！

前言

本次環(huán)境皆為 @vue/cli默認(rèn)安裝帶有的 eslint@7.32.0，VSCode 插件版本：

• Eslint v2.4.0

• Prettier v9.10.4

為什么會(huì)沖突

首先我們需要知道為什么使用Eslint 和 Prettier，下面先介紹兩者的單獨(dú)用法

Eslint

Javascript Vue Typescript 等文件的代碼規(guī)范檢測(cè)工具，當(dāng)代碼寫(xiě)法不符合時(shí)，會(huì)在終端進(jìn)行報(bào)錯(cuò)提醒，阻止你的serve服務(wù)。為了在 VSCode 中檢測(cè)到我們代碼不規(guī)范時(shí)，能自動(dòng)修復(fù)錯(cuò)誤寫(xiě)法，我們需要安裝 VSCode 的插件 ESLint

安裝后在 setting.json 中配置如下并重啟編輯器：

{
	"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
	}
}

之后再編寫(xiě) js等文件保存時(shí)都會(huì)自動(dòng)格式化，保證 Eslint再也不會(huì)報(bào)錯(cuò)

Prettier

一種規(guī)范化的寫(xiě)法規(guī)則，包含各種類(lèi)型文件，其中部分Javascript 等規(guī)則，會(huì)和 Eslint不一樣，使用時(shí)只要在VSCode 中安裝Prettier插件即可

安裝后在 setting.json 中配置如下并重啟編輯器：

{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
}

表示所有類(lèi)型的文件的格式化都使用 Prettier

沖突

如果兩者都啟用，則因?yàn)橐?guī)則沖突，在JS等文件中，會(huì)出現(xiàn)保存時(shí)，先運(yùn)行了ESLint，然后再運(yùn)行了 Prettier，導(dǎo)致 @eslint檢測(cè)依然報(bào)錯(cuò)

解決

既然使用 eslint規(guī)范，我的理解上當(dāng)然是不能去修改eslint，因?yàn)檫@是共用規(guī)范，修改了就沒(méi)有再使用的必要了，所以我是不推薦修改eslint的方式。

我的做法也很簡(jiǎn)單，在eslint作用的文件類(lèi)型中，繼續(xù)使用eslint進(jìn)行格式化，在其他類(lèi)型文件中，使用prettier進(jìn)行格式化

eslint繼續(xù)使用 codeActionsOnSave進(jìn)行設(shè)置，把 eslint作用范圍的文件類(lèi)型的formatOnSave關(guān)閉

{
  "editor.tabSize": 2,
	// 開(kāi)啟eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
	},
  // 開(kāi)啟自動(dòng)格式化
  "editor.formatOnSave": true,
  // 設(shè)置所有文件默認(rèn)格式化工具為prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // eslint范圍內(nèi)的文件類(lèi)型，關(guān)閉保存時(shí)格式化
  "[javascript]": { 
    "editor.formatOnSave": false
  },
  "[typescript]": { 
    "editor.formatOnSave": false
  },
  "[vue]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  }
}

感謝各位的閱讀，以上就是“VSCode中Eslint和Prettier沖突問(wèn)題如何解決”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)VSCode中Eslint和Prettier沖突問(wèn)題如何解決這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！