工作中,我们常常是以一个团队为单位去开发,每个人都有自己的代码风格,或者时常会有新的同学进入团队,不熟悉团队的代码要求,误提不合规的代码。人工review时常会有疏漏,因此需要一些工具来规范或者自动化review
commit规范
commitizen
commitizen 提供commit模版,用户一步步填写后生成最终的commit信息,可以帮助我们规范化git commit的提交, 安装commitizen后,我们可以使用git cz来代替git commit。
用法:
全局安装:npm/pnpm i commitizen -g/ yarn add commitizen -g/ ni commitizen -g
安装完成后每次提交代码都可以 git cz,
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 文件, 官方模板在这
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']作为默认规则
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等文件,并在里面添加你要跑的脚本命令。
代码规范
ts 校验
在.eslintrc.js中配置你项目的eslint规则然后只需要跑tsc --noEmit即可。
stylelint
stylelint 提供了对样式文件代码的校验能力。 用法
安装:npm/pnpm i stylelint
yarn add stylelint
ni stylelint
根目录添加.stylelintrc.json并添加配置
项目内执行 stylelint --config .stylelintrc.json
Prettier代码美化
Prettier 可以自动美化代码,比如 统一空格数,单引号双引号,分号等 用法
安装:npm/pnpm i prettier
yarn add prettier
ni prettier
根目录新建 .prettierrc.js 并添加配置
项目内执行 npx prettier --write
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的钩子中,在提交前进行校验。
个人学习总结记录,不喜勿喷,感谢~