解决 ESLint 与 Prettier 冲突的最佳实践

前言

前端代码格式化中，ESLint 和 Prettier 是两款常用工具。它们提供了相应的 VSCode 插件，但由于在代码格式化方面存在重叠，规则不一致时可能导致冲突。

ESLint

介绍： ESLint是一款旨在检查和规范JavaScript代码的工具。

关注点：

代码质量检查： 强调检测潜在错误，如未声明的变量、未使用的变量、对const变量的修改、使用debugger语句等。
自动修复： 提供自动修复功能，可以自动解决一些代码质量问题。

风格规范： 虽然ESLint可以配置一些代码格式化规则，但其主要目标在于提供代码质量检查。

Prettier

介绍： Prettier是一款专注于代码格式化的工具，注重排版而非代码质量。

关注点：

代码格式化： 侧重于统一团队的代码风格，包括每行的最大长度、单引号还是双引号、等号周围的空格等。
排版一致性： 主要目标是确保整个项目中代码的排版风格一致。

跨语言支持： 不仅支持JavaScript和TypeScript，还涵盖了多种语言，如Vue、HTML、CSS、JSON、JSX等。

区别总结

ESLint： 重点在于代码质量检查，可以自动修复一些问题，但其主要目的是提高代码质量。
Prettier： 注重代码格式化，强调整个项目中的代码排版一致性，不涉及代码质量检查。

在实际应用中，ESLint和Prettier通常一起使用，以在项目中实现全面的代码检查和一致的代码风格。这两者的结合能够提供更全面的开发体验。

解决方案：ESLint 与 Prettier 的和谐共处

ESLint 和 Prettier 在代码格式化方面存在重叠，可能导致冲突。以下是两种最佳实践的解决方案：

方案一：保持重叠的格式化规则一致

为解决规则冲突，可关闭 ESLint 中与 Prettier 有冲突的规则。具体步骤如下：

安装两个包：

bash 复制代码

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

在项目的 .eslintrc.js 中配置：

json 复制代码

{
  "extends": ["plugin:prettier/recommended"]
}

使用 plugin:prettier/recommended 关闭 ESLint 中与 Prettier 冲突的规则。

方案二：共同作用的语言使用其中一种进行格式化

在 VSCode 用户配置或项目中，关闭文件保存时的自动格式化，通过 ESLint 进行格式化。具体配置如下：

项目根目录下新建.vscode/settings.json

json 复制代码

{
  // 在保存时自动进行代码格式化
  "editor.formatOnSave": true,

  // 设置默认的代码格式化工具为 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 针对 JavaScript 文件，禁用保存时的自动格式化，通过 ESLint 进行修复
  "[javascript]": {
    "editor.formatOnSave": false
  },

  // 针对 JavaScript React 文件，禁用保存时的自动格式化，通过 ESLint 进行修复
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },

  // 针对 TypeScript 文件，禁用保存时的自动格式化，通过 ESLint 进行修复
  "[typescript]": {
    "editor.formatOnSave": false
  },

  // 在保存时运行 ESLint 插件进行代码修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 针对 Vue 文件，设置默认的代码格式化工具为 ESLint
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },

  // 设置编辑器的缩进大小为 "tabSize"，注意这个值可能会引起问题，请确保它是有效的
  "editor.indentSize": "tabSize"
}

这样配置后，只有在保存 JavaScript、TypeScript、Vue 和 JSX 文件时才使用 ESLint 进行格式化，其他语言则使用 Prettier。

通过以上两种方案，ESLint 和 Prettier 可以和谐共处，发挥各自的优势，提高代码的质量和可读性。

希望这篇文章对你有所帮助。如有任何问题或需要进一步解释，请随时提问。