git-commit-validate

主要解决：git 提交代码时自动校验，看是否符合预设的规则。只有校验通过才可以提交代码。注意：只校验 git 暂存的内容，即 git add 包含的文件。

配合 eslint 和 stylelint 约束 JavaScript、Typescript、Vue、React、Angular、Scss 等代码规范性

如何使用

安装

npm install -D git-commit-validate

pnpm add -D git-commit-validate

yarn add --dev git-commit-validate

最佳实践：结合 lint-staged 和 husky

1. 安装 lint-staged 和 husky

npm install -D lint-staged husky

2. 设置 scripts

   在 package.json 中 设置 scripts

"scripts": {
  "validate": "gcv se -es ts,vue",
},

3. 设置 lint-staged

   在 package.json 中 设置 lint-staged

"lint-staged": {
  "*.{scss,ts,vue}": [
    "npm run validate"
  ]
},

4. 使用 husky 添加 pre-commit

husky install
npx husky add .husky/pre-commit "npx lint-staged"

也可以把 husky install 放到 package.json 中，安装 husky 时自动执行

"scripts": {
  "prepare": "husky install"
},

5. 测试

创建一 ts 文件，如 demo.ts，并添加不符合规则的 code，执行以下代码

git add demo.ts
git commit -m "demo"

我们发现会给出校验失败的提示信息，重新修改代码，符合规则后再提交，直至没有错误为止

单独命令行使用

需要验证的时候执行以下命令

npx gcv

在 git commit 前，可以执行以上命令，完成对代码的校验

配置项

gcv 默认会使用 eslint 校验 js 和 ts 文件，如果需要校验其他文件，参考以下配置项说明

• e 设置 eslint options TODO 该功能待完善

  npx gcv -e options
  npx gcv --eslint-options options

• ex 设置 eslint 排除的校验规则 TODO 该功能待完善

  npx gcv -ex rules
  npx gcv --eslint-exclude-rules rules

• es 设置 eslint 检测文件后缀，默认为 js,ts，多个用 , 分割，比如：js,ts,jsx,tsx,vue

  npx gcv -es js,ts,jsx,tsx,vue
  npx gcv --eslint-suffix js,ts,jsx,tsx,vue

• se 开启 stylelint 校验

  npx gcv -se
  npx gcv --style-enabled

• s 设置 stylelint options TODO 该功能待完善

  npx gcv -s options
  npx gcv --stylelint-options options

• ss 设置 stylelint 检测文件后缀，默认为 vue,scss，多个用 , 分割，比如：vue,scss,sass,less

  npx gcv -ss vue,scss,sass,less
  npx gcv --stylelint-suffix vue,scss,sass,less

在代码中使用

直接导入即可

import gcv from 'git-commit-validate';

gcv();
// 或者
gcv(options);

配置项 options 包含以下参数

type Options = {
  eslintOptions?: ESLint.Options, // eslint 选项
  eslintExcludeRules?: RegExp, // eslint 忽略的校验规则
  eslintSuffix?: string | string[], // eslint 校验的文件后缀
  stylelintOptions?: LinterOptions, // stylelint 选项
  stylelintSuffix?: string | string[], // stylelint 校验的文件后缀
  styleEnabled?: boolean, // 是否校验 style
};