eslint: 检查js代码规范
prettier: 代码格式化
lint-staged: git 缓存区 提交前的检查
commitlint: git commit 注释规范
1. ESLint
- 安装
npm i eslint -D
- 初始化
npx eslint --init
回答一系列问题生成配置文件.eslintrc.*
- 验证
npx eslint <文件名>
看到检查结果，则 ESLint 生效。
2. Prettier
- 安装
npm i preiiter -D
- 新建一个.prettierrc.json配置文件。如果无需自定义配置，直接{}, 如果有需要，可以进行配置，如：
module.exports = {
printWidth: 100, // 一行代码的最大字符数
semi: false, // 尾部分号
singleQuote: true, // 单引号
...
}
- 关闭 ESLint 中的冲突规则，避免格式问题在编辑器报错。
npm i eslint-config-prettier eslint-plugin-prettier -D
并在 ESLint 中继承配置，以.eslintrc.json为例：
{
"extends": [..., "plugin:prettier/recommended"]
}
- 验证
npx prettier <文件名>
查看是否输出格式化后的代码
3. lint-staged
3.1 快速方案
npx mrm@2 lint-staged
这个命令会根据package.json的相关依赖自动安装、配置 lint-staged。所以，前提必须先完成 ESLint 和 Prettier 安装。
命令完成后，随便提交一个 commit 验证结果。
3.2 手动方案
也可以手动完成整个过程，更加清晰可控：
- 安装相关依赖
npm install --save-dev husky lint-staged pretty-quick
其中，husky 方便 git hooks 管理，pretty-quick 可以更高效执行 Prettier。
- 在
package.json中配置 pre-commit：
"lint-staged": {
// 匹配要检查的文件
"*.(js|css|md)": "pretty-quick --staged"
}
- 项目使用husky
npx husky install
4添加husky install到package.json scripts中, 然后跑一次 npm run prepare
npm pkg set scripts.prepare="husky install"
npm run prepare
执行之后会在package.json的script中会增加一个prepare。
- 添加husky hook
npx husky add .husky/pre-commit "npx lint-staged"
执行之后会增加文件.husky/pre-commit
4. CommitLint
- 安装插件
npm i @commitlint/cli @commitlint/config-conventional -D
- 在项目根目录添加commitlint.config.js配置文件
commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional']
}
- 添加git commit钩子
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
- commit 基本格式
type[(scope)]: subject
示例格式: feat: message 或 feat(scope): message
- type （必填）
fix - Bug 修复
feat - 新增功能
build - 构建工具或项目依赖的改动，如 webpack/rollup 配置
docs - 文档相关内容改动，如添加注释
style - 不会影响系统功能的代码格式相关改动，如删除/添加空格
refactor - 代码重构改动, 如 vue2 -> vue3
test - 添加单元测试
chore - 开发工具变动(构建、脚手架工具等)
perf - 性能相关改动
revert - 执行 git revert 之后的 revert 信息 - subject （必填）
提交信息概述，能够简短概述本次提交的主体内容即可 - scope （可选）
代码修改范围
