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

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

  1. 安装核心库;

    ng add @angular-eslint/schematics
  1. 将默认的tslint转换为eslint;

    ng g @angular-eslint/schematics:convert-tslint-to-eslint
  1. 运行第二步后,会自动生成.eslintrc.json文件,可以根据项目需要额外配置规则;

  2. 运行lint;

    ng lint


第二步:安装commitizen工具集

  1. 安装cz工具;

    npm install commitizen -D
  1. 安装符合Angular规范的提交说明,初始化适配器;

    commitizen init cz-conventional-changelog --save --save-exact
  1. 接下来即可使用cz的命令git cz代替git commit进行提交说明;


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

  1. 安装commitlint工具;
    npm install --save-dev @commitlint/cli
  1. 安装符合Angular风格的校验规则

    npm install --save-dev @commitlint/config-conventional
  1. 在项目中新建commitlint.config.js文件并设置校验规则

    module.exports = {
    extends: ['@commitlint/config-conventional']
    };


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

  1. 安装husky;
    npm install husky -D;
  1. 配置package.json;
    npm set-script prepare "husky install"
    npm run prepare`
  1. 添加钩子文件,其中pre-commit钩子用来运行ng lint;commit-msg钩子用来约束提交的msg规则;
    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"'


使用

修改代码后进行提交

git add file

git cz


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