项目规范管理
目的
为了使团队多人协作更加的规范，所以需要每次在 git 提交的时候，做一次硬性规范提交，规范 git 的提交信息文章来源：https://www.toymoban.com/news/detail-826899.html
使用commitizen规范git提交(交互式提交 + 自定义提示文案 + Commit规范)
- 安装依赖
pnpm install -D commitizen cz-conventional-changelog @commitlint/config-conventional @commitlint/cli commitlint-config-cz cz-customizable
- 配置package.json
{
"scripts": {
"commit:comment": "引导设置规范化的提交信息",
"commit": "git-cz"
},
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
},
"cz-customizable": {
// 若项目配置了type: "module", 就需要修改配置文件的后缀名为cjs, 并添加这个配置
"config": ".cz-config.cjs"
}
}
}
- 新增配置文件
commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional', 'cz'],
rules: {
'type-enum': [
2,
'always',
[
'feature', // 新功能（feature）
'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
'fix', // 修补bug
'ui', // 更新 ui
'docs', // 文档（documentation）
'style', // 格式（不影响代码运行的变动）
'perf', // 性能优化
'release', // 发布
'deploy', // 部署
'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
'test', // 增加测试
'chore', // 构建过程或辅助工具的变动
'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
'merge', // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
'build', // 打包
],
],
// <type> 格式 小写
'type-case': [2, 'always', 'lower-case'],
// <type> 不能为空
'type-empty': [2, 'never'],
// <scope> 范围不能为空
'scope-empty': [2, 'never'],
// <scope> 范围格式
'scope-case': [0],
// <scope> 枚举范围
'scope-enum': [1, 'always'],
// <subject> 主要 message 不能为空
'subject-empty': [2, 'never'],
// <subject> 以什么为结束标志，禁用
'subject-full-stop': [0, 'never'],
// <subject> 格式，禁用
'subject-case': [0, 'never'],
// <body> 以空行开头
'body-leading-blank': [1, 'always'],
'header-max-length': [0, 'always', 72],
},
}
- 添加自定义提示
.cz-config.cjsmodule.exports = { types: [ { value: 'feature', name: '✨ Features | 增加新功能' }, { value: 'bug', name: '🐛 Bug Fixes | 测试反馈bug列表中的bug号' }, { value: 'fix', name: '🐛 Bug Fixes | 修复bug' }, { value: 'ui', name: '💄 UI| 更新UI' }, { value: 'docs', name: '📝 Documentation |文档变更' }, { value: 'style', name: '💄 Styles | 风格(不影响代码运行的变动)' }, { value: 'perf', name: '⚡Performance Improvements | 性能优化' }, { value: 'refactor', name: '♻ Code Refactoring |重构(既不是增加feature，也不是修复bug)' }, { value: 'release', name: 'release: 发布' }, { value: 'deploy', name: '🚀 Chore |部署' }, { value: 'test', name: '✅ Tests |增加测试' }, { value: 'chore', name: '🚀 Chore |构建过程或辅助工具的变动(更改配置文件)' }, { value: 'revert', name: '⏪ Revert | 回退回退' }, { value: 'build', name: '📦 Build System |打包' }, ], // override the messages, defaults are as follows messages: { type: '请选择提交类型:', customScope: '请输入您修改的范围(可选):', subject: '请简要描述提交 message (必填):', body: '请输入详细描述(可选，待优化去除，跳过即可):', footer: '请输入要关闭的issue(待优化去除，跳过即可):', confirmCommit: '确认使用以上信息提交？(y/n/e/h)', }, // 要是同一个git下有多个项目文件家， 可以打开注释选择git要操作的项目 // scopes: [{ name: 'h5' }, { name: 'manage'}], allowCustomScopes: true, skipQuestions: ['body', 'footer'], subjectLimit: 72, }
使用prettier格式化代码
- 安装
pnpm add --save-dev --save-exact prettier
- 创建
.prettierrc文件，并添加如下配置, 具体配置可以查看官网
{
"semi": false,
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"printWidth": 150
}
使用husky及lint-staged再提交代码时格式化代码
- 安装(注意：这里与
prettier官网的给出的示例不太一致， 建议看husky官网进行配置)pnpm add --save-dev husky lint-staged pnpm exec husky init npm pkg set scripts.prepare="husky" - 在
package.json添加如下配置
{
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
}
}
- 在
.husky新建pre-commit文件，并添加如下配置
echo "🚀 pre-commit"
echo "npx --no-install lint-staged"
npx --no-install lint-staged
- 在
.husky新建commit-msg文件，并添加如下配置
echo "🚀 commit-msg"
echo "npx --no-install commitlint --edit \"$1\""
npx --no-install commitlint --edit "$1"
完结
在git add后执行pnpm run commit命令根据提示输入commit信息即可。文章来源地址https://www.toymoban.com/news/detail-826899.html
到了这里，关于前端项目git提交规范配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
