集成 Git Hooks

# 什么是 Git Hooks

Git 钩子（Git Hooks）是一种在 Git 事件发生时触发自定义脚本的机制。这允许开发者在特定的 Git 操作前后执行自定义的脚本或命令，从而实现自动化、验证和其他操作。Git 钩子可以分为客户端钩子和服务器端钩子。

# 插件作用说明

# husky

husky 是一个 Git 钩子（Git Hooks）工具，它允许你在 Git 事件发生时运行预定义的脚本。主要用途是在开发过程中强制执行一些操作，如代码检查、单元测试等，以确保提交的代码符合规范和质量要求。

# lint-staged

lint-staged 是一个用于在 Git 存储库中运行预提交（pre-commit）代码检查的工具。它通常与 Git 钩子一起使用，特别是 pre-commit 钩子，以在每次提交前运行指定的代码检查工具，确保即将提交的代码符合项目的代码质量标准。

# imagemin-lint-staged

imagemin-lint-staged 的典型场景是在前端项目中，特别是对于包含大量图片资源的项目。通过在提交前自动优化图片，可以减小项目的体积，提高页面加载性能。

# prettier

Prettier 是一个广泛使用的代码格式化工具，用于自动调整代码的布局，以确保一致的风格和格式。与其他代码风格工具不同，Prettier 主张采用强制性的风格，而不是通过配置规则来实现。

# pretty-quick

pretty-quick 是一个用于在 Git 存储库中格式化（prettify）变更的文件的工具。它通常用于在提交之前自动格式化代码，确保代码库中的文件保持一致的代码风格。

prettier 和 pretty-quick 不一定非要同时使用。prettier 我是用来手动格式化代码的；pretty-quick 是在 git 提交之前自动格式化代码。

# ESlint

ESLint 是一个 JavaScript 代码静态分析工具，用于发现和自动修复代码中的潜在问题，以确保代码的质量和一致性。它是一种在开发过程中帮助开发者遵循最佳实践、提高代码质量的工具。

# stylelint

stylelint 是一个用于检测样式表（CSS、SCSS、Less 等）中潜在问题和不规范写法的工具。它提供了一种自动化的方式来强制执行项目中的样式表规范，帮助开发团队保持一致的代码风格，减少错误和提高代码的可读性。

# commitlint

如果想要自己手动填写需要先了解以下 约定式提交
commitlint 是一个用于规范化 Git 提交消息的工具，旨在确保团队成员提交的消息符合一致的规范。通过使用 commitlint，可以强制执行一致的提交消息格式，有助于提高代码库的可读性、可维护性和协作性。

# cz-customizable (不需要记忆关键词)

cz-customizable 是一个交互式的命令行界面（CLI）工具，用于生成符合规范的提交消息。它允许用户通过配置来自定义提交消息的格式和内容。

# commitlint-config-cz (可以大大提升编写 commit message 的规范性)

commitlint-config-cz 是一个 commitlint 的配置插件，它基于 cz-customizable 提供的交互式命令行界面（CLI）来帮助用户生成规范的提交消息。这个配置插件实现了一种特定的提交消息格式，通常是符合约定式提交规范的格式。

# commitlint-config-git-commit-emoji (美化 commit message 内容)

git-emoji-guide 也具备相似的功能，不过我用的是 commitlint-config-git-commit-emoji。

commitlint-config-git-commit-emoji 是一个 commitlint 的配置插件，它定义了一套提交消息规范，其中包含了 Git 提交时常用的 emoji 表情。这个配置插件可用于强制执行一种基于 emoji 的提交消息格式。

# 构建本地 Git Hooks 步骤

# 安装 husky

执行命令 npx husky-init ，之后你可在 package.json 文件中 script 部分看到 "prepare": "husky install"

# 安装 lint-staged

执行命令 npm install -D lint-staged imagemin-lint-staged

# 安装 pretty-quick

执行命令 npm install -D prettier pretty-quick

git 提交前只会执行 pretty-quick 的配置。 prettier 的配置需要手动触发。

# 安装 ESlint

执行命令 npm init @eslint/config

# 安装 stylelint

执行命令 npm install -D stylelint

# 安装 commitlint

执行命令 npm install -D commitlint cz-customizable commitlint-config-cz commitlint-config-git-commit-emoji

至此，需要的依赖包基本安装完毕。接下来进行相关的配置。

# 相关配置

# husky 的命令配置

# 配置 pre-commit, 主要是在 commit 前触发自定义脚本

使用命令 npx husky add .husky/pre-commit "npx lint-staged" 向 husky 中注册 pre-commit 命令，并且会在会在 .husky 文件夹下有相关配置信息。

# 配置 commit message, 主要是在 commit 前触发校验 commit 中内容脚本

使用命令 npx husky add .husky/commit-msg 'npx --no --commitlint --edit ${1}' 向 husky 中注册校验 commit 内容格式脚本。

# 配置文件

# lint-staged 相关的配置

根目录创建一个 .lintstagedrc.json 用于编写 lint-staged 要执行的操作（代码规范、代码检查、代码格式化、图像压缩等脚本）

{

  "**/*.{js, jsx, ts, tsx, vue, json, md}": "eslint",

  "**/*": "pretty-quick --staged --verbose --ignore-path .gitignore",

  "**/*.css": "stylelint",

  "**/*.scss": "stylelint --syntax=scss",

  "src/static/images/*.{png,jpeg,jpg,gif,svg}": "imagemin-lint-staged"

}

或者写在 package.json 文件中

"lint-staged": {

 "**/*": "pretty-quick --staged --verbose --ignore-path .gitignore",

 "**/*.css": "stylelint",

 "*.{png,jpeg,jpg,gif,svg}": [

   "imagemin-lint-staged"

 ]

},

# prettier 命令的配置

在 package.json 文件中的 script 中添加以下命令，单独执行即可。

"format": "prettier --write src/",

# Commitlint 相关的配置

用于配置 Commitlint，这是一个用于规范化 Git 提交消息的工具。通过提供一个配置文件，你可以定义一组规则，以确保提交消息符合特定的规范。

module.exports = {

    // 问答方式，有提示信息，有 icon, 推送也有 icon

    extends: ['git-commit-emoji', 'cz']

}

"script": {

      "commit": "git add . && cz-customizable && git push"

}

"config": {

  "commitizen": {

    "path": "@commitlint/cz-commitlint"

  }

}

# Eslint 相关的配置

ESLint 配置文件的一种格式，采用 CommonJS 模块的形式。这个文件通常用于定义 JavaScript 代码的静态分析规则，以确保代码的质量和一致性。

/* eslint-env node */

require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {

  root: true,

  'extends': [

    'plugin:vue/vue3-essential',

    'eslint:recommended',

    '@vue/eslint-config-prettier/skip-formatting'

  ],

  parserOptions: {

    ecmaVersion: 'latest'

  }

}

# stylelint 相关的配置

用于配置 stylelint 的 JSON 格式配置文件。Stylelint 是一个用于检测样式表（如 CSS 和 Sass）中潜在问题和不规范写法的工具。通过提供一个配置文件，你可以定义一组规则，以确保你的样式表符合特定的规范。

{ "extends": ["stylelint-config-standard"] }

# prettier 相关的配置

用于配置 Prettier，这是一个用于格式化代码的工具。通过提供这个配置文件，你可以定义代码的格式化规则，以确保整个项目中的代码风格保持一致。

{

  "$schema": "https://json.schemastore.org/prettierrc", // 用于指定 JSON 文件的模式（Schema），JSON Schema 是一种用于描述 JSON 文档结构、内容和值的规范。

  "semi": false, // 不使用分号结尾

  "tabWidth": 2, //  使用 2 个空格缩进

  "singleQuote": true, // 使用单引号而不是双引号

  "printWidth": 100, // 将代码换行的宽度限制为 100 个字符

  "trailingComma": "none" // 不使用尾随逗号

}

# cz-config 相关的配置

.cz-config.js 文件用于配置 commitizen 工具，它是一个用于生成符合规范的交互式提交消息的工具。通过提供这个配置文件，你可以定义提交消息的交互式提示、选项以及生成规范化的提交消息。
Commitizen 通常与规范性提交（Conventional Commits）一起使用，以确保提交消息遵循特定的格式和约定。这有助于提高代码库的可读性、协作性，同时支持语义化版本控制（Semantic Versioning，SemVer）。

module.exports = {

    types: [

        {

            value: ":sparkles: feat",

            name: "✨  feat:     新功能",

        },

        {

            value: ":bug: fix",

            name: "🐛 fix:      修复Bug",

        },

        {

            value: ":pencil2: docs",

            name: "✏️ docs:     文档变更",

        },

        {

            value: ":lipstick: style",

            name: "💎 style:    代码的样式美化",

        },

        {

            value: ":recycle: refactor",

            name: "♻️ refactor: 代码重构",

        },

        {

            value: ":zap: perf",

            name: "⚡️ perf:     性能优化",

        },

        {

            value: ":white_check_mark: test",

            name: "🚨 test:     测试",

        },

        {

            value: ":package: build",

            name: "📦️build:    构建",

        },

        {

            value: ":construction_worker: ci",

            name: "👷 ci:       集成",

        },

        {

            value: ":tada: release",

            name: "🎉 release:  发布正式版",

        },

        {

            value: ":rewind: revert",

            name: "⏪️ revert:   回退上一个版本",

        },

        {

            value: ":rocket: chore",

            name: "🚀 chore:    构建/工程依赖/工具",

        },

        {

            value: ":bookmark: tag",

            name: "🔖 tag:      打标签",

        },

        {

            value: ":rocket: init",

            name: "🚀 init:     初始化项目",

        },

    ],

    messages: {

        type: "请选择提交类型(必填)",

        customScope: "请输入文件修改范围(可选)",

        subject: "请简要描述提交(必填)",

        body: "请输入详细描述(可选)",

        breaking: "列出任何BREAKING CHANGES(可选)",

        footer: "请输入要关闭的issue(可选)",

        confirmCommit: "确定提交此说明吗？",

    },

    allowCustomScopes: true,

    // 跳过问题

    skipQuestions: ["body", "footer"],

    subjectLimit: 72,

};

# Git Hooks 测试

可以使用命令 npm run commit 或者 git cz 就成功了。

# 触发流程 (个人感知)

1. npm run commit 或者 git cz . git cz 是 cz-customizable 提供的命令，用于生成规范的交互式提交消息；
2. cz-customizable 交互式界面
   显示交互式界面，引导开发者填写规范的提交消息。填写完毕后，cz-customizable 根据用户在交互式界面中的输入生成规范的提交消息。
3. Husky 钩子触发
   • 如果在 Husky 钩子中配置了 pre-commit 钩子，它会在每次提交前触发（触发时间：git commit 之后，但在实际提交之前）。
     • Lint-Staged 钩子触发
       • lint-staged 会检查暂存区中的文件，执行相关的任务，如检查语法（ESlint、Stylelint）、格式化代码（Stylelint、pretty-quick）、优化图片等。
       • 那部分有问题，就会有相应的提示。
   • 如果在 Husky 钩子中配置了 commit-msg 钩子，它会在提交消息准备阶段触发（在 Git 准备提交消息的阶段触发，即在你编辑完提交消息后，但在真正执行提交之前）。
     • Commitlint 钩子触发
       • Commitlint 根据配置的规范（可能包括 commitlint-config-cz 或 commitlint-config-git-commit-emoji）来检查提交消息是否符合预定义的规范。
       • 如果提交消息不符合规范，Commitlint 可能会中止提交过程，提示开发者修复提交消息。
       • 如果通过了 Commitlint 的检查，Husky 钩子触发。
4. 提交代码
   如果前面的步骤都通过了，生成的规范提交消息和规范后的代码将会被提交。

# 异常处理办法

1. 如果遇到 ESlint 提示 module 问题

就让 ESlint 忽略就行了

2. 执行命令 git commit -m "xxx" 如果遇到问题 _prettier.resolveConfig.sync is not a function 。

解决办法：把 prettier 版本调整为 2.8.8 "prettier": "^2.8.8", 若还是不行，就使用命令 git config --global core.autocrlf false` 处理.

3. Vue3 拉取项目后 npm i 的时候报错 Could not resolve dependency: npm ERR!

问题 1： @vue/eslint-config-prettier 要求使用 prettier>=3.0.0 , 但是 [email protected] 遇到问题 _prettier.resolveConfig.sync is not a function 。
此时，使用命令 npm i --legacy-peer-deps 进行获取依赖包即可。暂时没有发现什么不正常的情况。

4. 协作开发时，拉取代码更新依赖后， 提交代码时出现问题 imagemin-lint-staged: Error: spawn E:\xxxx\xxx\xxx\node_modules\optipng-bin\vendor\optipng.exe ENOENT

解决办法：执行命令 npm install --save optipng-bin ，之后再去提交代码即可，也可以适当多尝试 npm i 几次试试。

5. 在 npm i 的时候经常出现 错误如下：

   • jpegtran pre-build test failed

   1. 可以多次重复 npm i
   2. 可以针对 jpegtran 进行下载

   • gifsicle pre-build test failed

   1. 可以多次重复 npm i
   2. 可以针对 gifsicle 进行下载

6. 还有一个非常严重的问题，就是当 commit 失败时，会删除我开发的文件。异常提示如下：

# 报错提示（目前只截取了这些）

[STARTED] Cleaning up temporary files...

[SKIPPED]

  ✖ lint-staged failed due to a git error.

  ✖ lint-staged failed due to a git error.

  Any lost modifications can be restored from a git stash:

    > git stash list

    stash@{0}: automatic lint-staged backup

    > git stash apply --index stash@{0}

其实是把新开发的文件转存到 git 的 stash 中了。取出来即可。

7. 有一些比较特别的问题比如版本不兼容。

可以删除 package-lock.json 文件 和 node-modules 文件夹，然后重新获取依赖。或者
npm install --legacy-peer-deps

如果有其他问题，就回去找 GitHooksDemo