Prettier+ESLint：为你的前端代码质量和格式化保驾护航

Prettier + ESLint 组合是目前前端项目流行的代码格式化及代码质量保证工具，本文将介绍如何为你的项目配置这两个工具。

先来介绍 Prettier 工具的安装和配置。

配置 Prettier

先安装 Prettier 依赖：

npm install --save-dev --save-exact prettier

接下来就能使用 prettier 指令了：

npx prettier . --write

以上指令会检查当前目录及后代目录下的所有文件，并以原地修改文件的形式执行格式化。

`.prettierrc.js` 文件

不过我们通常还会创建配置文件，来自定义格式化规则。创建 .prettierrc.js 文件（以 CommonJS 为例）：

// See https://prettier.io/docs/en/configuration

/** @type {import("prettier").Config} */
const config = {
  trailingComma: "all",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
  printWidth: 120,
};

module.exports = config;

❝

Prettier 配置文件支持很多种格式^[1]，可以参考这里。上述的配置是我的项目中用到的，遵循“单引号、无分号”的 Vue 代码风格，比较简洁。

❞

`.prettierignore` 文件

当然，Prettier 官方还推荐我们使用配置文件 .prettierignore，用来忽略某些文件的格式化。

# 只是个 demo

# Ignore artifacts:
build
coverage
*.min.js

# Ignore all HTML files:
**/*.html

❝

需要注意的是，node_modules、**/.git 文件无需我们在 .prettierignore 文件中显式声明，这是 Prettier 开箱的配置^[2]。

❞

配置 ESLint

有些前端项目会使用 ESLint 进行代码质量检查 + 代码格式化。不过由于 ESLint 本身的设计，只支持 JS 文件的代码格式化，不像 Prettier 那样强大。

由于 ESLint 和 Prettier 存在功能交集（代码格式化格式化这块），在项目引入 ESLint 做代码质量检查之后，需要再额外安装一个依赖 eslint-config-prettier^[3]，用来禁用 ESLint 中与 Prettier 相冲突的规则。

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

接下来就能使用 eslint 指令了：

npx eslint .

`.eslintrc.js` 文件

使用 npm init @eslint/config 生成 .eslintrc.js 配置文件（CommonJS + JS + 不选预置规则），自定义检查规则：

module.exports = {
    env: {
        browser: true,
        commonjs: true,
        es2021: true,
        node: true,
    },
    extends: 'eslint:recommended',
    overrides: [
        {
            env: {
                node: true,
            },
            files: ['.eslintrc.{js,cjs}'],
            parserOptions: {
                sourceType: 'script',
            },
        },
    ],
    parserOptions: {
        ecmaVersion: 'latest',
    },
    rules: {},
}

修改 extends，添加 eslint-config-prettier 规则扩展，禁用掉 ESLint 中与 Prettier 相冲突的规则：

{
    extends: [
        'eslint:recommended',
        'prettier'
    ],
}

如此一来呢，ESLint 与 Prettier 就不会相互冲突了，各司其职：ESLint 负责代码质量检查（例如变量未声明、声明未使用等等），Prettier 负责代码格式化。

`.eslintignore` 文件

与 Prettier 类似，项目中还是推荐创建文件 .eslintignore 忽略部分文件的代码质量检查：

# 只是个 demo

build
*.min.js

❝

需要注意的是，node_modules、. 开头的文件（.git, .env 等）无需我们在 .eslintignore 文件中显式声明，这是 ESLint 开箱的配置^[4]。

❞

提效工具：引入 lint-staged & husky

另外，我们还可以使用一个叫做 lint-staged 的工具，只针对 staged 阶段的文件运行 Linters。

npm install --save-dev lint-staged

配置 package.json 文件，增加 "lint-staged" 字段：

{
    "lint-staged": {
        "**/*": "prettier --write --ignore-unknown",
        "**/*.{js.ts}": "eslint --ext .ts,.js --fix"
    }
}

执行指令 npx lint-staged 就能针对 staged 阶段的文件进行 Linter 检查了，而且检查后变动的文件也会帮我们 git add!

❝

需要注意的是：

我们无需为 prettier & eslint 指令指定目标地址（.），lint-staged 为我们指定好了（staged 阶段文件）

lint-staged 默认是并行执行 “lint-staged” 字段中的指令的，"**/*" 和 "**/*.{js.ts}" 存在重叠，存在同一文件在同一时间被 ESLint 和 Prettier 同时处理的可能性，为此我们在执行 lint-staged 指令时需要携带 --concurrent false 参数，采用同步执行模式。

❞

不过这样手动执行太过麻烦，因此 lint-staged 通常配合 husky 一起使用，在 pre-commit 阶段，做下 Linter 检查。

$ npm install husky --save-dev
$ npx husky install
husky - Git hooks installed
$ npm pkg set scripts.prepare="husky install"
$ npx husky add .husky/pre-commit "npx lint-staged --concurrent false"
husky - created .husky/pre-commit

如此一来，我们在每次 git commit 的时候，就会自动对 staged 阶段的文件进行 Linter 检查，再也不用手动执行 npx lint-staged。

VS Code 编辑器支持

以上是在命令行层面完成了项目的 Prettier + ESLint 配置检查。不过，如果我们使用的 VS Code 编辑器，可以支持通过插件来使用项目中的 Prettier、ESLint 配置，让我们在编辑阶段就能完成代码格式化 + 代码质量检查。

首先安装 VS Code 插件：Prettier – Code formatter^[5]、ESLint^[6]。

安装好之后，打开文件，会在发生校验错误的地方看到红色（或其他颜色）的报错提示，但此时还无法实现自动保存修改。

打开 VS Code 设置界面（JSON 格式）：

先添加以下内容

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
}

我们将 VS Code 默认的格式化工具设置成 Prettier。在保存文件时，就会自动格式化代码了。

另外，将保存时 ESLint 自动修复启用。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
+ "editor.codeActionsOnSave": {
+   "source.fixAll": true
+ },
}

如此一来，自动格式化代码之前，还会对 JS 文件进行校验（插件默认支持这些文件的代码的检验 ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue", "markdown"]），保证代码质量。

到这里，也就做完了 VS Code 编辑器上的配置。