如何解决 ESLint 规则与 Prettier 冲突的问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们通常会使用 ESLint 来规范代码风格，而 Prettier 则是一种格式化工具，它可以自动格式化代码，使其更加整齐美观。然而，有时候 ESLint 规则和 Prettier 格式化规则之间会产生冲突，可能会导致代码样式不一致或者无法通过 ESLint 检查等问题。接下来，本文将讲解如何解决 ESLint 规则与 Prettier 冲突的问题。

了解 ESLint 和 Prettier

在开始之前，先来了解一下 ESLint 和 Prettier 的作用和使用方法。

ESLint

ESLint 是一种 JavaScript 代码规范工具，它可以检查代码中的语法错误、代码格式等不合规范的问题，并提供修复建议。要使用 ESLint，需要先安装 ESLint：

npm install eslint --save-dev

配置 ESLint，可以通过在项目根目录创建 .eslintrc 文件来定义 ESLint 规则。例如，通过以下配置可以禁用 console.log：

{
  "rules": {
    "no-console": "error"
  }
}

在项目中运行 ESLint，可以使用命令：

eslint <file_name>

Prettier

Prettier 是一种代码格式化工具，它可以格式化 JavaScript、CSS 和 HTML 等代码。使用 Prettier，需要先安装 Prettier：

npm install prettier --save-dev

配置 Prettier，可以通过在项目根目录创建 .prettierrc 文件来设置 Prettier 规则。例如，通过以下配置可以将每行代码的长度限制为 80：

{
  "printWidth": 80
}

在项目中运行 Prettier，可以使用命令：

prettier --write <file_name>

ESLint 和 Prettier 冲突

当使用 ESLint 和 Prettier 时，有些 ESLint 规则可能会与 Prettier 格式化规则发生冲突，例如 semi 规则。这个规则要求在每个语句结束后都必须加上分号(;)，然而在 Prettier 中，semi 规则是默认开启的，它会将每个语句的结尾都自动加上分号。这种情况下，使用 ESLint 运行检查时，ESLint 会报错并建议删除多余的分号，而使用 Prettier 格式化代码时，Prettier 又会自动加上分号，这就导致了代码格式不一致。

另一个常见的冲突是 singleQuote 规则，它要求在字符串常量中使用单引号(')，然而在 Prettier 中，singleQuote 规则默认是关闭的，它会使用双引号(") 进行字符串常量。这时，在使用 Prettier 格式化代码时，Prettier会将单引号替换为双引号，导致代码格式不一致。

解决冲突的方法

要解决 ESLint 规则与 Prettier 格式化规则之间的冲突，有两种常用的方法：

方法一：增加 ESLint 规则

一种解决方法是在 ESLint 中增加规则来覆盖 Prettier 的规则，以达到统一的代码格式。例如，当 semi 规则与 Prettier 冲突时，可以在 .eslintrc 文件中增加以下配置：

{
  "rules": {
    "semi": ["error", "always"]
  }
}

这个配置表示，强制开启 semi 规则，并要求在每个语句的结尾加上分号。这样，在使用 Prettier 格式化代码时，Prettier 也会自动加上分号，从而达到统一的代码格式。

同样地，当 singleQuote 规则与 Prettier 冲突时，可以在 .eslintrc 文件中增加以下配置：

{
  "rules": {
    "quotes": ["error", "single"]
  }
}

这个配置表示，强制开启 quotes 规则，并使用单引号(')作为字符串常量的引用符号，这样在使用 Prettier 格式化代码时，Prettier 也会自动使用单引号。

方法二：使用 ESLint 插件

另一种解决冲突的方法是使用 ESLint 插件。ESLint 插件是在 ESLint 中增加一些特殊规则的功能，可以解决一些常见问题，并提供自定义规则的支持。常用的有以下两种插件：

eslint-config-prettier

eslint-config-prettier 插件用于关闭 ESLint 中与 Prettier 冲突的规则。安装该插件后，ESLint 将自动关闭与 Prettier 冲突的规则，从而达到简化代码风格的目的。通过以下命令安装 eslint-config-prettier 插件：

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

配置 .eslintrc 文件，增加以下内容，即可关闭所有与 Prettier 冲突的 ESLint 规则：

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    // 其他规则
  }
}

上面的配置中，plugin:prettier/recommended 表示使用 eslint-config-prettier 插件，从而关闭所有与 Prettier 冲突的 ESLint 规则。

eslint-plugin-prettier

eslint-plugin-prettier 插件可以在 ESLint 中添加 Prettier 中的格式化规则，并将其作为 ESLint 规则进行检查。通过以下命令安装 eslint-plugin-prettier 插件：

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

然后在 .eslintrc 文件中增加以下配置：

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    // 其他规则
  }
}

上面的配置中，"prettier/prettier": "error" 表示将 Prettier 的格式化规则作为 ESLint 规则进行检查，如果代码不符合规则，将被视为错误。

总结

ESLint 和 Prettier 是两个非常有用的前端开发工具，它们可以帮助我们实现代码规范和自动化格式化等目的。然而，在使用它们时可能会出现规则冲突的问题，可以通过增加 ESLint 规则或使用 ESLint 插件的方式进行解决。希望这篇文章可以帮助您更好地使用 ESLint 和 Prettier，并让您的代码风格更为统一、整洁。

示例代码如下：

-- -------------------- ---- -------
-- -----------

------ - -- ----- ---- --------

----- ------------- - -- ----- -- -- -
  ------ -
    -----
      --------------
    ------
  --
--

------ ------- --------------

-- -------------------- ---- -------
-- --------------

-
  ---------- ---------------------- -------------------------------
  ---------- -------------
  -------- -
    ------- --------- ----------
    --------- --------- ----------
    -------------------- -------
  -
-

// .prettierrc.json

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 80
}

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fd80ee95b1f8cacdcdedc0