前端代码提交规范-vue_前端代码规范

前言

为什么我们要规范提交

• git提交时每个开发者提交信息不统一，更有甚者提交信息为魔法数字
• 提交统一的、有规则的信息；更容易看懂是什么意思，文件更改了什么
• 可以提供更加明朗的历史信息，便于后续快速定位问题、代码回滚等的操作
• 可以自动化生成changelog

git规范简介

一. 修改类型
每个类型值都表示了不同的含义，类型值必须是以下的其中一个：

feat：提交新功能
fix：修复了bug
docs：只修改了文档
style：调整代码格式，未修改代码逻辑（比如修改空格、格式化、缺少分号等）
refactor：代码重构，既没修复bug也没有添加新功能
perf：性能优化，提高性能的代码更改
test：添加或修改代码测试
chore：对构建流程或辅助工具和依赖库（如文档生成等）的更改
1
2
3
4
5
6
7
8

vue配置

一、husky

husky 是一个 Git-Hooks 工具. 那么 hooks 是什么呢 ？

“hooks” 直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：系统运行到某一时期时，会调用被注册到该时机的回调函数。

规范化提交第一步就是要在 git commit之前先做一次Lint校验，限制不规范代码的提交，那 husky 这个工具就能做到。husky 继承了Git下所有的钩子，在触发pre-commit钩子的时候，阻止不合法的 commit、push 等等。

1. 初始化 git 目录
   如果没有先初始化 git， 需要重新装husky。

   git init -y
   1

2. 安装 husky

   yarn 安装
   yarn add husky  -D
   
   or npm 安装
   npm install husky -D
   1
   2
   3
   4
   5

3. 添加 husky 脚本
   在 package.json 文件 scripts 中手动添加

   "prepare": "husky install"
   1

   或者直接执行命令添加

   npm set-script prepare "husky install"
   1

   prepare 脚本会在npm install（不带参数）之后自动执行。也就是说当我们执行npm install安装完项目依赖后会执行 husky install命令，该命令会创建.husky/目录并指定该目录为git hooks所在的目录。

4. 执行 npm run prepare
   执行之后会发现项目根目录多了个.husky的目录及文件。
   在该目录下添加 pre-commit 和 commit-msg 文件。

5. 在.husky/pre-commit文件添加如下命令：

   #!/bin/sh
   . "$(dirname "$0")/_/husky.sh"
   
   pnpm exec lint-staged
   或 pnpm run format
   
   # 当然也可以配合 prettier pretty-quick 这个两个插件来做代码格式化的修复，不需要可不用
   # pnpm exec pretty-quick --staged
   1
   2
   3
   4
   5
   6
   7
   8

   这样在使用 git commit 之前，会先执行 ./.husky/pre-commit 下的脚本，实现提交前的拦截修复

二、commitlint

1. commitlint 是什么
   对于我们的commit信息，也是有统一规范的，不能随便写,要让每个人都按照统一的标准来执行，我们可以利用commitlint来实现。

2. 安装

   pnpm add @commitlint/config-conventional @commitlint/cli -D
   1

3. 新建 commitlint.config.cjs 然后添加下面的代码：

   module.exports = {
     extends: ['@commitlint/config-conventional'],
     // 校验规则
     rules: {
       'type-enum': [
         2,
         'always',
         [
           'feat',
           'fix',
           'docs',
           'style',
           'refactor',
           'perf',
           'test',
           'chore',
           'revert',
           'build',
         ],
       ],
       '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],
     },
   }
   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30

4. package.json 中配置scripts

   {
   	“scripts”: {
   	“commitlint”: “commitlint --config commitlint.config.cjs -e -V”
   	},
   }
   1
   2
   3
   4
   5

5. 配置 husky

   npx husky add .husky/commit-msg
   1

6. 在生成的commit-msg文件中添加下面的命令

   #!/usr/bin/env sh
   . “$(dirname – “$0”)/_/husky.sh”
   pnpm commitlint
   或 npx --no-install commitlint --edit "$1"
   1
   2
   3
   4

规范汇总