持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
大家好，我是一泽，每一个优秀的前端团队都应该制定一套合适的代码规范，让团队每一个成员去遵循
那么要怎么起步呢
- 首先我们需要自行了解一下 husky+commitlint 、 lint-staged 、 prettier-eslint 分别是干什么的
- 这里特别说明一下lint-staged的意义：在代码提交之前，进行代码规则检查能够确保进入git库的代码都是符合代码规则的。但是整个项目上运行lint速度会很慢，lint-staged能够让lint只检测暂存区的文件，所以速度很快
- 当然也可以不用 prettier-eslint ，用其他的格式化工具去配置也 OK，我这里以 prettier-eslint 为例
- 了解完以后，我们需要安装以上三个东西，因为这三个只是开发环境的依赖，所以要用
--save-dev
// npm
npm i @commitlint/{cli,config-conventional} -D
npm i husky@4.3.8 -D //建议安装V4这个版本最稳定，无报错！
npm i lint-staged -D
npm i prettier-eslint -D
// yarn
yarn add @commitlint/{cli,config-conventional} -D
yarn add husky@4.3.8 -D
yarn add lint-staged -D
yarn add prettier-eslint -D
- 当然还有一种懒人版安装方法，你直接在你的 package.json 文件里 devDependencies 开发依赖里面加入以下代码后，直接
npm i或者yarn我这里的依赖版本可能会有点旧了，但也能用！
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.1.0",
"prettier-eslint": "^12.0.0",
"prettier-eslint-cli": "^5.0.0",
"husky": "^4.3.8",
"lint-staged": "^10.2.11",
接下来这样配置，贼稳！
- package.json 文件里添加配置信息
"lint-staged": {
"**/*.{js,jsx,mjs,ts,tsx}": [
"node_modules/.bin/prettier-eslint --write" //这里你可能安装的不是prettier-eslint，需要根据你自己的格式化工具来写
], //jsx、tsx针对React项目
"**/*.{vue,html}": [
"prettier-eslint --write",
"stylelint --fix --allow-empty-input"
], //这个Vue项目才用
"src/**/*.{css,scss,less,html,md,markdown,json}": [
"node_modules/.bin/prettier-eslint --write"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e"
}
}
- 在根目录下创建一个commitlint.config.js文件，也可以是commitlintrc.js， 在文件里添加配置信息
//demo
module.exports = {
extends: ["@commitlint/config-conventional"],
rules: {
"subject-case": [0], //0 表示关闭规则,1表示将该规则转换为警告，2表示将该规则转换为错误
"type-enum": [
2,
"always",
[
"build", // webpack 构建
"ci", // ci 构建
"chore", // 其他修改(日常事务), 比如改变构建流程、或者增加依赖库、工具等
"docs", // 文档
"feat", // 添加新功能、新特性
"fix", // 修复 bug
"perf", // 优化性能
"refactor", //代码重构
"revert", // 代码回退
"style", // 修改样式
"test", // 测试代码
"balabala", //自定义type
],
],
},
};
- 常见的
rules规则，可以看官网：List of available rules - ESLint中文
最后动手检测一下
- 没写或者没写对commitlint.config.js文件规定的commit类型，用了中文的冒号或者冒号后面不加空格，都会报错
- 正确的写法，当然这里是没限制字符长度，如果限制了最少字符长度就不一定了
