如何解决ESLint和prettier冲突问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何解决ESLint和prettier冲突问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

注意：这个冲突问题一般是指在代码编辑器中出现的问题，这里使用的是vscode。

在前端开发中，很多人使用 prettier 作为代码格式化工具，用 ESLint 控制代码风格，以及检查错误。

但是在同时使用 ESLint 和 prettier 的时候，由于代码规则不一样就会发生冲突，发生冲突的原因是：在保存文件时，**ESLint 先修复了代码符合 ESLint 的代码风格，之后 prettier 又格式化了代码，导致代码不符合 ESLint 规则了。**所以代码就会出现 ESLint 的警告或报错提示。

起初想的是把 prettier 规则配置的和 ESLint 一致，但是由于规则不一样，不可能完全兼容。

之后有一个折中的方法，在 vscode 中，如果把保存文件时不格式化文件开启，就不会自定调用 prettier 规则格式化代码了，这样就能符合 ESLint 规范了。

但是还有一个问题是 ESLint 修复主要针对的是 js 和 ts 的代码，对于其他的代码如 html、css 等文件还是得用 prittier，所以这种方法也有局限性。

解决方案1

在 vscode 中安装插件 prettier-eslint 插件，这个插件的工作原理是先使用 prettier 格式化，然后再使用 ESLint 检查和修复，这样就能符合 ESLint 代码风格了。

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

插件安装完成后，将此插件设置为工作区或用户中文件类型的默认格式化程序，在 vscode 配置文件中添加以下代码：文章来源地址https://www.toymoban.com/news/detail-727088.html

{
  // 保存时使用 ESLint 修复可修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符。
  "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 插件，这个插件的工作原理是先使用 prettier 格式化，然后再使用 ESLint 检查和修复，这样就能符合 ESLint 代码风格了。

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

插件安装完成后，将此插件设置为工作区或用户中文件类型的默认格式化程序，在 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
    }
  }
}