使用 ESLint 实现 Git Commit 前的语法检查

如何实现上图中代码提交前的语法检查？

可以通过 Git 的 pre-commit 钩子结合 ESLint 来实现提交前的代码语法检查。以下是实现步骤：

方法一：使用 husky + lint-staged（推荐）

安装必要依赖：

bash 复制代码

npm install husky lint-staged --save-dev

设置 husky：

bash 复制代码

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

配置 lint-staged ：在 package.json 中添加：

json 复制代码

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "git add"
    ]
  }
}

方法二：手动配置 Git 钩子

创建 pre-commit 钩子文件 ：在项目根目录的 .git/hooks/pre-commit 文件中添加以下内容（如果没有该文件，新建一个）：

bash 复制代码

#!/bin/sh

# 运行 ESLint 检查
eslint_result=$(npx eslint . --ext .js,.jsx,.ts,.tsx)

if [ $? -ne 0 ]; then
  echo "ESLint 检查失败，请修复以下问题后再提交："
  echo "$eslint_result"
  exit 1
fi

exit 0

赋予执行权限：
bash 复制代码
```
chmod +x .git/hooks/pre-commit
```

方法三：使用简单 npm 脚本

在 package.json 中添加脚本：

json 复制代码

{
  "scripts": {
    "precommit": "eslint . --ext .js,.jsx,.ts,.tsx"
  }
}

然后配置 husky：

bash 复制代码

npx husky install
npx husky add .husky/pre-commit "npm run precommit"

注意事项

确保项目中已正确配置 ESLint（有 .eslintrc.js 或类似配置文件）
可以调整 lint-staged 配置只检查暂存区的文件，提高效率
对于 TypeScript 项目，确保已安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin
如果检查失败，提交会被阻止，直到所有错误被修复

高级配置示例

json 复制代码

{
  "lint-staged": {
    "*.{js,jsx}": ["eslint --fix", "prettier --write"],
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,html,css,scss}": ["prettier --write"]
  }
}

这种方法会在提交前自动修复可修复的 ESLint 错误并格式化代码。

txt 复制代码

git add .
↓
git commit -m "feat: xxx"
↓
.husky/pre-commit 被触发
↓
执行 npx lint-staged
↓
lint-staged 找到所有 add 的 .js/.vue 文件
↓
执行 eslint --fix
↓
报错？→ 阻止提交 ✅