前端代码提交规范-vue

前言

为什么我们要规范提交

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

  git规范简介

  一. 修改类型

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

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

  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

  2. 安装 husky

     yarn 安装yarn add husky  -Dor npm 安装npm install husky -D

  3. 添加 husky 脚本

     在 package.json 文件 scripts 中手动添加

     "prepare": "husky install"

     或者直接执行命令添加

     npm set-script prepare "husky install"

     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 "
     二、commitlint
     ")/_/husky.sh"pnpm exec lint-staged或 pnpm run format# 当然也可以配合 prettier pretty-quick 这个两个插件来做代码格式化的修复，不需要可不用# pnpm exec pretty-quick --staged

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

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

  1. commitlint 是什么

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

  2. 安装

     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],  },}

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

     {“scripts”: {“commitlint”: “commitlint --config commitlint.config.cjs -e -V”},}

  4. package.json 中配置scripts

     npx husky add .husky/commit-msg

  5. 配置 husky

     #!/usr/bin/env sh. “$(dirname – “
     规范汇总
     ”)/_/husky.sh”pnpm commitlint或 npx --no-install commitlint --edit ""

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