如何使 ESLint 与 Prettier 协同工作以避免冲突和问题

（查看我的博客）

在您的项目上安装并运行Prettier和ESLint非常有用，并且可以通过在我们将静态错误引入代码时识别它们并确保文件的一致样式来节省我们大量时间。

Prettier 是一个著名的“代码格式化程序”，它确保所有输出的代码符合一致的风格。

ESLint 是一个 JavaScript 代码检查实用程序，它执行静态分析以查找有问题的模式或不符合特定样式指南的代码。

Prettier 和 ESlint，两颗心，一份爱

如今，同时使用这两种方式非常普遍。
然而，这很容易导致配置错误，并引发恼人的冲突。

在这篇文章中，我尝试给出一些指示，以便正确配置 VSCode 并避免问题和冲突。

先决条件

- Visual Studio Code
- VS Code ESLint 插件

该怎么办

1. 首先，你需要在 VS Code 中安装 ESLint 插件。你可以使用VS Code 中的扩展选项卡，也可以直接使用本文“先决条件”部分提供的链接。
2. 然后，您必须在项目中安装Prettier和ESLint作为节点模块：

npm install --save-dev eslint prettier

1. 现在是时候为 ESLInt 创建配置文件了：

./node_modules/eslint/bin/eslint.js --init

或者如果你全局安装了它，你可以使用：

eslint --init 

选择以下选项：

• 检查语法、发现问题并强制执行代码风格
• JavaScript 模块（导入/导出）
• 这些都不是
• TypeScript：否
• 浏览器或 Node，根据您的喜好
• 使用流行的风格指南
• Airbnb（我个人非常喜欢这个风格指南）
• JavaScript
• 是（安装所有依赖项）

完成此过程后，您会在根文件夹中发现一个新文件：.eslintrc.js

我的文件如下所示：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    ‘airbnb-base’,
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: ‘module’,
  },
  rules: {
  },
};

这是ESLint 的配置文件。

1. 现在是时候为 Prettier 创建一个配置文件了：

// .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: true,
  singleQuote: true,
};

人们在使用 Prettier/ESLint 时遇到的最常见问题之一是出现冲突的警告和大量红线错误。

避免此问题的一个好方法是使用 Prettier 作为 ESLint 插件。

这就是为什么你必须安装一个名为“ eslint-plugin-prettier ”的特殊插件和开发依赖项：

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

安装完成后，您必须告诉 ESLint 使用 Prettier作为插件：

module.exports = {
  env: {
    es6: true,
    browser: true,
    es2021: true,
  },
  extends: [‘airbnb-base’],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: ‘module’,
  },
  rules: {
    ‘prettier/prettier’: ‘error’,
  },
  plugins: [‘prettier’],
};

此时，您的代码上已启动并运行 Prettier 和 ESLint。

即使 Prettier 正常工作，某些规则也可能会发生冲突。
为了避免此问题，您必须关闭所有不必要的规则或可能与 Prettier 冲突的规则。

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

安装完成后，您必须更新.eslintrc.js文件：

module.exports = {
  env: {
    es6: true,
    browser: true,
    es2021: true,
  },
  extends: ['airbnb-base', 'prettier'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'prettier/prettier': 'error',
  },
  plugins: ['prettier'],
};

耶！你成功了！

现在，您的项目中已经完美地同时运行了 ESLint 和 Prettier。Prettier
作为 ESLint 的插件运行，由于特殊的配置，它不会与 ESLint 冲突。

您可以在此 repo 上查看一个工作示例：GitHub - codejourneys-org/eslint-prettier

如果您有任何疑问，请随时发表评论或加入前端开发人员的伟大社区😃：CodeJourneys.org