代码风格自动化最佳实践:ESLint+Prettier+lint-staged

6,530 阅读4分钟

1. 前言

我们都知道,在项目中使用良好、统一的代码风格十分重要。 现在,为了规范项目代码,往往都会采用一些代码规范自动化工具,如 lint 工具,格式化工具。

本文简要介绍一下目前 JavaScript 类项目广泛采用的代码风格自动化方案:ESLint + Prettier + lint-staged,实现快速为项目引入代码规范工具。

2. 工具及其作用简介

2.1. ESLint

ESLint 是一个 JavaScript 代码检查工具 (linter)。功能强大,包括:

  • 根据配置的规则集合,检查并标记出代码中的错误代码、格式问题、容易导致 bug 的写法等。
  • 自动修复(如果该规则支持),让我们从许多格式问题中解放出来。
  • 高度自定义、插件化。使用 ESLint 插件能实现一些强大的功能,比如:引入 Vue/React 等框架规范,实现 import 语句分组排序等。

使用可以参考:ESLint 使用教程

2.2. Prettier

Prettier 是一个预设定的代码格式化工具,专门美化代码格式。预设定是指工具预设了一套格式化的规则,当然也支持自定义配置。

其实 ESLint 也是支持格式化的,但是我更倾向关闭 ESLint 中跟格式相关的规则,额外使用 Prettier,避免 ESLint 对简单的格式问题提示:

20211013161224

2.3. lint-staged

前面两个工具解决了代码风格的检查问题。 lint-staged 解决了应该何时检查的问题,看一下官方介绍:

🚫💩 lint-staged: Run linters against staged git files and don't let 💩 slip into your code base!

也就是说,在 commit 之前,把被添加到暂存区(即本次 commit 涉及的所有问题)的文件进行检查,防止不规范代码进入代码仓库。它的实现涉及到 git pre-commit hooks。

3. 项目配置

简单 3 步走:

  1. 安装配置 ESLint
  2. 安装配置 Prettier
  3. 使用 lint-staged 实现每次在 commit 之前执行代码检查

3.1. ESLint 安装与初始化

  1. 安装 ESLint

    npm install --save-dev eslint
    
  2. 初始化

    npx eslint --init
    

    回答一系列问题生成初始化配置文件.eslintrc.*

  3. 验证

    npx eslint <文件名>
    

    看到检查结果,则 ESLint 生效。

参看 ESLint Getting Started.

3.2. Prettier 安装配置

  1. 安装 Prettier

    npm install --save-dev prettier
    
  2. 新建一个.prettierrc.json配置文件。如果无需自定义配置,直接{}, 如果有需要,可以进行配置,如:

    {
      "useTabs": true,
      "tabSize": 2,
      "semi": true,
      "singleQuote": true,
      "trailingComma": "es5",
      "bracketSpacing": true,
      "parser": "typescript"
    }
    
  3. 关闭 ESLint 中的冲突规则,避免格式问题在编辑器报错。

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

    并在 ESLint 中继承配置,以.eslintrc.json为例:

    {
      "extends": ["prettier"]
      //...
    }
    
  4. 验证

    npx prettier <文件名>
    

    查看是否输出格式化后的代码。

3.3. 安装配置 lint-staged

3.3.1. 快速方案

执行命令:

npx mrm@2 lint-staged

这个命令会根据package.json的相关依赖自动安装、配置 lint-staged。所以,前提必须先完成 ESLint 和 Prettier 安装。

命令完成后,随便提交一个 commit 验证结果。

3.3.2. 手动方案

也可以手动完成整个过程,更加清晰可控:

  1. 安装相关依赖

    npm install --save-dev husky lint-staged pretty-quick
    

    其中,husky 方便 git hooks 管理,pretty-quick 可以更高效执行 Prettier。

  2. package.json中配置 pre-commit:

     "lint-staged": {
         // 匹配要检查的文件
         "*.js": "eslint  --fix"
     },
     "husky": {
         "hooks": {
         "pre-commit": "lint-staged && pretty-quick --staged"
     }
    

}

4. VSCode 相关插件与设置

如果你使用 VSCode,可以使用 VSCode 上对应的插件增强体验。

对应的设置,实现保存时自动格式化:

/* vscode settings.json file */
{
  // set prettier as default formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    // eslint auto fix
    "source.fixAll.eslint": true
  }
}