如

如何使用 ESLint 和 Prettier 进行代码分析和格式化

2025-05-24

如何使用 ESLint 和 Prettier 进行代码分析和格式化

在开发人员的代码库中进行代码分析和格式化时，ESLint 和 Prettier 几乎是最受欢迎的两个工具。它们在各自的领域都非常出色，因此往往成为项目设置中不可或缺的一部分。

两者的区别在于，ESLint 通常负责查找并报告 ECMAScript/JavaScript 代码中的不同模式。ESLint 的设计初衷是仅处理 JavaScript 文件，并且在确保代码库一致性和无明显 Bug 方面非常有效。

另一方面，Prettier 是一款功能强大的代码格式化工具。与 ESLint 不同，它支持多种语言，例如 JavaScript、HTML、CSS、GraphQL、Markdown 等等。这两种工具在开发者社区中都得到了良好的支持，并且在大多数代码编辑器或 IDE（例如 Visual Studio Code）中都提供了它们的扩展。

Visual Studio Code 市场
ESLint
Prettier

网站
https://prettier.io/
https://eslint.org/

为什么应该使用 linter 和代码格式化程序

Linting 是一种在应用程序准备投入生产之前，在开发模式下修复代码问题的方法。很多修复工作可以自动完成，并且您可以根据团队的需求定制整个流程。使用 Prettier，您可以自动格式化文件中的代码，从而节省大量时间和精力。

在代码审查中，你也无需担心太多，因为它保证每个人都保持一致。它强制整个团队遵循相同的代码风格和质量，因此不会像本地设置那样发生冲突。

这是团队在项目开发中遵循的常见流程。通常会有一个 ESLint 和 Prettier 文件，以及一个忽略文件，就像.gitignore每个开发人员在使用 GitHub 等版本控制服务时应该熟悉的文件一样。主文件的格式可以是 JavaScript、YAML 或 JSON。在这些示例中，我使用的是 JSON。

请参阅下面的示例文件，它们都位于一个项目内：

.eslintignore
.eslintrc.json
.prettierignore
.prettierrc.json

创建 ESLint 和 Prettier 工作流程设置

ESLint 和 Prettier 文件可能会相互冲突，因为它们有时会检查相同的规则，从而导致重复。幸运的是，我们可以让它们协同工作。

Visual Studio Code 设置

首先，您需要安装 ESLint 和 Prettier 扩展。

然后转到代码->首选项->设置

您可以使用搜索框搜索您安装的 ESLint 和 Prettier 扩展。保留默认的 ESLint 设置即可，但您可以根据需要更改它们。Prettier 可能需要更改一些全局设置，但您可以根据需要进行自定义。

这些是我所拥有的最值得注意的。

  • 更漂亮：半✅
  • Prettier：单引号✅
  • Prettier：尾随逗号es5

在“设置”页面上搜索格式。

确保这些设置正确，您可能需要向下滚动才能找到默认格式化程序：

  • 编辑器：保存时格式化✅
  • 编辑器：默认格式化程序Prettier - 代码格式化程序

简单的 JavaScript/NodeJS 设置

打开命令行，然后转到目录（例如桌面）。运行以下命令来设置您的项目。

mkdir backend
cd backend
npm init -y
npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev
Enter fullscreen mode Exit fullscreen mode

现在在同一文件夹中运行下面的代码并完成设置。

npm init @eslint/config
Enter fullscreen mode Exit fullscreen mode

这些是我选择的设置：

✔ 您希望如何使用 ESLint？ -检查语法、查找问题并强制执行代码风格
✔ 您的项目使用哪种类型的模块？ - CommonJS（require/exports）
✔ 您的项目使用哪种框架？ -以上都不是
✔ 您的项目使用 TypeScript 吗？ -否
✔ 您的代码在哪里运行？ - Node
✔ 您希望如何为您的项目定义一种风格？ -使用流行的风格指南
✔ 您想遵循哪种风格指南？ - Airbnb
✔ 您希望您的配置文件采用什么格式？ - JSON

检查 eslint-config-airbnb-base@latest 的 peerDependencies

您选择的配置需要以下依赖项：

eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2

✔ 您想现在安装它们吗？ -是
✔ 您想使用哪个包管理器？ - npm

现在运行下面代码块中的命令来为 Prettier 创建文件。

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json
Enter fullscreen mode Exit fullscreen mode

打开.eslintrc.json文件并添加以下配置设置。Prettier 必须放在数组的最后，否则无法正常工作。

"extends": ["airbnb-base", "plugin:prettier/recommended"],

"plugins": ["prettier"],
Enter fullscreen mode Exit fullscreen mode

接下来，打开文件并复制并粘贴这些设置。您可以在Prettier 选项.prettierrc.json文档中了解这些设置。这只是我的设置，您可以根据自己的喜好创建自己的设置。

{
  "printWidth": 100,

  "semi": true,

  "singleQuote": true,

  "tabWidth": 4,

  "useTabs": false,

  "trailingComma": "none",

  "endOfLine": "auto"
}
Enter fullscreen mode Exit fullscreen mode

最后，运行下面的代码为 ESLint 和 Prettier 创建一些忽略文件。它们的工作方式与.gitignore文件类似，因此其中包含的任何条目都将被忽略，这样它们就不会被 lint 或格式化。

touch .prettierignore .eslintignore
Enter fullscreen mode Exit fullscreen mode

只需将相同的代码复制并粘贴到.prettierignore和.eslintignore文件中即可。

node_modules
package.lock.json
build
Enter fullscreen mode Exit fullscreen mode

使用 ESLint 和 Prettier

让我们做一个快速测试。index.js在编辑器中创建一个文件，或者在终端中使用以下命令。

touch index.js
Enter fullscreen mode Exit fullscreen mode

将此 JavaScript 代码添加到文件中。

const x = 100;

console.log(x);

const test = (a, b) => {
  return a + b;
};
Enter fullscreen mode Exit fullscreen mode

在代码编辑器中，您应该会在底部的“问题”选项卡中看到一些错误和警告。如果您在代码中到处添加空格或制表符，导致可读性降低，然后保存文件。Prettier 应该会清理并修复所有问题。

console.log 和测试函数名称下方应该有一条波浪线。将鼠标悬停在它们上面，可以看到分配给它们的 ESLint 规则。前往.eslintrc.json文件底部，添加这些规则。

"rules": {

"no-console": "off",

"no-unused-vars": "off"

}
Enter fullscreen mode Exit fullscreen mode

现在，如果您返回文件，警告应该已经消失了！您可以在ESLint 规则index.js文档中找到所有规则。您也可以通过Prettier 选项页面来更改文件中的规则/选项。.prettierrc.json

重新启动 ESLint 服务器

有时，修改代码后，lint 功能会失效。要在 Visual Studio Code 中修复此问题，请运行命令Shift+CMD+P来显示命令面板，然后搜索ESLint: Restart ESLint Server。这样，lint 功能应该就能在所有文件中正常工作了。

请记住，每次添加/删除规则或进行更改时，都可能需要重新启动 ESLint 服务器。否则，规则可能无法正常工作，并可能导致 ESLint 和 Prettier 发生冲突。

ReactJS 设置

相同的设置也适用于其他 JavaScript 框架，例如 React。您只需选择合适的设置即可。请参阅下面的示例。

记住选择JavaScript 模块（导入/导出），因为这是 React 使用的，并且代码将在浏览器中运行。

npx create-react-app my-app
cd my-app
npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev
npm init @eslint/config
Enter fullscreen mode Exit fullscreen mode

现在运行下面代码块中的命令来为 Prettier 创建文件。

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json
Enter fullscreen mode Exit fullscreen mode

打开.eslintrc.json文件并添加以下配置设置。Prettier 必须放在数组的最后，否则无法正常工作。

"extends": [

"plugin:react/recommended",

"airbnb",

"plugin:prettier/recommended"

],

"plugins": ["react", "prettier"],
Enter fullscreen mode Exit fullscreen mode

接下来，打开文件并复制并粘贴这些设置。您可以在Prettier 选项.prettierrc.json文档中了解这些设置。这只是我的设置，您可以根据自己的喜好创建自己的设置。

{
  "printWidth": 100,

  "semi": true,

  "singleQuote": true,

  "tabWidth": 4,

  "useTabs": false,

  "trailingComma": "none",

  "endOfLine": "auto"
}
Enter fullscreen mode Exit fullscreen mode

最后，运行下面的代码为 ESLint 和 Prettier 创建一些忽略文件。它们的工作方式与.gitignore文件类似，因此其中包含的任何条目都将被忽略，这样它们就不会被 lint 或格式化。

touch .prettierignore .eslintignore
Enter fullscreen mode Exit fullscreen mode

只需将相同的代码复制并粘贴到.prettierignore和.eslintignore文件中即可。

node_modules
package-lock.json
build
Enter fullscreen mode Exit fullscreen mode

现在，如果您打开App.js文件，您应该会在下面的“问题”选项卡中看到警告和错误。如果您想禁用规则，请按照前面的步骤操作，并在ESLint 规则文档中找到该规则。

文章来源：https://dev.to/andrewbaisden/how-to-use-eslint-and-prettier-for-code-analysis-and-formatting-1b4g
Devto 翻译
PREV
现代全栈开发人员技术堆栈 2021 虚拟继承如何解决“菱形”（多重继承）歧义？
NEXT
如何在 Node 和 React 应用程序中使用 Docker