git提交前修改文件校验

git提交前修改文件校验

一、应用场景

当在项目中因为开发工具和本地格式化工具使用不一致,如果修改的同一个文件，总是会有代码冲突，严重影响了工作效率,导致合并时花费太多时间；现在想办法在提交前进行代码格式化和文件校验确保提交代码格式一致，语法一致。

二、安装husy并初始化，添加监听commit命令时的工具

husky工具是对git执行的一些命令，通过对应的hooks钩子触发，执行自定义的脚本程序

1. 执行命令安装husky钩子工具 yarn add husky -D;
2. 执行npm pkg set scripts.prepare="npx husky install"命令;

这条命令其实就是在package.json文件的scripts对象下添加一个名为prepare的npm脚本 注意：此命令总会是在npm install或者yarn install执行成功后执行一遍 在新版本中简化了操作只需要npx husky init执行命令就会在scripts中添加prepare钩子命令

npm 钩子命令介绍

npm 钩子命令允许在项目的生命周期中插入自定义脚本，通过在 package.json 中配置这些钩子，可以在特定的执行阶段运行用户定义的命令。

npm 钩子命令列表

钩子名称	执行时机	命令解释	执行阶段
preinstall	在运行 npm install 之前	在安装依赖之前执行的脚本，通常用于检查环境或清理旧文件	安装阶段
install	在运行 npm install 时	在安装依赖的过程中执行的脚本	安装阶段
postinstall	在运行 npm install 完成后	在安装依赖完成后执行的脚本，常用于生成文件或运行初始化脚本	安装阶段
prepublish	在运行 npm publish 之前	在发布包之前执行的脚本，通常用于构建或测试	发布阶段
prepare	在运行 npm publish 或 npm install 之后（仅在本地安装时）	类似于 prepublish，但适用于本地和全局安装	发布阶段、安装阶段
prepublishOnly	在运行 npm publish 之前（仅在 npm publish 时触发）	在发布包之前执行的脚本，仅在 npm publish 时触发	发布阶段
publish	在运行 npm publish 时	在发布包的过程中执行的脚本	发布阶段
postpublish	在运行 npm publish 完成后	在发布包完成后执行的脚本	发布阶段
preversion	在运行 npm version 之前	在更新版本号之前执行的脚本	版本更新阶段
version	在运行 npm version 时	在更新版本号的过程中执行的脚本	版本更新阶段
postversion	在运行 npm version 完成后	在更新版本号完成后执行的脚本，常用于提交版本更新到版本控制系统	版本更新阶段
prestart	在运行 npm start 之前	在启动应用之前执行的脚本	运行阶段
start	在运行 npm start 时	启动应用的脚本	运行阶段
poststart	在运行 npm start 完成后	在启动应用完成后执行的脚本	运行阶段
pretest	在运行 npm test 之前	在运行测试之前执行的脚本，通常用于构建或清理	测试阶段
test	在运行 npm test 时	运行测试的脚本	测试阶段
posttest	在运行 npm test 完成后	在运行测试完成后执行的脚本	测试阶段
prestop	在运行 npm stop 之前	在停止应用之前执行的脚本	停止阶段
stop	在运行 npm stop 时	停止应用的脚本	停止阶段
poststop	在运行 npm stop 完成后	在停止应用完成后执行的脚本	停止阶段
preuninstall	在运行 npm uninstall 之前	在卸载包之前执行的脚本	卸载阶段
uninstall	在运行 npm uninstall 时	在卸载包的过程中执行的脚本	卸载阶段
postuninstall	在运行 npm uninstall 完成后	在卸载包完成后执行的脚本	卸载阶段
prebuild	在运行 npm run build 之前	在构建项目之前执行的脚本	构建阶段
build	在运行 npm run build 时	构建项目的脚本	构建阶段
postbuild	在运行 npm run build 完成后	在构建项目完成后执行的脚本	构建阶段

示例配置

在 package.json 中配置钩子脚本的示例：

{
  "scripts": {
    "preinstall": "echo 'Running preinstall script...'",
    "postinstall": "echo 'Running postinstall script...'",
    "prestart": "echo 'Running prestart script...'",
    "start": "node app.js",
    "poststart": "echo 'Running poststart script...'",
    "pretest": "echo 'Running pretest script...'",
    "test": "jest",
    "posttest": "echo 'Running posttest script...'"
  }
}

3. 执行yarn run prepare

执行本条命令以后，会创建一个.husky的文件夹;

4. 执行npx husky add .husky/pre-commit "npm run test"命令

执行此命令就是在.husky文件夹下添加名称为pre-commit的文件，并且在这个文件中添加npm run test命令

5. 当我们使用git的commit命令，husky会检测到你正执行，然后在执行git commit前执行pre-commit文件中的命令;

可以看到监测到了执行commit，然后在commit执行前执行了npm run test

二（一）、前置依赖包

1.安装eslint依赖包

yarn add eslint-plugin-vue@latest eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@latest eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest typescript-eslint@latest --save-dev

eslint.config.js配置文件示例如下，如果想初始化配置文件执行命令npm init @eslint/config@latest即可

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];

2.安装安装stylelint检查css、less等样式文件样式

yarn add --save-dev stylelint stylelint-config-standard-less stylelint-config-prettier

stylelint.config.js配置示例如下

module.exports = {
  defaultSeverity: 'error',
  extends: ['stylelint-config-prettier'],
  plugins: ['stylelint-less'],
};

3.安装格式美化工具 prettier

yarn add prettier --save-dev

.prettierrc.json配置示例如下：

{
    "$schema": "https://json.schemastore.org/prettierrc",
    "semi": false,
    "singleQuote": true,
    "printWidth": 100
  }

三、针对git项目中已修改文件进行校验和格式化

1. 执行yarn add lint-staged -D ,安装对已修改文件的校验的工具包lint-staged;
2. 在package.json文件中添加;对根目录下所有已修改的.vue和.js文件进行格式化和代码校验

"lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "prettier --write",
      "eslint --cache --fix --no-ignore"
    ],
    "*.{html,vue,vss,sass,less}": [
      "npm run stylelint:fix"
    ]
  }

在package.json文件的scripts下添加如下（用于样式校验）： "stylelint:fix": "stylelint --fix src/**/*.{html,vue,vss,sass,less}",

命令解释 eslint --cache --fix： --cache这个选项告诉 ESLint 只检查自上次检查以来发生更改的文件，而不是检查项目中的所有文件。这可以加速检查过程，因为 ESLint 只需要检查那些在上次检查后被修改的文件。 --fix这个选项告诉 ESLint 尝试自动修复它可以修复的错误。ESLint 是一个静态代码分析工具，它可以检测代码中的错误和不一致之处。通过使用 --fix 选项，你可以让 ESLint 自动修复一些可以修复的错误，从而减少手动修复的工作量。
命令解释 eslint --ext .vue,.js,jsx,.ts,.tsx --fix： --ext .vue,.js,jsx,.ts,.tsx这个选项告诉 ESLint 要检查哪些文件扩展名。在这里，它指定了 .vue、.js、.jsx、.ts 和 .tsx 这些扩展名的文件都应该被 ESLint 检查;

3. 把.husky文件夹下的pre-commit文件内容改为npx lint-staged
4. 故意在vue文件中添加一个非法变量，再次执行commit命令，可以看到命令中针对已修改文件进行语法校验和格式化；如果出现错误，commit将退出执行，直到文件修改正确并再次执行commit命令。

下面是执行错误的信息：

5. 添加commit信息校验

1） 执行如下命令安装相关辅助工具：yarn add -D @commitlint/cli @commitlint/config-angular

2） 添加对应钩子函数npx husky add .husky/commit-msg 'npx commitlint --edit $1'