注意：這個(gè)沖突問題一般是指在代碼編輯器中出現(xiàn)的問題，這里使用的是vscode。

在前端開發(fā)中，很多人使用 prettier 作為代碼格式化工具，用 ESLint 控制代碼風(fēng)格，以及檢查錯(cuò)誤。

但是在同時(shí)使用 ESLint 和 prettier 的時(shí)候，由于代碼規(guī)則不一樣就會(huì)發(fā)生沖突，發(fā)生沖突的原因是：在保存文件時(shí)，**ESLint 先修復(fù)了代碼符合 ESLint 的代碼風(fēng)格，之后 prettier 又格式化了代碼，導(dǎo)致代碼不符合 ESLint 規(guī)則了。**所以代碼就會(huì)出現(xiàn) ESLint 的警告或報(bào)錯(cuò)提示。

起初想的是把 prettier 規(guī)則配置的和 ESLint 一致，但是由于規(guī)則不一樣，不可能完全兼容。

之后有一個(gè)折中的方法，在 vscode 中，如果把保存文件時(shí)不格式化文件開啟，就不會(huì)自定調(diào)用 prettier 規(guī)則格式化代碼了，這樣就能符合 ESLint 規(guī)范了。

但是還有一個(gè)問題是 ESLint 修復(fù)主要針對(duì)的是 js 和 ts 的代碼，對(duì)于其他的代碼如 html、css 等文件還是得用 prittier，所以這種方法也有局限性。

解決方案1

在 vscode 中安裝插件 prettier-eslint 插件，這個(gè)插件的工作原理是先使用 prettier 格式化，然后再使用 ESLint 檢查和修復(fù)，這樣就能符合 ESLint 代碼風(fēng)格了。

插件介紹鏈接：https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint

插件安裝完成后，將此插件設(shè)置為工作區(qū)或用戶中文件類型的默認(rèn)格式化程序，在 vscode 配置文件中添加以下代碼：

{
  // 保存時(shí)使用 ESLint 修復(fù)可修復(fù)錯(cuò)誤
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 定義一個(gè)默認(rèn)格式化程序, 該格式化程序優(yōu)先于所有其他格式化程序設(shè)置。必須是提供格式化程序的擴(kuò)展的標(biāo)識(shí)符。
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  // "editor.formatOnPaste": false, // required
  // "editor.formatOnType": false, // required
  // "editor.formatOnSave": true, // optional
  // "editor.formatOnSaveMode": "file", // required to format on save
  // "files.autoSave": "onFocusChange" // optional but recommended
}

配置完成后，重啟 vscode 后生效。

解決方案2

在 vscode 中安裝插件 PEF: Prettier & Eslint Formatter 插件，這個(gè)插件的工作原理是先使用 prettier 格式化，然后再使用 ESLint 檢查和修復(fù)，這樣就能符合 ESLint 代碼風(fēng)格了。

插件介紹鏈接：https://marketplace.visualstudio.com/items?itemName=jonwolfe.prettier-eslint-formatter

插件安裝完成后，將此插件設(shè)置為工作區(qū)或用戶中文件類型的默認(rèn)格式化程序，在 vscode 配置文件中添加以下代碼：

{
  "[javascript]": {
    "editor.defaultFormatter": "jonwolfe.prettier-eslint-formatter",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": false
    }
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "jonwolfe.prettier-eslint-formatter",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": false
    }
  },
  "[typescript]": {
    "editor.defaultFormatter": "jonwolfe.prettier-eslint-formatter",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": false
    }
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "jonwolfe.prettier-eslint-formatter",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": false
    }
  }
}

總結(jié) 

到此這篇關(guān)于如何解決vscode中ESLint和prettier沖突問題的文章就介紹到這了,更多相關(guān)vscode ESLint和prettier沖突解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論