git地址: github.com/Raj6666/vue…
规范代码提交 —— 用CommitLint
安装依赖
commitlint库 是校验提交信息的工具
husky库 是提供git提交的钩子函数工具
npm install @commitlint/cli @commitlint/config-conventional --save-dev
npm install husky@1.3.1 --save-dev
新增校验规则文件到根目录:commitlint.config.js
rule配置说明::rule由name和配置数组组成,如:'name:[0, 'always', 72]'
,数组中第一位为level,可选0,1,2
,0为disable,1为warning,2为error,第二位为应用与否,可选always|never
,第三位该rule的值。具体配置例子如下:
module.exports = {
extends: ["@commitlint/config-conventional"],
rules: {
"type-enum": [
2,
"always",
[
"merge", "upd", "feat", "fix", "refactor", "docs", "chore", "style", "revert",
],
],
},
"type-case": [0],
"type-empty": [0],
"scope-empty": [0],
"scope-case": [0],
"subject-full-stop": [0, "never"],
"subject-case": [0, "never"],
"header-max-length": [0, "always", 72],
};
常用的 type 类型
类型 | 描述 |
---|---|
build | 编译相关的修改,例如发布版本、对项目构建或者依赖的改动 |
chore | 其他修改, 比如改变构建流程、或者增加依赖库、工具等 |
ci | 持续集成修改 |
docs | 文档修改 |
feat | 新特性、新功能 |
fix | 修改bug |
perf | 优化相关,比如提升性能、体验 |
refactor | 代码重构 |
revert | 回滚到上一个版本 |
style | 代码格式修改, 注意不是 css 修改 |
test | 测试用例修改 |
package.json 中配置husky属性
其中commit-msg代表了在用户git commit的时候执行的钩子函数指令
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"post-commit": "git update-index --again"
}
}
规范编辑器代码格式 ——— 用.editorconfig
项目根目录新建 .editorconfig 文件
用于统一编辑器格式化代码时所用的规则,vscode、webstorm能自动读取
多人协同开发时,统一的代码格式是尤为重要的
# editorconfig.org
root = true
[*]
charset = utf-8
indent_size = 2
indent_style = space
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
规范版本控制 —— 使用changelog自动生成代码更新日志,并结合Standard-version
安装 conventional-changelog 及其脚手架, 还有commit的监测器
安装 standard-version 协助生成对应的标准的版本号
npm install conventional-changelog --save-dev
npm install conventional-changelog-cli --save-dev
npm install conventional-commits-detector --save-dev
npm install standard-version --save-dev
在更新版本时,依据主版本(major),次版本( minor) or 修订版(patch) 规则生成版本号
通常大版本更新我们会更新主版本号,新增功能或属性则更新次版本,修复bug等紧急问题处理则是更新修订版
在 package.json 的script脚本中新增更新对应版本并生成该版本changelog的脚本
后续我们每当开发完一个完整功能要更新一个版本后需要做的两件事,就能实现changelog的commit聚合与版本tag高度关联
- 执行对应的版本更新version-脚本,如 npm run version-minor
- 在git上打上同名的版本tag —— 可编写脚本(tagUpdate.js),自动获取当前版本号并打tag
"scripts": {
"genChangelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1 && git add CHANGELOG.md",
"version-major": "standard-version -r major && npm run genChangelog ",
"version-minor": "standard-version -r minor && npm run genChangelog ",
"version-patch": "standard-version -r patch && npm run genChangelog ",
"tag": "node ./tagUpdate.js"
},
初次执行时,可先使用以下脚本生成以前到现在为止的changelog汇总(-r的参数设置0)
conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md
PS: 在生成changelog的指令中加入-r 1 是为了实现整个版本的commit的合并 (可执行 conventional-changelog --help 查看详情参数解释)
如图就能查看该版本所包含的所有提交以及所有代码更新了
tagUpdate.js 脚本 —— 自动打tag
const fs = require('fs')
const { exec } = require('child_process')
const version = process.argv[2] || JSON.parse(fs.readFileSync('./package.json')).version
const message = process.argv[3] || `Release ${version}`
if (!version) {
console.log('Please provide a version number.')
process.exit(1)
}
// 执行Git命令创建并推送Tag
exec(`git tag -a v${version} -m "${message}" && git push origin v${version}`, (error, stdout, stderr) => {
if (error) {
console.error(`Exec error: ${error}`)
process.exit(1)
}
console.log(`Git tag v${version} created and pushed successfully.`)
})
规范代码格式 —— 使用stylelint与prettier实现代码校验,并且在代码提交时利用lint-staged工具实现自动检查代码并修复
- 安装stylelint
其中 stylelint-config-prettier与 stylelint-config-standard 为推荐的stylelint的推荐配置参数
stylelint-order 则是为了实现css按指定顺序排列所需的插件
指定版本是为了适配node 10.13.0 版本,大家可以看着自己公司node版本动态适配
npm install stylelint@13.13.1 --save-dev
npm install stylelint-config-prettier@8.0.2 --save-dev
npm install stylelint-config-standard@22.0.0 --save-dev
npm install stylelint-order@5.0.0 --save-dev
- 安装prettier
npm 安装完后在eslintrc.js 中的extends数组中新增一项 prettier即可
npm install prettier --save-dev
但如果你是像我一样在使用脚手架构建项目时已经选择了prettier的话,vuecli就已经会自动帮我们引入了prettier
- 在根目录新建.stylelintrc 与 .prettierrc 文件
本人配置:github.com/Raj6666/vue…
配置列表:stylelint.cn/user-guide/…
本人配置:github.com/Raj6666/vue…
prettier官网:prettier.io/docs/en/opt…
官网译文:blog.csdn.net/weixin_3077…
配置参考:www.jianshu.com/p/a2d7dad64…
4.安装lint-staged工具并配置脚本
npm install lint-staged@8.1.5 --save-dev
在 package.json 中配置脚本 在lint-staged的配置中,我们定义对各种文件进行格式化校验与自动修复,修复完若通过校验则git add提交到本地仓库
- 对.js与vue.文件使用prettier
- 对.scss与.css文件还有.vue文件中的样式使用stylelint
然后lint-staged的这一系列操作,都通过在husky的pre-commit钩子函数中自动执行,也就是在用户commit提交代码之前,都执行一遍这对代码的自动校验与修复
"lint-staged": {
"*.md": [
"git add"
],
"*.js": [
"prettier --config .prettierrc --write",
"eslint --fix src/**/*.js --quiet",
"git add"
],
"*.vue": [
"prettier --config .prettierrc --write",
"stylelint --fix src/**/*.vue --quiet",
"eslint --fix src/**/*.vue --quiet",
"git add"
],
"src/**/*.(scss|css)": [
"stylelint src/**/*.(scss|css) --fix",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}