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

• 1. 前言
• 2. 工具及其作用简介
  • 2.1. ESLint
  • 2.2. Prettier
  • 2.3. lint-staged
• 3. 项目配置
  • 3.1. ESLint 安装与初始化
  • 3.2. Prettier 安装配置
  • 3.3. 安装配置 lint-staged
    • 3.3.1. 快速方案
    • 3.3.2. 手动方案
• 4. VSCode 相关插件与设置

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 对简单的格式问题提示：

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 插件-ESLint
• VSCode 插件-Prettier

对应的设置，实现保存时自动格式化：

/* 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
  }
}