前端开发

前端工程配置 ESLint 和 Prettier 检查并规范代码质量与格式

03 月 03 日 2021 年
ESLintPrettierVSCode

哪位代码人不希望自己的代码总有统一优美的风格，不会因为合作开发项目而杂乱呢？

在最开始写项目代码的时候我就用起了 ESLint 和 Prettier，再装一堆预设的配置，便跑了起来。令人沮丧的是，用 ESLint 修复了代码质量问题，还是会在编译器里看到红色波浪线，提醒还有些代码风格需要修复。直到这一次，我才忽然意识到 ESLint 和 Prettier 其实分工了不同领域，协同使用体验极好。

本文将阐述笔者如何配置 ESLint + Prettier，实现前端项目检查并修复代码质量与格式问题的能力。

介绍 ESLint 与 Prettier

ESLint 是一个开源的 JavaScript 代码检查工具，Prettier 是一款代码格式工具。它们的功能侧重如下所示：

  • ESLint：主要负责代码质量的校验，其次包含部分的风格检验。
  • Prettier：主要负责代码风格的校验。

ESLint 认为代码风格并没有那么重要，因此并未完全解决代码风格问题。

Rules are "agenda free" - ESLint does not promote any particular coding style.

而 Prettier 则认为自己是固执己见的代码格式化工具。

An opinionated code formatter.

目前公认的一个最佳实践是结合二者的强项：让 Prettier 专注处理代码格式问题，让 ESLint 专注处理代码质量问题。

引入 ESLint 与 Prettier

首先，自然是安装 ESLint 和 Prettier 作为项目依赖。

yarn add --dev eslint prettier

接着，让 ESLint 一并接管 Prettier 的工作，这可以通过以下两个库实现：

  • eslint-plugin-prettier：ESLint 插件，包括了 ESLint 需要检查的一些额外代码格式规则。在幕后，它使用到了 Prettier，相当于将 Prettier 作为 ESLint 的一部分运行。
  • eslint-config-prettier：ESLint 配置，可以关闭 ESLint 里所有不必要或者可能与 Prettier 产生冲突的代码格式规则。

在项目里安装它们：

yarn add --dev eslint-plugin-prettier eslint-config-prettier

将 eslint-plugin-prettier 的推荐配置 plugin:prettier/recommended 放到 ESLint 配置里 extends 的最后一项即可，它将自动配置并启用 eslint-config-prettier。如下所示：

// .eslintrc.js
module.exports = {
  extends: [
    // ... 您使用的其它 ESLint 拓展
    "plugin:prettier/recommended",
  ],
};

对于新版本的 ESLint 配置文件 eslint.config.js，可以像下面这样配置：

const eslintPluginPrettierRecommended = require("eslint-plugin-prettier/recommended");

module.exports = [
  // ... 您使用的其它 ESLint 拓展
  eslintPluginPrettierRecommended,
];

参考 Prettier 的官方配置文档，您可以自由地配置项目代码的风格。在项目目录创建 .prettierrc.json 文件，添加风格配置项如：

{
  // 注释只是便于理解，您应当删除 JSON 文件里的注释
  "semi": false, // 句末是否添加分号
  "singleQuote": true // 是否使用单引号（而非双引号）
}

当然，笔者通常保持 Prettier 的默认风格，不单独引入配置文件。

现在就格式化代码吧

修改 package.json 文件，添加脚本：

// package.json
{
  "scripts": {
    "lint": "eslint ."
  }
}

根据上面的配置，可以在项目根目录下执行如下脚本：

# 检查代码质量问题
yarn lint

# 检查并修复代码质量问题
yarn lint --fix

由于我们将 Prettier 作为了 ESLint 的插件运行，所以无需手动执行 Prettier 的格式化命令了。

在 VSCode 里，也应当将 ESLint 作为默认的格式化工具。如果正确地安装并启用了 VSCode 的 ESLint 拓展，编辑器就能正确的高亮 ESLint 与 Prettier 检查出来的问题了。

此外，VSCode 还可以设置保存时自动修复代码问题，如下所示。这样执行 Ctrl + S 保存时会自动格式化代码文件。

// settings.json
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

参考资料