如何使用 ESLint 整合 Prettier 进行代码风格统一-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，代码风格统一是非常重要的，它可以保证多人协作时代码的一致性和可读性。而 ESLint 和 Prettier 组合起来可以帮助我们实现代码风格的自动化管理，使代码更加干净、整洁，并优化开发效率。

ESLint 是什么？

ESLint 是一个插件化的 JavaScript 代码静态检查工具。它可以帮助我们在代码编写过程中检查和修复潜在的错误、强化代码规范性和一致性。更进一步，ESLint 可以根据指定的规则集按照一定的规则格式化代码。

Prettier 是什么？

与 ESLint 类似，Prettier 是一个代码格式化工具，它致力于让你更快、更轻松地书写优美的代码。它不是一个插件，而是根据一定的规则自动格式化代码。Prettier 支持 JavaScript、TypeScript、JSON 等多种语言。

如何整合 ESLint 和 Prettier？

我们知道，ESLint 可以帮助我们检查和修复代码，而 Prettier 可以根据一定的规范格式化代码。那么，将二者结合起来，我们可以在代码开发的同时自动满足代码规范，从而提高协作效率。下面，我们来详细了解如何整合 ESLint 和 Prettier。

安装 ESLint 和 Prettier

在整合 ESLint 和 Prettier 之前，我们需要先安装它们。可以使用 npm 或 yarn 进行安装。

# 使用 npm 进行安装
npm install eslint prettier -D

# 使用 yarn 进行安装
yarn add eslint prettier -D

配置 ESLint

接下来，我们需要对 ESLint 进行配置，主要配置项包括：

解析器（Parser）：ESLint 需要一个解析器来了解我们写的代码的语法结构。
规则（Rules）：ESLint 需要指定一些规则，决定哪些是警告、哪些是错误。
插件（Plugins）：ESLint 的规则是扩展的，可以安装插件来扩展 ESLint 的功能。
扩展（Extend）：有时候，我们不想从零开始自定义规则，而是使用别人定义好的规则。

在我们的项目中，我们创建一个 .eslintrc 文件来配置 ESLint：

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

解析器选用 babel-eslint，环境选用浏览器和 ES2021，插件使用 prettier，扩展使用 prettier 推荐规范。其他未写明的规则可以自行按需添加。

配置 Prettier

Prettier 并不需要特别的配置，我们可以直接在项目中创建一个 .prettierrc 文件来定制其规则。

{
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120
}

在上面的例子中，我们指定了多个规则：

semi：是否需要在语句末尾加上分号
tabWidth：指定每一个缩进级别为多少个空格
singleQuote：是否使用单引号代替双引号
trailingComma：逗号是否使用尾随逗号
printWidth：当行的宽度超过这个值时，Prettier 将会折叠行

配置 VS Code 中的 ESLint 和 Prettier

在 VS Code 中打开项目后，我们安装 ESLint 和 Prettier 插件，以实现即时检查和格式化代码的功能。在 VS Code 的设置中搜索 eslint 和 prettier，对其进行必要的配置即可。

安装 husky 和 lint-staged

husky 及 lint-staged 是开发时自动化处理代码风格和代码缺陷必要的组件；eslint 及 prettier 与 husky 及 lint-staged一起使用，可以实现代码开发过程中即时检测代码规范，尽早发现代码错误；husky 及 lint-staged 的作用也不限于此，它们可以配合其他组件实现更多的自动化操作。

# 使用 npm 进行安装
npm install husky lint-staged -D

# 使用 yarn 进行安装
yarn add husky lint-staged -D

安装完成后，添加如下配置

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

以上配置的意思是在代码提交 (pre-commit) 前自动检测规则并修复 (lint-staged)、格式化代码 (prettier)，并在流程完成后提交代码。运行 husky 的流程起始失败时退出。

示例代码

const greeting = "Hello!";
console.log(greeting);

以上代码在使用 ESLint 检查后，可以通过 Prettier 进行格式化，变成以下代码：

const greeting = "Hello!";
console.log(greeting);

结论

以上就是使用 ESLint 和 Prettier 进行代码风格自动化管理和规范化的方法。整合 ESLint 和 Prettier 不仅方便了我们在开发过程中进行实时代码风格检查和规范化，同时也为多人合作开发提供了良好的约束。在实际的开发中，我们也可以根据自己的需要添加其他的规则来进行更好的定制化。

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

如何使用 ESLint 整合 Prettier 进行代码风格统一