【Vue工程】003-配置 husky、lint-staged、@commitlint/cli

【Vue工程】003-配置 husky、lint-staged、@commitlint/cli

一、概述

1、husky

husky 的读音为 /ˈhʌski/

Husky 是一个 Git Hook 工具，可以帮助我们在 Git 事件发生时自动运行脚本。Git Hook 是一种机制，它允许在 Git 执行操作时自动运行特定脚本，以执行自定义操作。

使用 Husky，可以轻松地添加 Git Hooks，并在特定的 Git 事件（如提交代码）发生时执行自定义的脚本。例如，在提交代码之前自动运行代码格式化脚本或运行代码静态分析工具等。

Husky 支持多种 Git Hooks，包括 pre-commit、pre-push 等，并可以配置多个钩子，以便在多个 Git 事件发生时执行自定义脚本。

Husky 是一个基于 Node.js 的工具，可以在 Node.js 项目中使用。

2、lint-staged

lint-staged 的读音为 /lɪnt steɪdʒd/。

lint-staged 是一个工具，可以在 Git 暂存区的文件上运行指定的 lint 工具，以便于仅在需要时执行 lint 检查。它通常与 Husky 配合使用，以在提交代码前运行 lint-staged。使用 lint-staged 可以大大提高 lint 检查的效率，因为只需要针对本次提交的文件执行 lint 检查，而不是所有的文件。

lint-staged 支持多种 lint 工具，例如 ESLint、Prettier、Stylelint 等，并可以配置多个 lint 工具。它还支持使用 glob 模式来选择要运行 lint 工具的文件。

lint-staged 是一个基于 Node.js 的工具，可以在 Node.js 项目中使用。

3、@commitlint/cli

@commitlint/cli 的读音为 /kəˈmɪtlɪnt kli/。

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

@commitlint/cli 遵循 Conventional Commits 规范，可以自定义配置校验规则。它支持多种校验规则，例如校验提交信息的类型、描述和主体等，并可以在不同的提交阶段执行不同的校验规则。例如，在提交代码前只检查代码格式和 lint 检查，而在合并代码时进行更全面的提交信息校验。

@commitlint/cli 是一个基于 Node.js 的工具，可以在 Node.js 项目中使用。

二、安装与配置

1、安装依赖

pnpm add husky -D
pnpm add lint-staged -D
pnpm add @commitlint/cli @commitlint/config-conventional -D

2、在项目根目录创建 .husky 目录

3、运行脚本

脚本

// 生成 .husky 的文件夹
npx husky install

// 添加 hooks，会在 .husky 目录下生成一个 pre-commit 脚本文件
npx husky add .husky/pre-commit "npx --no-install lint-staged"

// 添加 commit-msg
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

生成的文件 pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install lint-staged

生成的文件 commit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

4、在 package.json 中根结构新增 lint-staged 配置

"lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{scss,less,css,html,md}": [
      "prettier --write"
    ],
    "package.json": [
      "prettier --write"
    ],
    "{!(package)*.json,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ]
},

5、在项目根目录新建 commitlint.config.cjs

配置

提示：由于 package.json 的 “type”: “module”，需将 commonjs 文件显示声明为 .cjs

module.exports = {
  extends: ['@commitlint/config-conventional'],
};

提交格式

git commit -m <type>[optional scope]: <description> // 注意冒号后面有空格
- type：提交的类型（如新增、修改、更新等）
- optional scope：涉及的模块，可选
- description：任务描述

type 类型

类别	含义
feat	新功能
fix	修复 bug
style	样式修改（UI校验）
docs	文档更新
refactor	重构代码(既没有新增功能，也没有修复 bug)
perf	优化相关，比如提升性能、体验
test	增加测试，包括单元测试、集成测试等
build	构建系统或外部依赖项的更改
ci	自动化流程配置或脚本修改
revert	回退某个 commit 提交

6、示范（非规范提交，将提交失败）

git commit -m 'feat: 增加 xxx 功能'
git commit -m 'bug: 修复 xxx 功能'

三、vscode 保存自动格式化

在 .vscode 目录下新建 settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}