commitLint和husky实现代码提交校验

现在使用的版本管理工具，首选应该都是git，入职到现在，git之外的版本管理工具也就最开始使用过svn。现在的项目，规范也越来越重要，所以才有各种强制的代码格式检测。当然，自己做过的项目还没有那么严格过，顶多就是一些格式化和eslint的统一。

先说说git提交时候的信息，一般都比较随意，大概描述这次提交的重点就够了。有时候刚改完代码测试，马上另外一个小东西要调整，所以提交的时候有时候123之类的都有可能。这其实很不规范，没办法从提交信息中获取这次提交的大概用意。一些老一点大一点的项目，需求调整的时候之前的逻辑通过提交信息也不知道是哪个需求调整的。反正就是commit的信息和代码变更对不上。当然，一次提交可能涉及了很多，只要描述大概的信息就够了，也没必要每一点都描述。

所以，必要的时候，要使用工具进行约束，commitlint就是专门用来约束提交信息的：
https://commitlint.js.org/#/

直接创建一个项目：vue create test-commtlint
根据官网步骤：
install，不一定-g，–save-dev就行:

npm install -g @commitlint/cli @commitlint/config-conventional

configure：

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

官网给出测试：

echo 'foo: bar' | commitlint

会报错，让你要去配置文件配置：

C:\Users\dell\Desktop\test\test-commtlint>echo 'foo: bar' | commitlint
⧗   input: 'foo: bar'
✖   Please add rules to your `commitlint.config.js`
    - Getting started guide: https://git.io/fhHij
    - Example config: https://git.io/fhHip [empty-rules]

✖   found 1 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

单独一个commitlint的时候只能用这样去测试，用其他工具或者命令都是可以成功的。

这边要注意一点，如果是用powershell命令窗口生成的配置文件：

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

会报错：

C:\Users\dell\Desktop\test\test-commtlint\commitlint.config.js:1
��m


SyntaxError: Invalid or unexpected token
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at module.exports (C:\Users\dell\AppData\Roaming\npm\node_modules\@commitlint\cli\node_modules\import-fresh\index.js:32:59)
    at loadJs (C:\Users\dell\AppData\Roaming\npm\node_modules\@commitlint\cli\node_modules\cosmiconfig\dist\loaders.js:16:18)
at Explorer.loadFileContent (C:\Users\dell\AppData\Roaming\npm\node_modules\@commitlint\cli\node_modules\cosmiconfig\dist\Explorer.js:84:32)

查了一下，应该是生成的字符编码有问题，而且是字符串，所以手动新建，然后把内容复制进去。而且测试的时候echo ‘foo: bar’ | commitlint也不能用powershell，也只能用cmd的命令窗口。

提交的信息可以自己定制，配置rules：
https://commitlint.js.org/#/reference-rules
我自己配置了，是真的没搞懂，官方文档也没说哪些是必须的，配置了好像也没用，有用过的可以发一份配置瞅瞅：

module.exports = {
  extends: [
    "@commitlint/config-conventional"
  ],
  rules: {
    'type-enum': [2, 'always', [
      'upd', 'feat', 'fix', 'refactor', 'docs', 'chore', 'style', 'revert'
     ]],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0],
	'subject-empty': [0],
    'subject-case': [0],
    'header-max-length': [0]
  }
};

三个参数：

Level [0..2]: 0 disables the rule. For 1 it will be considered a warning for 2 an error.
Applicable always|never: never inverts the rule.
Value: value to use for this rule.

大概意思第一个参数0为disable，1为warning，2为error，第二个参数never和always，never无视规则，最后一个参数就是具体的规则了。

所以很少只用commitlint，因为没git hook，只能用那种命令测试。

项目用了eslint之类的代码格式校验，编辑的时候是会报错，但是提交是没影响的，可以用git的hook来校验，其实就是执行eslint的命令：
https://www.npmjs.com/package/husky

npm install husky --save-dev

npm set-script prepare "husky install"

npm run prepare

npx husky add .husky/pre-commit "npm test"

git add .husky/pre-commit

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'

这边要注意一点，set-script是npm 7.x版本的，所以要注意看npm的版本。（更新npm和node的时候，用命令的话会提示权限之类的报错，用管理员身份允许命令窗口还是报错，所以直接用电脑管家或者360管家直接更新）

然后要配置lint的测试命令，package.json的script里面配置：

"test": "npm run lint -- --fix"

然后修改不符合eslint的代码，就会报错：

PS C:\Users\dell\Desktop\test\test-commtlint> git commit -m a

> test-commtlint@0.1.0 test
> npm run lint -- --fix


> test-commtlint@0.1.0 lint
> vue-cli-service lint "--fix"

error: 'a' is assigned a value but never used (no-unused-vars) at src\main.js:3:5:
  1 | import { createApp } from 'vue'
  2 | import App from './App.vue'
> 3 | let a = 10
    |     ^
  4 | createApp(App).mount('#app')
  5 |


1 error found.
husky - pre-commit hook exited with code 1 (error)

提交信息不对的情况也可以实现了，默认只有这几种build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test：

PS C:\Users\dell\Desktop\test\test-commtlint> git commit -m aa

> test-commtlint@0.1.0 test
> npm run lint -- --fix


> test-commtlint@0.1.0 lint
> vue-cli-service lint "--fix"

 DONE  No lint errors found!
⧗   input: aa
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

这是自己实现的步骤，提交规则什么的，没去研究一下，英文文档还是看的吃力，希望有大佬可以把这两个东西弄成中文文档，然后实现一下。发现网上很多文章好像都没有自己生成项目实践一下，那些文章的步骤下来，各种报错。

最后总结一下步骤：

1、npm install -save-dev @commitlint/cli @commitlint/config-conventional
2、新建文件commitlint.config.js，内容：module.exports = {extends: ['@commitlint/config-conventional']}
3、npm install husky --save-dev
4、npm set-script prepare "husky install"
5、npm run prepare
6、npx husky add .husky/pre-commit "npm test"
7、git add .husky/pre-commit
8、npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
9、在package.json的script里面配置"test": "npm run lint -- --fix"

欢迎关注订阅号 coding个人笔记