VSCode中Eslint和Prettier沖突問題如何解決

這篇文章主要講解了“VSCode中Eslint和Prettier沖突問題如何解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“VSCode中Eslint和Prettier沖突問題如何解決”吧！

前言

本次環境皆為 @vue/cli默認安裝帶有的 eslint@7.32.0，VSCode 插件版本：

• Eslint v2.4.0

• Prettier v9.10.4

為什么會沖突

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

Eslint

Javascript Vue Typescript 等文件的代碼規范檢測工具，當代碼寫法不符合時，會在終端進行報錯提醒，阻止你的serve服務。為了在 VSCode 中檢測到我們代碼不規范時，能自動修復錯誤寫法，我們需要安裝 VSCode 的插件 ESLint

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

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

之后再編寫 js等文件保存時都會自動格式化，保證 Eslint再也不會報錯

Prettier

一種規范化的寫法規則，包含各種類型文件，其中部分Javascript 等規則，會和 Eslint不一樣，使用時只要在VSCode 中安裝Prettier插件即可

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

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

表示所有類型的文件的格式化都使用 Prettier

沖突

如果兩者都啟用，則因為規則沖突，在JS等文件中，會出現保存時，先運行了ESLint，然后再運行了 Prettier，導致 @eslint檢測依然報錯

解決

既然使用 eslint規范，我的理解上當然是不能去修改eslint，因為這是共用規范，修改了就沒有再使用的必要了，所以我是不推薦修改eslint的方式。

我的做法也很簡單，在eslint作用的文件類型中，繼續使用eslint進行格式化，在其他類型文件中，使用prettier進行格式化

eslint繼續使用 codeActionsOnSave進行設置，把 eslint作用范圍的文件類型的formatOnSave關閉

{
  "editor.tabSize": 2,
	// 開啟eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
	},
  // 開啟自動格式化
  "editor.formatOnSave": true,
  // 設置所有文件默認格式化工具為prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // eslint范圍內的文件類型，關閉保存時格式化
  "[javascript]": { 
    "editor.formatOnSave": false
  },
  "[typescript]": { 
    "editor.formatOnSave": false
  },
  "[vue]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  }
}

感謝各位的閱讀，以上就是“VSCode中Eslint和Prettier沖突問題如何解決”的內容了，經過本文的學習后，相信大家對VSCode中Eslint和Prettier沖突問題如何解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！