提交时，Husky 和 ESLint 自动帮我们检查代码

你是不是也有过这样的经历：匆忙提交代码后，才发现有些低级错误没发现？别担心，今天我来教你如何用 Husky + ESLint 在提交代码时自动检查，确保每次提交的代码都是干净规范的！

简单理解这些工具

Husky：就像你代码仓库的"门卫"，在你想提交代码（git commit）时，它会自动执行一些检查工作
ESLint：代码"质检员"，专门检查代码质量和风格是否符合规范
Prettier：代码"美容师"，自动格式化代码，保持风格统一
lint-staged：智能"筛选器"，只检查本次修改的文件，不浪费时间检查整个项目

一步步设置代码提交自动检查

1. 首先安装需要的工具

打开终端，在你的项目根目录下运行：

bash 复制代码

npm install --save-dev husky eslint prettier lint-staged eslint-plugin-prettier eslint-config-prettier

2. 配置代码风格规则

创建 .prettierrc.js 文件（用于定义代码格式规则）：

javascript 复制代码

module.exports = {
  printWidth: 120,    // 每行最多120字符
  tabWidth: 2,        // 缩进2个空格
  useTabs: false,     // 不使用制表符
  semi: false,        // 不加分号
  singleQuote: true,  // 使用单引号
  trailingComma: 'none', // 不加尾随逗号
  bracketSpacing: true, // 对象、数组加空格
  arrowParens: 'always' // 箭头函数参数总是加括号
}

创建或修改 .eslintrc.js 文件（用于定义代码质量规则）：

javascript 复制代码

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    'prettier',
    'plugin:prettier/recommended'  // 整合prettier和eslint
  ],
  rules: {
    // 这里可以添加你自己的代码规则
  }
}

3. 设置 Husky 自动检查

初始化 Husky：

bash 复制代码

npx husky-init

这会在你的项目中创建一个 .husky 文件夹，里面有一个 pre-commit 文件。

修改 package.json 文件，添加以下内容：

json 复制代码

{
  "scripts": {
    "lint-staged": "lint-staged --allow-empty",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "yarn run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ]
  }
}

然后修改 .husky/pre-commit 文件中的内容为：

bash 复制代码

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

yarn lint-staged  # 或者 npm run lint-staged

4. 大功告成！

现在，每当你执行 git commit 时，Husky 就会自动：

检查你修改的文件是否符合 ESLint 规则
自动用 Prettier 格式化代码
如果有错误会阻止提交并提示你修复
一切正常才会完成提交

实际效果

当你提交代码时，如果代码有问题，你会看到类似这样的提示：

css 复制代码

⚠️  发现ESLint错误：
src/components/Button.js
  第15行：缺少分号

❌ 请修复以上错误后重新提交

修复错误后再次提交即可。如果代码没问题，就会自动格式化并成功提交！