目标：
- 研发团队公用一套静态代码检测规范；
- 一套代码提交规范；
- 利用自动化工具完成检测，提高编码规范性和review效率。
流行的前端行业代码eslint静测规范：
eslint-config-google：Google标准（https://www.npmjs.com/package/eslint-config-google）
eslint-config-airbnb：Airbnb标准 （https://www.npmjs.com/package/eslint-config-airbnb）最流行、最严苛
eslint-config-standard：Standard标准（https://www.npmjs.com/package/eslint-config-standard）使用人数最多
上面三个规范为行业内比较出名和流行的规范，建议中小型公司已行业规范为准。
关于eslint配置不是本篇文章重点，涉及内容也比较对，下期会专门写一篇幅讲解。
代码提交规范自动化检测
husky：是一个为 git 客户端增加 hook 的工具。安装后，它会自动在仓库中的 .git/ 目录下增加相应的钩子；比如 pre-commit 钩子就会在你执行 git commit 的触发。我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。当然，pre-commit 阶段执行的命令当然要保证其速度不要太慢，每次 commit 等很久体验不好。
lint-staged：一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具；这个很实用，因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了，可能导致项目改动很大。所以这个 lint-staged，对团队项目和开源项目来说，是一个很好的工具，它是对个人要提交的代码的一个规范和约束。
作用：
- 规范代码提交： git commmit -m ‘xxx’ 时，用来检查 xxx 是否满足规范格式的工具。
- pre-commit hook中自动检测并修复部分代码规范（全量检测），搭配lint-staged使用可实现增量检测（仅检测缓存区）。
安装方式：
- npm i husky -D
- 在 package.json 中添加 prepare 命令
{
"script": {
"prepare": "husky install"
}
}
执行prepare命令 npm run prepare 会在项目跟目录下创建 .husky/文件夹，用来存放所有的git hooks。
添加commit-msg
npx husky add .husky/commit-msg 'yarn commitlint --edit "$1"'
// 如果不生效请使用yarn
yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'
- 自定义git提交规范
npm i @commitlint/cli @commitlint/config-conventional -D
项目跟目录下创建 commitlint.config.js 在里面定义提交规则
配置案例：
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'body-leading-blank': [2, 'always'],
'footer-leading-blank': [1, 'always'],
'header-max-length': [2, 'always', 108],
'subject-empty': [2, 'never'],
'type-empty': [2, 'never'],
'type-enum': [
2, // type必须输入
'always',
[
'feat', // 新功能
'fix', // 修复bug
'style', // 修改格式，删除代码空格、缩进等
'docs', // 文档、注释修改
'refactor', // 代码重构，没有功能修改
'merge', // 代码合并
'revert', // 版本回滚
'chore', // 构建过程或辅助工具的变动
'test',
'perf',
'build',
'ci',
'revert',
'wip',
'workflow',
'types',
'release',
]
]
}
}
使用案例：
git commit -m 'feat: 增加 xxx 功能'
错误type将无法提交。
代码规范提交检测
- 添加 git hooks
执行以下命令，会在.husky/下创建一个名为 pre-commit 的shell脚本，pre-commit钩子会在git提交commit时先触发，执行 npm run lint 命令。
npx husky add .husky/pre-commit "npm run lint"
// 如果不生效请使用yarn
yarn husky add .husky/pre-commit "npm run lint"
- 安装lint-staged（实现代码增量检测，只检测添加到git缓存区的文件）
npm i lint-staged -D
- 在 package.json 中添加lint命令
{
"script": {
"lint": "lint-staged"
}
}
- 添加lint-staged配置
- 方法一：在
package.json中添加 - 方法二：创建
.lintstagedrc文件 - 方法三：创建
lint-staged.config.js文件并进行配置
以package.json中添加为例
{
"lint-staged": {
"*.{js.vue}": [
"prettier --write",
"eslint --cache --fix"
]
}
}
在 commit 之前，将暂存区的内容做一次 代码检查 和 代码美化，然后再添加到暂存区；然后再 commit
- 安装eslint和prettier插件，项目根目录下面配置eslint和prettier规则，然后就可以在git提交时进行代码美化和校验了。
总结：husky+lint-staged 自动化代码提交规范方案配置完成，无论是webpack工程还是vite工程都可以正常使用，本文只介绍了husky对于git提交信息的规范检测，下期讲解husky配置git提交时对于eslint代码规范的检测。
