目錄

• 前言
• 為什么會沖突
• Eslint
• Prettier
• 沖突
• 解決

前言

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

• Eslint v2.4.0
• Prettier v9.10.4

為什么會沖突

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

Eslint

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

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

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

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

Prettier

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

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

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

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

沖突

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

解決

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

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

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

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

到此這篇關(guān)于VSCode如何保證 Eslint 和 Prettier 不沖突的文章就介紹到這了,更多相關(guān)VSCode內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！