一、介绍
实施IDE：VSCode
实施目标： 规范常规代码提交信息和发版的版本信息、更新日志维护，对版本打标签 实施后推荐的工作流
示例：
1. git add .
2. git cz
3. npm version 1.0.0 -m ' fix: 特性版本更新'
会得到：
• 一个清晰的commit message
• 一个自动生成的changelog
• 一个自动打好的对应版本的tag
二、实施步骤
2.1 规范commit message
1. 格式
<type>(<scope>): <subject>
<body>
<footer>
2. 解释
type ：类型，修改的类型级别:
• feat: 新功能
• fix: 修补 Bug
• docs: 文档
• style: 格式变更，不影响代码的运行
• refactor: 重构（既不是新增功能，也不是修改 bug 的代码变动）
• test: 增加测试
• chore: 构建过程或辅助工具的变动
• up: 不属于上述分类时，可使用此类别
• merge: 用于 merge branch 时，需要手写 commit message 的情况
• revert: 用于撤销之前的 commit
scope： 修改范围，主要是这次修改涉及到的部分，最好简单的概括
subject： 修改的副标题，主要是具体修改的加点
body ：修改的主体标注
footer ：放置不兼容变更和Issue关闭的信息
3. 校验工具安装
• 安装commitlint/cli
npm install -g commitizen // 全局安装
npm install -D cz-git // 项目中安装
• 在项目中配置commitlint.conf.js
const { defineConfig } = require('cz-git')
module.exports = defineConfig({
rules: {
// @see: https://commitlint.js.org/#/reference-rules
},
prompt: {
alias: { fd: 'docs: fix typos' },
messages: {
type: '选择你要提交的类型 :',
scope: '选择一个提交范围（可选）:',
customScope: '请输入自定义的提交范围 :',
subject: '填写简短精炼的变更描述 :\n',
body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
footerPrefixesSelect: '选择关联issue前缀（可选）:',
customFooterPrefix: '输入自定义issue前缀 :',
footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
confirmCommit: '是否提交或修改commit ?'
},
types: [
{ value: 'feat', name: 'feat: 新增功能 | A new feature' },
{ value: 'fix', name: 'fix: 修复缺陷 | A bug fix' },
{ value: 'docs', name: 'docs: 文档更新 | Documentation only changes' },
{ value: 'style', name: 'style: 代码格式 | Changes that do not affect the meaning of the code' },
{
value: 'refactor',
name: 'refactor: 代码重构 | A code change that neither fixes a bug nor adds a feature'
},
{ value: 'perf', name: 'perf: 性能提升 | A code change that improves performance' },
{ value: 'test', name: 'test: 测试相关 | Adding missing tests or correcting existing tests' },
{
value: 'build',
name: 'build: 构建相关 | Changes that affect the build system or external dependencies'
},
{ value: 'ci', name: 'ci: 持续集成 | Changes to our CI configuration files and scripts' },
{ value: 'revert', name: 'revert: 回退代码 | Revert to a commit' },
{ value: 'chore', name: 'chore: 其他修改 | Other changes that do not modify src or test files' }
],
useEmoji: false,
emojiAlign: 'center',
useAI: false,
aiNumber: 1,
themeColorCode: '',
scopes: [],
allowCustomScopes: true,
allowEmptyScopes: true,
customScopesAlign: 'bottom',
customScopesAlias: 'custom',
emptyScopesAlias: 'empty',
upperCaseSubject: false,
markBreakingChangeMode: false,
allowBreakingChanges: ['feat', 'fix'],
breaklineNumber: 100,
breaklineChar: '|',
skipQuestions: [],
issuePrefixes: [
// 如果使用 gitee 作为开发管理
{ value: 'link', name: 'link: 链接 ISSUES 进行中' },
{ value: 'closed', name: 'closed: 标记 ISSUES 已完成' }
],
customIssuePrefixAlign: 'top',
emptyIssuePrefixAlias: 'skip',
customIssuePrefixAlias: 'custom',
allowCustomIssuePrefix: true,
allowEmptyIssuePrefix: true,
confirmColorize: true,
scopeOverrides: undefined,
defaultBody: '',
defaultIssues: '',
defaultScope: '',
defaultSubject: ''
}
})
2.2 结合Husky可以在我们提交前检测我们的提交是否符合规范
- 安装
npm install -D @commitlint/config-conventional
npm install -D husky lint-staged
- 在package.json中添加配置
"husky": {
"hooks": {
"pre-commit": "lint-staged", "commit-msg":
"commitlint --edit ./.git/COMMIT_EDITMSG" }
},
"commitlint": {
"extends": [ "@commitlint/config-conventional" ]
},
"lint-staged": {
"src/**/*.{js,vue}": [ "npm run lint", "git add" ]
}
2.3 提交版本升级的工具
- 安装
// 生成changelog
npm install conventional-changelog-cli -D
- 在package.json添加scripts
"scripts": {
"version": "conventional-changelog -p angular -i docs/CHANGELOG.md -s && git add docs/CHANGELOG.md",
"postversion": "git push && git push --tags"
} ，
"config": {
"commitizen": {
"path": "node_modules/cz-git"
}
},
解释：
// 不会覆盖之前的
conventional-changelog -p angular -i docs/CHANGELOG.md -s
// 重新生成整个changelog
changelog conventional-changelog -p angular -i docs/CHANGELOG.md -s -r 0
// CHANGELOG.md文件位置，若无docs文件夹需新建docs/CHANGELOG.md
运行以下指令后会自动升级版本号，打上版本tag、生成changelog、提交代码并执行postversion提交代码到远程仓库（版本升级时使用）
npm version minor -m ' chore: 封版'
2.4 开发工具
编辑器 Visual Studio Code(VSCode)及插件
- Vue-Official
- ESLint-让代码更美
- Prettier-Standard - JavaScript formatter
- Beautify css/sass/scss/less
- Gitlens，做分支对比 DIFF
- KOROFILEHEADER-在 VSCODE 中用于生成文件头部注释和函 数注释的插件
文件头部添加注释:
- 在文件开头添加注释，记录文件信息/文件的传参/出参等 - 支持用户高度自定义注释选项,适配各种需求和注释。
- 保存文件的时候，自动更新最后的编辑时间和编辑人
- 快捷键:WINDOW:CTRL+ALT+I,MAC:CTRL+CMD+I 在光标处添加函数注释:
- 在光标处自动生成一个注释模板
- 支持用户高度自定义注释选项
- 快捷键:WINDOW:CTRL+ALT+T, MAC:CTRL+CMD+T
2.5 推荐的VSCode配置
{
"git.ignoreMissingGitWarning": true,
"editor.formatOnPaste": false,
"git.autofetch": true,
"editor.formatOnType": false,
"git.enableSmartCommit": true,
"explorer.confirmDelete": false,
"javascript.format.enable": false,
"git.path": "/usr/bin/git",
"editor.fontFamily": "Microsoft YaHei, Menlo, Monaco, 'Courier New', monospace",
"javascript.updateImportsOnFileMove.enabled": "never",
"explorer.confirmDragAndDrop": false,
"fileheader.customMade": {
"Author": "username",
"Date": "Do not edit",
"LastEditors": "username",
"LastEditTime": "Do not edit",
"Description": "file content"
}, // 头部注释
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
}, // 函数注释
"fileheader.configObj": {
"autoAdd": false
},
"editor.fontSize": 13,
"editor.tabSize": 2,
"files.associations": {
"*.vue": "vue"
},
"eslint.options": {
"plugins": ["html"],
"extensions": [".js", ".vue"]
},
//配置eslint
"eslint.validate": [
"javascript", // 用eslint的规则检测js文件
"javascriptreact",
"vue",
"html"
],
"eslint.enable": true,
//让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"search.exclude": {
"**/Node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"git.confirmSync": false,
"window.zoomLevel": 1,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"editor.codeLens": true,
"editor.snippetSuggestions": "top",
"extensions.ignoreRecommendations": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"java.errors.incompleteClasspath.severity": "ignore",
"workbench.editor.showTabs": "multiple",
"window.openFilesInNewWindow": "on",
"compile-hero.less-output-directory": "./../../public/theme",
"editor.foldingStrategy": "indentation",
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [80],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": "off"
},
"workbench.colorTheme": "One Dark+ (Sublime)",
"security.workspace.trust.untrustedFiles": "open",
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"editor.guides.indentation": false,
"files.autoSave": "onFocusChange",
"git.openRepositoryInParentFolders": "never",
"workbench.editor.empty.hint": "hidden",
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.trailingComma": "none",
"prettier.useEditorConfig": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
//针对共用的语言如JS、TS和JSX关闭文件保存自动格式化功能，通过eslint来做这件事
"[javascript]": {
"editor.formatOnSave": false
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.printWidth": 120,
"baidu.comate.username": username"",
"baidu.comate.privateService": "https://comate.xx.me",
"baidu.comate.license": "xxx",
"baidu.comate.linePreferMode": "auto"
}
