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.
3.5 KiB
3.5 KiB
Commitlint 提交信息校验
我们在使用 git commit 时，git 会记录每一次的 commit message（提交信息）。
正确的描述 commit message 在多人协同开发一个项目时，显得尤其重要。
这里我们可以看一下 angular 的 commit message，会发现它的描述特别的清晰明了。
而 commitlint 就是对 commit message 进行的检查的一个工具，当不规范时会终止提交。
- 安装依赖
-
@commitlint/cli- Commitlint 本体 -
@commitlint/config-conventional- 通用的提交规范
pnpm add @commitlint/cli @commitlint/config-conventional -D
- 创建 commitlint 配置
在根目录添加一个 .commitlintrc.js 文件，内容如下：
module.exports = {
extends: ['@commitlint/config-conventional']
}
- 在 git
commit-msg时进行检查
执行下面这条命令即可：
pnpm husky add .husky/commit-msg "pnpm commitlint --edit $1"
Commit Message 格式
配置完成之后就可以在每次 git commit 时对 commit message 进行校验了，规范有两种格式：单行信息和多行信息。
- 单行信息
用于业务代码提交时使用，业务代码一般来说更改比较多而且无法具体说明其信息，具体的还需要看产品文档，所以用单行信息即可。
<type>(<scope>): <subject>
- 多行信息
用于提交一些不经常更改的功能型代码时使用，如：某个功能函数的新增、修改或重构，目录结构的调整（工程化调整），架构的更改等，这些我们需要进行详细说明防止出现遗忘。
<type>(<scope>): <subject>
<BLANK LINE> // 空行
<body>
<BLANK LINE>
<footer>
字段描述：
type类型scope影响的范围, 比如: *（全局），route, component, utils, build，readme，css 等，subject概述, 建议符合 50/72 formattingbody具体修改内容，描述为什么修改, 做了什么样的修改, 以及开发的思路等等，可以分为多行, 建议符合 50/72 formattingfooter一些备注, 通常是 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 文件了解详情。