采用 ESLint 配合 Prettier 实现更佳读写代码体验

ESLint 和 Prettier 是前端开发中常用的代码质量和代码格式化工具，二者结合可以让我们的代码更易读、易维护，也能够减少代码缺陷的产生。本文将介绍如何使用 ESLint 和 Prettier 来优化前端代码的编写。

什么是 ESLint 和 Prettier？

ESLint 是一个 JavaScript 的静态代码分析工具，旨在帮助开发者发现和修复代码中的问题，并确保代码风格的一致性。它支持多种预设规则以及自定义规则，可以帮助开发者遵守团队或项目的代码规范，提升代码质量。ESLint 支持集成到开发者的编辑器、构建工具、代码仓库和 CI/CD 等流程中。

Prettier 是一个代码格式化工具，它的目标是实现一致的代码格式化，减少团队成员之间格式化代码的分歧。Prettier 支持多种编程语言，可以根据一些预设规则，格式化代码，并保持输出的一致性。

如何使用 ESLint 和 Prettier？

安装

使用 ESLint 和 Prettier 需要先安装它们：

npm install eslint prettier --save-dev

初始化

为了让 ESLint 和 Prettier 协同工作，我们需要在项目中创建一个配置文件 .eslintrc.json 和 .prettierrc.json。我们可以手动创建这些文件，然后配置规则，但是也可以使用 eslint-init 和 eslint-plugin-prettier 工具自动生成配置文件。

npx eslint --init
# answer the questions to generate a .eslintrc.json file

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

.prettierrc.json 文件中，我们可以设置代码的一些格式化规则，例如：

{
  "semi": false,
  "singleQuote": true
}

集成

现在我们已经安装了 ESLint 和 Prettier，并生成了配置文件。我们需要在开发环境中使用它们。可以通过编辑器插件、构建工具插件或者配置 Webpack 等方式来实现。这里以 VSCode 插件为例。

安装 ESLint 和 Prettier 插件：

• ESLint
• Prettier - Code formatter

在项目的根目录下增加一个 .vscode/settings.json 文件，用于配置 VSCode 的扩展插件使用：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true
}

这里的配置将文档保存时，自动进行 ESlint 的代码修正以及 Prettier 的格式化。

配置

我们可以基于项目的需求，配置 ESLint 和 Prettier 的规则，例如：

.eslintrc.json:

{
  "extends": ["plugin:prettier/recommended"],
  "plugins": ["node", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "node/no-unsupported-features/es-syntax": "off"
  }
}

• extends: 基于已经有的规则来扩展。

• plugins: 启用 ESLint 插件。

• rules: 在此处覆盖默认规则。

.prettierrc.json:

{
  "semi": false,
  "singleQuote": true
}

总结

ESLint 和 Prettier 是前端开发中必备的代码质量和格式化工具，使用它们可以帮助我们写出更好的代码，并且遵守统一的代码规范。在使用 ESLint 和 Prettier 时，需要注意配置规则，并在开发环境中集成它们。希望这篇文章能够为你提供一些参考。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e4446add4f0e0ff7492eb