代码风格统一战：如何调和 ESLint 与 Prettier 的冲突（9）

Prettier 和 ESLint 都可以用来管理代码风格，但它们之间可能会存在规则冲突。例如，ESLint 可能配置为使用单引号，而 Prettier 可能配置为使用双引号。这种情况下，手动解决冲突会非常繁琐。幸运的是，有一些插件可以帮助我们自动解决这些冲突。

项目初始化

首先，我们初始化一个名为 eslint-prettier-demo 的项目，并安装 ESLint 和 Prettier：

mkdir eslint-prettier-demo
cd eslint-prettier-demo
pnpm init -y
pnpm add eslint prettier -D

创建配置文件

接下来，创建 Prettier 和 ESLint 的配置文件。

Prettier 配置文件（.prettierrc）：

{
  "singleQuote": true,
  "semi": false,
  "printWidth": 80,
  "trailingComma": "es5"
}

ESLint 配置文件（.eslintrc.js 或 eslint.config.js）：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    indent: ['error', 2],
    quotes: ['error', 'double'],
    semi: ['error', 'always'],
  },
};

示例代码文件（src/index.js）：

const str = 'Hello World';

const arr = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
  23, 24, 25, 26, 27, 28, 29, 30,
];

const obj = {
  name: 'John Doe',
  age: 30,
  address: {
    city: 'New York',
    state: 'NY',
  },
};

console.log(str);
console.log(arr);
console.log(obj);

此时，你会发现两者之间的规则冲突会导致问题，只要一格式化（prettier），eslint 就会报错。

为了解决这个问题，有两个思路：

• 手动的将其中一个工具的配置文件进行修改，改成和另外一个工具的配置是相同的。这种方式肯定是没有问题的，但是缺点在于这种方式是手动的，如果涉及到大量的规则，那么手动操作比较繁琐
• 使用一些插件来帮助我们解决这个
  • eslint-config-prettier 会关闭所有与 Prettier 冲突的 ESLint 规则
  • eslint-plugin-prettier 将 Prettier 作为 ESLint 规则来运行，这样在运行 ESLint 时也会运行 Prettier。

接下来我们来安装这两个插件：

pnpm add eslint-config-prettier eslint-plugin-prettier -D

然后修改 ESLint 配置文件，以包含这些插件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended', // 添加这一行
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'prettier/prettier': [
      'warn',
      {
        semi: false, // 你可以根据需要调整其他 Prettier 选项
      },
    ],
  },
};

在上面的配置中：

• extends: ['eslint:recommended', 'plugin:prettier/recommended']：将 plugin:prettier/recommended 添加到 extends 数组中，这样 ESLint 会应用 Prettier 的规则。
• rules: { 'prettier/prettier': ['warn', { semi: false }] }：将 Prettier 作为一个 ESLint 规则来运行，并设置其重要级别为 warn。你还可以在这里调整其他 Prettier 选项。

测试集成

现在，你可以测试一下集成效果：

1. 运行 ESLint 检查：

   npx eslint src
   

2. 使用 Prettier 格式化代码：

   npx prettier --write src
   

你应该不会再看到由于规则冲突导致的错误或警告。Prettier 会处理格式化，而 ESLint 会处理其他非格式化相关的规则。

通过这种方式，你可以确保代码风格的一致性，并且避免手动解决规则冲突的麻烦。