vite加vue3项目使用husky进行代码提交前的eslint校验和格式化

        如果项目组成员较多，在开发的过程中难免会遇到大家代码风格不统一、格式化不一致的问题，这种情况下不便于一个团队的统一管理。所以，在这里给大家推荐一个好用的工具：Husky

        Husky 是一个 Git 钩子（Git Hooks）工具，它通过自动化脚本在 Git 操作的特定阶段（如提交、推送等）触发自定义任务，主要解决以下开发痛点：

1. 代码质量保障（阻止脏代码进入仓库）

• 痛点：开发者可能提交未通过测试、未格式化或含有 ESLint 错误的代码。

• Husky 方案：在 pre-commit 钩子中运行校验脚本（如 ESLint、Prettier、单元测试）。

---

2. 统一团队规范（解决开发环境差异）

• 痛点：团队成员本地环境配置不同（如有人禁用 ESLint），导致代码风格或规范不一致。

• Husky 方案：在 Git 钩子中强制执行统一操作（如格式化、校验）。

  效果：
  ✅ 无论开发者个人习惯如何，提交的代码必被统一格式化。
  ❌ 消除“在我机器上是好的”这类问题。

---

3. 自动化流程（减少手动操作遗漏）

• 痛点：开发者容易忘记手动执行测试、构建或版本号更新。

• Husky 方案：在 pre-push 或 commit-msg 钩子中自动触发任务。

  效果：
  ✅ 确保推送的代码已通过测试。
  ❌ 避免将未测试的代码推送到远程分支。

---

4. 增强提交信息规范性

• 痛点：提交信息（Commit Message）随意书写，难以追溯变更目的。

• Husky 方案：通过 commit-msg 钩子校验信息格式（如符合 Conventional Commits）。

  效果：
  ✅ 强制提交信息包含类型（如 feat:、fix:）、描述、关联 Issue 等。
  ❌ 拒绝 "update"、"fix bug" 这类模糊描述。

---

5. 保护分支（防止意外操作）

• 痛点：开发者可能误操作直接向 main 分支提交代码或推送破坏性改动。

• Husky 方案：在 pre-push 中检查分支名或变更内容。

  效果：
  ✅ 强制走 Code Review 流程。
  ❌ 避免主分支被直接污染。

---

好了，开始正文：

        我们项目使用的是Eslint和prettier，如果你想要使用别的规则校验或者格式化工具，可以参考修改，原理一样。

第一步：

安装必要依赖：

npm i eslint @eslint/js eslint-config-prettier eslint-plugin-vue globals vite-plugin-eslint prettier

第二步：

在项目根目录下创建eslint.config.js文件，配置如下：

import js from '@eslint/js'
import globals from 'globals' // 引入全局变量，确保 ESLint 能够正确识别这些变量
import pluginVue from 'eslint-plugin-vue'
import prettierConfig from 'eslint-config-prettier' // 引入 Prettier 配置
import { autoImportConfig } from './.eslintrc-auto-import.js'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  {
    files: ['**/*.{js,vue}'],
    plugins: { js },
    extends: ['js/recommended'],
  },
  ...pluginVue.configs['flat/recommended'], // Vue 3 规则
  {
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  },
  {
    files: ['**/*.{js,vue}'],
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        ...autoImportConfig.globals,
      },
      sourceType: 'module',
    },
  },
  prettierConfig, // 👈 必须放在最后！
])

可根据自己项目需求修改，要注意的就是prettierConfig必须放在最后，不然格式化可能会与eslint校验冲突

autoImportConfig：这个是因为我项目中使用了自动导入，如果不需要则去掉就行

第三步：

根目录下创建.prettierrc文件，根据自己项目需求配置，我这边只做了简单配置：

{
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "bracketSameLine": true,
  "printWidth": 100,
  "trailingComma": "es5"
}

第四步：

配置vite.config.js文件

首先，导入依赖：

import eslint from 'vite-plugin-eslint'

然后在plugins配置栏里加上如下配置：

plugins: [
    eslint({
      fix: true, // 自动修复
      include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.vue'], // 检测的文件类型
      cache: false, // 禁用缓存（确保实时修复）
    }),
  ],

如果你也使用的自动导入功能，那就再加上如下配置：

plugins: [
    AutoImport({
      eslintrc: {
        enabled: false, // 是否生成 .eslintrc-auto-import.json 文件
      },
    }),
    eslint({
      fix: true, // 自动修复
      include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.vue'], // 检测的文件类型
      cache: false, // 禁用缓存（确保实时修复）
    }),
  ],

第一次把enabled改为true，会自动生成.eslintrc-auto-import.json文件，但是json文件不好导入到eslint.config.js里面，我这里是手动改成js文件了，即.eslintrc-auto-import.js，文件内使用es6模块化导出就可以，如下：

export const autoImportConfig = {
  globals: {
    // 这里是需要导入的变量
  },
}

也可以手动直接在eslint.config.js文件里去配置，我是因为把vue的所有api全部自动导入了，要去手动配置的话太多了，嫌麻烦

第五步：

接下来就是配置husky了

首先安装依赖：

npm i husky lint-staged

lint-staged 的作用是只对暂存区的文件做处理，省的每次都全局校验，比较浪费时间

安装好之后运行命令：

npx husky init

会自动在跟目录下生成.husky文件夹，如图

并且会在 package.json 文件中会在 "scripts" 中自动添加 "prepare": "husky"

文件夹内会有一个pre-commit文件，没有的话可以手动创建，配置如下：

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

echo 'husky开始运行'

npx lint-staged

echo 'husky运行结束'

接下来在package.json文件添加如下配置（与"scripts"同级）：

  "lint-staged": {
    "*.{js,vue}": [
      "eslint --fix",
      "prettier --write"
    ]
  },

到这里就大功告成了，每次提交代码时都会自动对代码进行校验和格式化，当然，也可以手动运行 npm run prepare 进行测试

感谢大家观看，点个赞再走吧！！！