利用commitizen/commitlint/husky...帮助团队提升代码规范

1,479 阅读3分钟

工作中,我们常常是以一个团队为单位去开发,每个人都有自己的代码风格,或者时常会有新的同学进入团队,不熟悉团队的代码要求,误提不合规的代码。人工review时常会有疏漏,因此需要一些工具来规范或者自动化review

commit规范

commitizen

commitizen 提供commit模版,用户一步步填写后生成最终的commit信息,可以帮助我们规范化git commit的提交, 安装commitizen后,我们可以使用git cz来代替git commit

commitizen gitHub 地址

用法:

全局安装:npm/pnpm i commitizen -g/ yarn add commitizen -g/ ni commitizen -g
安装完成后每次提交代码都可以 git cz, 

add-commit.png

cz-customizable

commitizen提供的模板是固定的,cz-customizable就可以自定义提交的模板。 用法:

    安装:npm/pnpm i cz-customizable/ yarn add cz-customizable / ni cz-customizable

在package.json 中添加

  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },

并在根目录添加一个 .cz-config.js 文件, 官方模板在这

cz-customizable gitHub 地址

commitlint

commitlint 可以是一个commit的校验工具, 通常和husky一起使用,校验用户提交的commit符不符合规范。 用法:

安装:npm/pnpm i @commitlint/cli 
     yarn add @commitlint/cli  
     ni @commitlint/cli
在项目根目录新建一个commitlint.config.js 文件, 里面可以填写规则等配置

一般我们同时会安装 @commitlint/config-conventional,在配置中添加extends: ['@commitlint/config-conventional']作为默认规则

rule配置教程

commitlint gitHub 地址

husky

husky 是git的钩子函数工具,在git执行不同hook时可以添加自定义脚本程序 用法

安装:npm/pnpm i husky
     yarn add husky
     ni husky

低版本的husky, 可以在package.json中添加钩子

"husky": {
    "hooks": {
        "pre-commit": "xxx", 提交commit之前触发 一般是一些代码校验,如ts校验
        "commit-msg": "xxx"  commit的message时触发的钩子,一般是commitlint
     } 
  }

高版本husky,需要在项目内执行husky install, 可以在package.json中添加命令 "pre": "husky install" 跑一下。 然后项目内会有一个.husky文件夹,可以新建pre-commit/commit-msg等文件,并在里面添加你要跑的脚本命令。

husky gitHub

代码规范

ts 校验

.eslintrc.js中配置你项目的eslint规则然后只需要跑tsc --noEmit即可。

stylelint

stylelint 提供了对样式文件代码的校验能力。 用法

   安装:npm/pnpm i stylelint
     yarn add stylelint
     ni stylelint
     
   根目录添加.stylelintrc.json并添加配置
   
   项目内执行 stylelint --config .stylelintrc.json
    

配置项说明

stylelint gitHub

Prettier代码美化

Prettier 可以自动美化代码,比如 统一空格数,单引号双引号,分号等 用法

安装:npm/pnpm i prettier
  yarn add prettier
  ni prettier
  
根目录新建 .prettierrc.js 并添加配置
项目内执行 npx prettier --write

配置项说明

prettier gitHub

lint-staged

lint-staged 可以提供针对不同后缀执行不同校验命令的能力 用法

   安装:npm/pnpm i lint-staged
     yarn add lint-staged
     ni lint-staged
     
   在根目录新建lint-staged.config.js,可以添加配置,如
   '**/*.ts?(x)': 'tsc --noEmit' 代表针对ts/tsx的文件,进行ts校验

我们可以在lint-staged的配置中配置好所有的校验命令,并添加至husky的pre-commit的钩子中,在提交前进行校验。

个人学习总结记录,不喜勿喷,感谢~