git 提交前修改文件校验和commit提交规范

一、应用场景

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

二、初始化`eslint9`，进行代码质量检查

1.在现有vue3项目中执行yarn create @eslint/config 然后一步步根据自己需要选择对应配置会生成如下 eslint 的配置文件:

可以得到如下的 eslint 配置文件eslint.config.mjs

js 复制代码

import js from "@eslint/js";
import globals from "globals";
import pluginVue from "eslint-plugin-vue";
import json from "@eslint/json";
import css from "@eslint/css";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,vue}"],
    plugins: { js },
    extends: ["js/recommended"],
    languageOptions: { globals: { ...globals.browser, ...globals.node } },
  },
  pluginVue.configs["flat/essential"],
  {
    files: ["**/*.json"],
    plugins: { json },
    language: "json/json",
    extends: ["json/recommended"],
  },
  {
    files: ["**/*.css"],
    plugins: { css },
    language: "css/css",
    extends: ["css/recommended"],
  },
]);

这个安装只是让项目代码执行yarn dlx eslint app.vue 命令的时候才执行校验，但是我们需要的是在 VSCODE 软件中有校验提示，现在需要添加如下两个 VSCODE 插件：

如何才能让别人下载代码后也知道要安装这两个插件呢？按照红色序号操作后会多一个文件夹和文件.vscode\extensions.json 多出内容如下
json 复制代码
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "maggie.eslint-rules-zh-plugin"
  ]
}
当其他成员下载项目后，vscode 右下角会提示安装推荐组件

安装后在随便一个vue文件中添加如下代码：

js 复制代码

const a = 1;
a = 2;

因为使用const生命的常量是无法更改的，这是一种语法错误；如果添加如下代码后，a=2这行代码出现一行波浪红线并有对应错误提示，说明已经配置成功

至此我们完成了通用代码规范的规定，有问题代码就会出现标红的波浪线。

注意：如果没有生效重复一下几步：1.重新按照如上步骤初始化 eslint。2.重启 VSCODE

三、安装`prettier`，美化代码外观的一致性

执行yarn add --dev --exact prettier安装prettier,--exact表示安装指定版本，这样不会因为安装的时间的不同可能导致版本有细微差别。在项目根目录添加.prettierignore配置美化代码的时候忽略的文件

yaml 复制代码

dist
nginx
node_modules
public

在项目根目录添加.prettierrc

json 复制代码

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "rangeStart": 0,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "lf"
}

然后再配置VSCODE当保存时使用prettier格式化代码：直接Ctrl+Shift+P,在打开的弹窗上输入settings.json,选择首选项：打开工作区设置(JSON),把下面配置复制到打开的json文件中即可

json 复制代码

{
  // 针对特定语言的格式化配置（可选）
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 指定Prettier作为JS格式化工具
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 指定Prettier作为vue格式化工具
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 指定Prettier作为less格式化工具
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 指定Prettier作为css格式化工具
  },
  "eslint.validate": ["javascript", "vue"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always" //保存的时候总是使用eslint做代码校验
  },
  "editor.formatOnSave": true // 保存的时候自动格式化
}

这样当保存的时候，就会自动使用prettier进行格式化

和eslint集成需要安装eslint-config-prettier,执行命令yarn add -D eslint-config-prettier,eslint-config-prettier是为了解决eslint和prettier格式化的冲突问题，让prettier规则覆盖eslint的部分规则; 现在需要修改eslint.config.mjs文件如下：

diff 复制代码

import js from '@eslint/js';
import globals from 'globals';
import pluginVue from 'eslint-plugin-vue';
import json from '@eslint/json';
import css from '@eslint/css';
import { defineConfig } from 'eslint/config';
+ import prettier from 'eslint-config-prettier';

export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    plugins: { js },
    extends: ['js/recommended'],
    languageOptions: { globals: { ...globals.browser, ...globals.node } },
  },
  pluginVue.configs['flat/recommended'],
  { files: ['**/*.json'], plugins: { json }, language: 'json/json', extends: ['json/recommended'] },
  { files: ['**/*.css'], plugins: { css }, language: 'css/css', extends: ['css/recommended'] },
+  prettier, // 注意添加到最后一行
]);

安装eslint-plugin-import,主要用于检查和规范 ES6+ 的 import/export 语句，帮助你避免导入路径错误、未使用的导入、循环依赖等问题，同时优化导入语句的排序和格式。执行命令yarn add -D eslint-plugin-import,安装后修改eslint.config.mjs文件如下:

diff 复制代码

import js from '@eslint/js';
import globals from 'globals';
import pluginVue from 'eslint-plugin-vue';
import json from '@eslint/json';
import css from '@eslint/css';
import { defineConfig } from 'eslint/config';
import prettier from 'eslint-config-prettier';
+ import importPlugin from 'eslint-plugin-import';

export default defineConfig([
 importPlugin.flatConfigs.recommended,
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    plugins: { js },
    extends: ['js/recommended'],
    languageOptions: { globals: { ...globals.browser, ...globals.node } },
    rules: [
    ],
  },
  pluginVue.configs['flat/recommended'],
  { files: ['**/*.json'], plugins: { json }, language: 'json/json', extends: ['json/recommended'] },
  { files: ['**/*.css'], plugins: { css }, language: 'css/css', extends: ['css/recommended'] },
  prettier,
]);

配置完成后可以看到在这个文件中，有如下错误：

这是eslint的eslint-plugin-import插件报的错误，现在只需要把这些不必要的规则关闭即可:

diff 复制代码

import js from '@eslint/js';
import globals from 'globals';
import pluginVue from 'eslint-plugin-vue';
import json from '@eslint/json';
import css from '@eslint/css';
import { defineConfig } from 'eslint/config';
import prettier from 'eslint-config-prettier';
import importPlugin from 'eslint-plugin-import';

export default defineConfig([
  importPlugin.flatConfigs.recommended,
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    plugins: { js },
    extends: ['js/recommended'],
    languageOptions: { globals: { ...globals.browser, ...globals.node }, sourceType: 'module'
+    , ecmaVersion: 2022 // 允许最新语法
    },
    rules: {
+      'import/namespace': 'off',
+      'import/default': 'off',
+      'import/no-named-as-default': 'off',
+      'import/no-unresolved': 'off',
+      'import/no-named-as-default-member': 'off',
    },
  },
  pluginVue.configs['flat/recommended'],
  { files: ['**/*.json'], plugins: { json }, language: 'json/json', extends: ['json/recommended'] },
  { files: ['**/*.css'], plugins: { css }, language: 'css/css', extends: ['css/recommended'] },
  prettier,
]);

四、安装`lint-staged`，只对要提交的代码进行格式化和校验

执行yarn add lint-staged@13.1.4 -D,因为最新版本的lint-staged需要node>18所以目前选择使用 13 版本的

在package.json文件中添加配置;对根目录下所有已修改的.vue和.js等指定文件类型进行格式化和代码校验

json 复制代码

"lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --cache --fix --no-ignore",
      "prettier --write",
    ]
}

1.执行命令yarn add --dev husky

2.执行npx husky init

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

3.修改.husky\pre-commit下文件如下：

npm 复制代码

yarn lint-staged --allow-empty

5.当我们使用git的commit命令，husky会检测到你正执行，然后在执行 git commit 前执行pre-commit文件中的命令; 如果提交的有错误样式或者代码就会有如下错误提示，必须解决以后才能提交：

五、添加提交规范

1.执行命令yarn add @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog cz-customizable -D

2.在根目录添加commitlint.config.js文件配置如下：

js 复制代码

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

3.在根目录添加.cz-config.js文件配置如下：

js 复制代码

module.exports = {
  // 可选类型
  types: [
    { value: "feat", name: "feat:     新功能" },
    { value: "fix", name: "fix:      修复" },
    { value: "docs", name: "docs:     文档变更" },
    { value: "style", name: "style:    代码格式(不影响代码运行的变动)" },
    { value: "refactor", name: "refactor: 重构" },
    { value: "perf", name: "perf:     性能优化" },
    { value: "test", name: "test:     增加测试" },
    { value: "chore", name: "chore:    构建过程或辅助工具的变动" },
    { value: "revert", name: "revert:   回退" },
    { value: "build", name: "build:    打包" },
    { value: "ci", name: "ci:       与持续集成服务有关的改动" },
  ],
  scopes: ["模块一", "其他"], // 更改范围
  allowCustomScopes: true,
  // 消息步骤
  messages: {
    type: "请选择提交类型:",
    customScope: "请输入修改范围(可选):",
    subject: "请简要描述提交(必填):",
    body: "请输入详细描述(可选):",
    footer: "请输入要关闭的issue(可选):",
    confirmCommit: "确认使用以上信息提交？(y/n/e/h)",
  },
  // 跳过问题
  skipQuestions: ["footer"],
  // subject文字长度默认是72
  subjectLimit: 72,
};

4.在此目录下.husky\添加commit-msg文件，配置如下：

npm 复制代码

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

5.在package.json文件中添加如下配置：

json 复制代码

{
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }
}

6.执行npx cz或者yarn run commit就会启动 commit 提交规范

7.为了让同事也能在yarn install的时候自动安装这个钩子需要如下操作：在package.json的scripts中添加如下配置:

json 复制代码

{
  "scripts": {
    "postinstall": "husky install"
  }
}

"postinstall": "husky install" 会在任何人（包括同事、CI、部署机）执行 npm install 之后自动把 Git 钩子目录 .husky/ 里定义的钩子脚本安装到 .git/hooks，从而让诸如 pre-commit、commit-msg 这类 Husky 的钩子生效。

git 提交前修改文件校验和commit提交规范