代码风格自动化最佳实践：ESLint+Prettier+lint-staged
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 步走：
安装配置 ESLint
安装配置 Prettier
使用 lint-staged 实现每次在 commit 之前执行代码检查
3.1. ESLint 安装与初始化
安装 ESLint
npm install --save-dev eslint 复制代码
初始化
npx eslint --init 复制代码
回答一系列问题生成初始化配置文件
.eslintrc.*。验证
npx eslint <文件名> 复制代码
看到检查结果，则 ESLint 生效。
参看 ESLint Getting Started.
3.2. Prettier 安装配置
安装 Prettier
npm install --save-dev prettier 复制代码
新建一个
.prettierrc.json配置文件。如果无需自定义配置，直接{}, 如果有需要，可以进行配置，如：{ "useTabs": true, "tabSize": 2, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "parser": "typescript" } 复制代码关闭 ESLint 中的冲突规则，避免格式问题在编辑器报错。
npm install --save-dev eslint-config-prettier 复制代码
并在 ESLint 中继承配置，以
.eslintrc.json为例：{ "extends": ["prettier"] //... } 复制代码验证
npx prettier <文件名> 复制代码
查看是否输出格式化后的代码。
3.3. 安装配置 lint-staged
3.3.1. 快速方案
执行命令：
npx mrm@2 lint-staged 复制代码
这个命令会根据package.json的相关依赖自动安装、配置 lint-staged。所以，前提必须先完成 ESLint 和 Prettier 安装。
命令完成后，随便提交一个 commit 验证结果。
3.3.2. 手动方案
也可以手动完成整个过程，更加清晰可控：
安装相关依赖
npm install --save-dev husky lint-staged pretty-quick 复制代码
其中，husky 方便 git hooks 管理，pretty-quick 可以更高效执行 Prettier。
在
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 } }
作者：czpcalm
链接：https://juejin.cn/post/7018488201295691789