git commit前ESLint检测+注释信息强制规范

[licoded]

Husky

安装

npm install husky --save-dev

使用

编辑 package.json 添加 prepare 命令并执行一次：

npm set-script prepare "husky install"  # 这步我是按它的意思手动实现的
npm run prepare

然后添加一个Hook：

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

下次提交前就会自动执行 npm run test

参考链接

• https://www.npmjs.com/package/husky
• https://typicode.github.io/husky/#/

ESLint

安装

npm install eslint --save-dev

配置

然后，你需要通过下面命令建立配置文件

./node_modules/.bin/eslint --init

配置完成后，你就可以对任意文件或文件夹执行 ESLint 命令

./node_modules/.bin/eslint yourfile.js

参考链接

• https://www.npmjs.com/package/eslint
• https://eslint.org/docs/user-guide/getting-started

lint-staged

安装

npm install lint-staged --save-dev

配置

直接添加在 package.json 中，或者新建 .lintstagedrc 文件来存放配置

{
  "lint-staged": {
    "*": "your-cmd"
  }
}

也可以用数组配置多个命令，如下

{
  "lint-staged": {
    "*": ["your-cmd1", "your-cmd2"]
  }
}

然后在 Husky 中添加 Hook

npx husky add .husky/pre-commit "npx lint-staged"  # 此命令会以追加而不是覆盖的方式添加

文件匹配说明

Linter 命令只处理暂存区 (staged) 的文件，并采用 glob 模式来进行文件匹配，它使用 micromatch 匹配具有以下规则的文件：

• 如果匹配串中没有 /，micromatch's matchBase 选项就会被启用，在这种情况下只是用文件的文件名进行匹配，文件所在目录将不被考虑

  • "*.js" 匹配所有 JavaScript 文件, 像 /test.js 和 /foo/bar/test.js
  • "!(*test).js" 匹配除了以 test.js 结尾的所有 JavaScript 文件，所以它会匹配 foo.js 但不匹配 foo.test.js

• 如果匹配串中含有 /，就需要考虑文件所在路径了

  • "./*.js" 匹配 git 仓库根目录下的所有 JavaScript 文件 ，所以它会匹配 /test.js 但不匹配 /foo/bar/test.js
  • "foo/**/\*.js" 匹配 /foo 目录下的所有 JavaScript 文件，所以它会匹配 /foo/bar/test.js 但不匹配 /test.js

lint-staged 会按照以下步骤来匹配文件

• 自动解析git root，无需配置
• 选择存在于项目目录中的暂存文件
• 使用指定的 glob 模式过滤它们
• 将绝对路径作为参数传递给 linter

参考链接

• https://www.npmjs.com/package/lint-staged

commitizen

全局安装

npm install -g commitizen

配置

在项目中初始化

commitizen init cz-conventional-changelog --save-dev --save-exact  # npm
commitizen init cz-conventional-changelog --yarn --dev --exact     # Yarn

然后添加一个Hook：

npx husky add .husky/prepare-commit-msg "exec < /dev/tty && node_modules/.bin/cz --hook || true"

下次提交写注释时就会自动执行 cz 命令，使用交互式表单的方式来保证规范书写 commit 和 changelog 信息

参考链接

• https://www.npmjs.com/package/commitizen
• Commit message 和 Change log 编写指南