本文主要记录Eslint和Cz工具集配置过程:

第一步：安装并配置angular-eslint

  1. 安装核心库;
1
ng add @angular-eslint/schematics
  1. 将默认的tslint转换为eslint;
1
2
ng g @angular-eslint/schematics:convert-tslint-to-eslint

  1. 运行第二步后,会自动生成.eslintrc.json文件,可以根据项目需要额外配置规则;

  2. 运行lint;

1
ng lint

第二步：安装commitizen工具集

  1. 安装cz工具;
1
2
npm install commitizen -D

  1. 安装符合Angular规范的提交说明,初始化适配器;
1
2
commitizen init cz-conventional-changelog --save --save-exact
  1. 接下来即可使用cz的命令git cz代替git commit进行提交说明;

第三步：安装commitlint,校验提交规范

  1. 安装commitlint工具;
1
2
npm install --save-dev @commitlint/cli

  1. 安装符合Angular风格的校验规则
1
npm install --save-dev @commitlint/config-conventional
  1. 在项目中新建commitlint.config.js文件并设置校验规则
1
2
3
module.exports = {
	extends: ['@commitlint/config-conventional']
};

第四步：安装husky,使用钩子来结合eslint和commitlint工具;

  1. 安装husky;
1
npm install husky -D;
  1. 配置package.json;
1
2
npm set-script prepare "husky install"
npm run prepare`
  1. 添加钩子文件,其中pre-commit钩子用来运行ng lint;commit-msg钩子用来约束提交的msg规则;
1
2
3
npx husky add .husky/pre-commit "npx ng lint {{YOUR_PROJECT_NAME_GOES_HERE}}    --fix 

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

使用

修改代码后进行提交

1
2
3
git add file

git cz

根据规范选择合适的类别,并补充其余信息即可.