Vue2.7 + Vite+ Eslint、Stylelint、Commitlint 统一开发规范
+ husky + lint-staged （git commit 时自动格式化代码）
+ Vue 全家桶集成
+ Axios 封装及接口管理
https://juejin.cn/post/7118700020911570974
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
3.5 KiB
96 lines
3.5 KiB
2 years ago
|
# Commitlint 提交信息校验
|
||
|
|
|
||
|
|
我们在使用 `git commit` 时，git 会记录每一次的 `commit message`（提交信息）。
|
||
|
|
|
||
|
|
正确的描述 `commit message` 在多人协同开发一个项目时，显得尤其重要。
|
||
|
|
|
||
|
|
这里我们可以看一下 `angular` 的 [`commit message`](https://github.com/angular/angular/commits/main)，会发现它的描述特别的清晰明了。
|
||
|
|
|
||
|
|
而 [`commitlint`](https://commitlint.js.org/#/) 就是对 `commit message` 进行的检查的一个工具，当不规范时会终止提交。
|
||
|
|
|
||
|
|
1. 安装依赖
|
||
|
|
|
||
|
|
- `@commitlint/cli`- Commitlint 本体
|
||
|
|
|
||
|
|
- `@commitlint/config-conventional`- 通用的提交规范
|
||
|
|
|
||
|
|
```bash
|
||
|
|
pnpm add @commitlint/cli @commitlint/config-conventional -D
|
||
|
|
```
|
||
|
|
|
||
|
|
1. 创建 commitlint 配置
|
||
|
|
|
||
|
|
在根目录添加一个 `.commitlintrc.js` 文件，内容如下：
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
module.exports = {
|
||
|
|
extends: ['@commitlint/config-conventional']
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
1. 在 git `commit-msg` 时进行检查
|
||
|
|
|
||
|
|
执行下面这条命令即可：
|
||
|
|
|
||
|
|
```bash
|
||
|
|
pnpm husky add .husky/commit-msg "pnpm commitlint --edit $1"
|
||
|
|
```
|
||
|
|
|
||
|
|
## Commit Message 格式
|
||
|
|
|
||
|
|
配置完成之后就可以在每次 `git commit` 时对 `commit message` 进行校验了，规范有两种格式：单行信息和多行信息。
|
||
|
|
|
||
|
|
1. 单行信息
|
||
|
|
|
||
|
|
用于业务代码提交时使用，业务代码一般来说更改比较多而且无法具体说明其信息，具体的还需要看产品文档，所以用单行信息即可。
|
||
|
|
|
||
|
|
```xml
|
||
|
|
<type>(<scope>): <subject>
|
||
|
|
```
|
||
|
|
|
||
|
|
1. 多行信息
|
||
|
|
|
||
|
|
用于提交一些不经常更改的功能型代码时使用，如：某个功能函数的新增、修改或重构，目录结构的调整（工程化调整），架构的更改等，这些我们需要进行详细说明防止出现遗忘。
|
||
|
|
|
||
|
|
```xml
|
||
|
|
<type>(<scope>): <subject>
|
||
|
|
<BLANK LINE> // 空行
|
||
|
|
<body>
|
||
|
|
<BLANK LINE>
|
||
|
|
<footer>
|
||
|
|
```
|
||
|
|
|
||
|
|
字段描述：
|
||
|
|
|
||
|
|
- `type` 类型
|
||
|
|
- `scope` 影响的范围, 比如: \*（全局），route, component, utils, build，readme，css 等，
|
||
|
|
- `subject` 概述, 建议符合 [50/72 formatting](https://link.zhihu.com/?target=https%3A//stackoverflow.com/questions/2290016/git-commit-messages-50-72-formatting)
|
||
|
|
- `body` 具体修改内容，描述为什么修改, 做了什么样的修改, 以及开发的思路等等，可以分为多行, 建议符合 [50/72 formatting](https://link.zhihu.com/?target=https%3A//stackoverflow.com/questions/2290016/git-commit-messages-50-72-formatting)
|
||
|
|
- `footer` 一些备注, 通常是 Breaking Changes（重要改动） 或 Closed Issues（修复 Bug 的链接）
|
||
|
|
|
||
|
|
`type` 类型有以下几种：
|
||
|
|
|
||
|
|
| 类型 | 描述 |
|
||
|
|
| :------- | :----------------------------------- |
|
||
|
|
| build | 发布版本 |
|
||
|
|
| chore | 改变构建流程、或者增加依赖库、工具等 |
|
||
|
|
| ci | 持续集成修改 |
|
||
|
|
| docs | 文档修改 |
|
||
|
|
| feat | 新特性 |
|
||
|
|
| fix | 修改问题 |
|
||
|
|
| perf | 优化相关，比如提升性能、体验 |
|
||
|
|
| refactor | 代码重构 |
|
||
|
|
| revert | 回滚到上一个版本 |
|
||
|
|
| style | 代码格式修改 |
|
||
|
|
| test | 测试用例修改 |
|
||
|
|
|
||
|
|
示例：
|
||
|
|
|
||
|
|
```
|
||
|
|
feat(eslint): 集成 eslint - xcder - 2022.07.01
|
||
|
|
|
||
|
|
1. Vscode 安装 Eslint 插件即可在保存时自动格式化
|
||
|
|
2. 运行 pnpm lint:eslint 可全局进行代码格式化
|
||
|
|
|
||
|
|
可以浏览 docs/1.工程化实践/1.eslint 文件了解详情。
|
||
|
|
```
|