告别“屎山”：用 Husky + Prettier + ESLint 打造前端项目的代码基石

一个多人参与的项目，如果没有代码规范，会导致代码样式五花八门，特别难看。我相信对于程序员这个职业来说，一个项目中，代码格式千奇百怪，没有几个人能忍吧。

现在在github上随意看一个项目，都几乎是配备了husky的，这个工具可以hook到git的命令，然后自动运行相关脚本，进而达到自动格式化代码的目的。

今天，我们就来详细介绍如何配置 Husky，并结合 Prettier 和 ESLint，为你的项目构建一个坚实的代码规范防线。

核心工具栈一览

在深入配置之前，我们先来认识一下我们将要使用的"黄金组合"：

Husky: Git Hooks 管理工具，负责拦截 Git 命令并在特定阶段执行脚本。
Prettier: 强大的代码格式化工具，确保代码风格统一美观。
ESLint: 静态代码分析工具，用于发现并修复代码中的潜在问题和不符合规范的写法。
lint-staged: 配合 Husky 使用，只对 Git 暂存区的文件进行 Lint 和格式化，大幅提升效率。
eslint-config-prettier: 解决 ESLint 与 Prettier 规则冲突的关键配置。

配置 Husky：自动化检查的"守门员"

husky官网，进去之后按照引导安装即可

js 复制代码

# 安装 Husky
npm install --save-dev husky

# 初始化 Husky (会在项目根目录创建 .husky 文件夹)
npx husky init

小贴士: 如果你的项目尚未进行 Git 初始化 (git init)，npx husky init 命令会报错提示 .git can't be found。请务必先初始化 Git 仓库，再进行 Husky 初始化。

安装相关依赖

这里husky只是可以hook到git的命令，具体要做什么，我们要自定义。

为了实现代码的自动化格式化和规范检查，我们需要安装 Prettier、ESLint，以及它们的重要辅助工具 lint-staged 和 eslint-config-prettier。

js 复制代码

# 安装 prettier 和 eslint (如果还没装的话)
npm install --save-dev prettier eslint

# 安装 lint-staged
npm install --save-dev lint-staged

# 解决 Prettier 和 ESLint 规则冲突的重要插件
# (这个插件会关闭所有可能与 Prettier 冲突的 ESLint 格式化规则)
npm install --save-dev eslint-config-prettier

配置lint-staged

在我们的 package.json 中添加 lint-staged 的配置。这告诉它对不同类型的文件执行什么操作：

js 复制代码

{
  "scripts": {
    // ... 其他 scripts
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.{json,css,md,html}": [
      "prettier --write"
    ]
  },
  // ... 其他依赖
}

修改`eslint.config.js`配置

eslint-config-prettier 会关闭所有可能与 Prettier 格式规则冲突的 ESLint 规则。在 Flat Config 中，配置是按数组顺序应用的，后一个配置会覆盖前一个。因此，我们需要确保 eslintConfigPrettier 处于配置数组的末尾。

js 复制代码

// 1. 引入 prettier 配置 
import eslintConfigPrettier from "eslint-config-prettier";
// 2. 并在最后添加 eslintConfigPrettier
export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
  eslintConfigPrettier,
]);

修改husky的hook命令

这里就是最后的一步了，在commit的时候，我们要运行什么命令

修改.husky/pre-commit，在里面添加

复制代码

npx lint-staged

自定义代码规范

如果我们想修改代码的格式规范，可以在prettierrc.json文件中对其进行修改，如果没有这个文件，创建一个就好了

js 复制代码

// .prettierrc.json
{
  "tabWidth": 4,          // 缩进宽度为 4 个空格
  "semi": false,          // 不使用分号
  "singleQuote": true,    // 使用单引号
  "printWidth": 80,       // 每行代码最多 80 个字符 (可选，但推荐)
  "trailingComma": "all"  // 对象或数组的最后一个元素后总是添加逗号 (可选，但推荐)
}

总结

通过 Husky、Prettier、ESLint 和 lint-staged 的强强联合，我们构建了一个高效且强大的代码规范自动化流程。这将：

统一代码风格： 团队成员的代码风格将高度一致，降低阅读成本。
提升代码质量： 及时发现潜在的 Bug 和不规范的写法。
优化开发体验： 格式化和检查在提交前自动完成，无需手动干预。
确保项目健康： 从源头杜绝"屎山"的产生，让项目代码库始终保持健康和易于维护。

告别“屎山”：用 Husky + Prettier + ESLint 打造前端项目的代码基石

核心工具栈一览

配置 Husky：自动化检查的"守门员"

安装相关依赖

配置lint-staged

修改eslint.config.js配置

修改husky的hook命令

自定义代码规范

总结

修改`eslint.config.js`配置