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 生效。
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 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
}
}