方式一：使用 Git Hooks (推荐)

通过 Git 的 pre-commit hook 在提交前自动运行 ESLint 检查：

安装 husky 和 lint-staged

npm install husky lint-staged --save-dev

配置 package.json

{ 
  "scripts": { 
    "prepare": "husky install" 
  }, 
  "lint-staged": { 
    "*.{js,jsx,ts,tsx}": "eslint --fix" 
  } 
}

初始化 husky 并添加 hook

npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

方式二：使用 commitlint (更严格的规范)

结合 commitlint 可以同时规范提交信息和代码质量：

安装依赖

npm install @commitlint/cli @commitlint/config-conventional husky lint-staged --save-dev

配置 commitlint.config.js

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

完整 package.json 配置

{
  "scripts":{
    "prepare":"husky install"
  },
  "lint-staged":{
    "*.{js,jsx,ts,tsx}":"eslint --fix",
    "*.{json,md}":"prettier --write"
  },
  "husky":{
    "hooks":{
      "pre-commit":"lint-staged",
      "commit-msg":"commitlint -E HUSKY_GIT_PARAMS"
     }
  }
}

方式三：手动配置 Git Hook

如果不使用 husky，可以手动配置：

1. 在项目根目录创建 .git/hooks/pre-commit 文件
2. 添加内容：

#!/bin/sh
# 运行 ESLint 检查
eslint--fix--ext.js,.jsx,.ts,.tsx src/
# 如果 ESLint 返回非零，阻止提交
if[$?-ne0];then
  echo"ESLint 检查失败，请修复错误后再提交"
  exit1
fi

3. 添加执行权限：

chmod+x .git/hooks/pre-commit

注意事项
确保项目已正确配置 ESLint (有 .eslintrc.js 或类似配置文件)

对于 TypeScript 项目，需要安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin

对于新项目，建议在第一次提交前就设置好这些钩子

这种集成可以确保团队所有成员提交的代码都符合统一的代码规范，减少代码风格不一致的问题。