Angular代码规范:Eslint及Cz工具集

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

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

1. 安装核心库;

   ng add @angular-eslint/schematics

2. 将默认的tslint转换为eslint;

   ng g @angular-eslint/schematics:convert-tslint-to-eslint

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

4. 运行lint;

   ng lint

第二步：安装commitizen工具集

1. 安装cz工具;

   npm install commitizen -D

2. 安装符合Angular规范的提交说明,初始化适配器;

   commitizen init cz-conventional-changelog --save --save-exact

3. 接下来即可使用cz的命令git cz代替git commit进行提交说明;

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

1. 安装commitlint工具;

   npm install --save-dev @commitlint/cli

2. 安装符合Angular风格的校验规则

   npm install --save-dev @commitlint/config-conventional

3. 在项目中新建commitlint.config.js文件并设置校验规则

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

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

1. 安装husky;

   npm install husky -D;

2. 配置package.json;

   npm set-script prepare "husky install"
   npm run prepare`

3. 添加钩子文件,其中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

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