代码提交校验及提交规范的实践方案

代码提交校验

前言

在项目管理中，设置代码提交检查是一个至关重要的环节，其目的在于确保代码质量、提高团队协作效率、预防错误和漏洞，减少潜在的风险。为此我们可以借助一些工具链帮助我们实现自动化代码检查、格式化以及提交校验等。

工具及功能

下面是前端常见的工具及对应功能

工具	功能	代表工具
代码质量检查	提前发现潜在问题和语法错误	ESLint
代码格式化	统一代码风格，避免格式争议	Prettier
自动化校验	提交前检查代码是否符合规范	Husky、lint-staged
开发体验优化	提供即时反馈，保存时自动修复问题	VS Code 插件

对于代码的质量检查和格式化相比大家都比较熟悉，这里只介绍代码的自动化校验。

Husky和lint-staged介绍

在前端开发中，Husky和lint-staged是两个非常重要的工具，它们通常被一起使用来确保代码的质量和一致性。

Husky

Husky是一个Git Hook工具，它允许开发者在Git命令执行前后运行自定义脚本。通过Husky，开发者可以轻松地添加Git Hooks，并在特定的Git事件（如提交代码）发生时执行自定义的脚本。

lint-staged

lint-staged是一个在Git暂存文件上运行linters的工具。它可以在提交代码之前确保代码质量，避免不符合规范的代码进入代码库。lint-staged只关注改动的文件，提高lint速度，并防止不符合代码规范的代码提交到仓库。

配置Husky和lint-staged

安装依赖

npm install husky lint-staged @commitlint/cli @commitlint/config-conventional -D

安装完成后在package.json中可以查看安装的版本，这里安装的@commitlint/cli @commitlint/config-conventional 后面会用到，在后面会进行解释。

husky初始化

npx husky init

初始化完成后会生成一个.husky文件，同时在文件的下面有一个pre-commit文件，初始化的内容是npm test，这里的pre-commit文件是husky提供的一个定义 git 钩子的文件，这些钩子会在执行git commit命令时自动运行。

删除原来的 npm test ，同时添加 npx lint-staged ，这是为了在git commit 的时候运行 lint-staged，所以接下来配置 lint-staged。

配置lint-staged

在package.json文件中进行如下的配置

js 复制代码

{
  "script": {
    "prepare": "husky",
    "lint-staged": "lint-staged",
  },
  "lint-staged": {  
    "*.{js,jsx,ts,tsx,vue}": ["eslint --fix", "prettier --write"],
    "*.css": ["stylelint --fix"], 
    "*.md": ["prettier --write"]
  }
}

上述的配置实现了针对不同文件类型运行不同的工具：

eslint --fix：自动修复 ESLint 能处理的问题。
prettier --write：自动格式化代码。
stylelint --fix（可选）：处理 CSS 样式问题。

解释：这里需要解释下 prepare，prepare 是 NPM 的一个特殊生命周期脚本，它会在以下场景自动执行：1. 安装依赖时（运行 npm install）。2.发布包时（运行 npm publish）。如果不添加 prepare 脚本，团队中的其他开发者在拉取代码后，需要手动运行 npx husky install 才能激活 Husky 钩子。通过 prepare，可以省略这一步。

代码提交测试

在user文件下新建一个vue文件，并写一段错误的代码，并提交到仓库，这个时候会校验提交不通过，如下：

删除错误代码，再次提交，显示提交成功。

代码提交规范

前言

在代码的提交过程中怎么保证代码提交的规范性，比如这样的代码提交 git commit -m 'update',明显不符合规范，其他的开发者并不知道提交的信息是更新那部分内容。这个时候可以借助@commitlint/cli 和 @commitlint/config-conventional对提交的内容描述进行一些限制。让提交更加规范。

@commitlint/cli 和 @commitlint/config-conventional介绍

@commitlint/cli

@commitlint/cli 用于校验 Git 提交信息是否符合规范。它通常与 Husky（一个 Git Hook 工具）和 lint-staged（一个在 Git 暂存区的文件上运行指定的 lint 工具）配合使用，以在提交代码前对提交信息进行校验，从而确保提交信息的格式和内容符合项目规范和约定。

@commitlint/config-conventional

@commitlint/config-conventional提供了一种标准化的提交规范。当使用 @commitlint/cli 进行提交信息校验时，可以引用此配置文件来确保提交信息符合既定的规范。包含了常见的提交类型，如 feat（新功能）、fix（修复 bug）、docs（文档修改）等，以及对应的描述和格式要求。

项目中的配置

第一步：在项目根目录下新建一个.commitlintrc.cjs文件，并添加以下内容。

js 复制代码

// https://www.npmjs.com/package/@commitlint/config-conventional
// [
//   'build',
//   'chore',
//   'ci',
//   'docs',
//   'feat',
//   'fix',
//   'perf',
//   'refactor',
//   'revert',
//   'style',
//   'test'
// ];
module.exports = {
  extends: ['@commitlint/config-conventional']
};

第二步：在 .husky 的目录下创建一个 commit-msg 文件，在文件中添加以下内容： npx --no -- commitlint --edit ${1}

代码提交测试

配置完成后还是刚才的文件，执行命令 git commit -m 'update'的时候就会提示添加的提交信息不规范。

使用 git commit -m 'test: 提交测试'的格式提交成功(值得注意的是:后面有一个空格)

代码提交校验及提交规范的实践方案