
如何实现上图中代码提交前的语法检查?
可以通过 Git 的 pre-commit 钩子结合 ESLint 来实现提交前的代码语法检查。以下是实现步骤:
方法一:使用 husky + lint-staged(推荐)
-
安装必要依赖:
bashnpm install husky lint-staged --save-dev
-
设置 husky:
bashnpx 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
-
赋予执行权限:
bashchmod +x .git/hooks/pre-commit
方法三:使用简单 npm 脚本
-
在
package.json
中添加脚本:json{ "scripts": { "precommit": "eslint . --ext .js,.jsx,.ts,.tsx" } }
-
然后配置 husky:
bashnpx 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
↓
报错?→ 阻止提交 ✅