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

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

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

方法一:使用 husky + lint-staged(推荐)

  1. 安装必要依赖

    bash 复制代码
    npm install husky lint-staged --save-dev
  2. 设置 husky

    bash 复制代码
    npx husky install
    npx husky add .husky/pre-commit "npx lint-staged"
  3. 配置 lint-staged : 在 package.json 中添加:

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

方法二:手动配置 Git 钩子

  1. 创建 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
  2. 赋予执行权限

    bash 复制代码
    chmod +x .git/hooks/pre-commit

方法三:使用简单 npm 脚本

  1. package.json 中添加脚本:

    json 复制代码
    {
      "scripts": {
        "precommit": "eslint . --ext .js,.jsx,.ts,.tsx"
      }
    }
  2. 然后配置 husky:

    bash 复制代码
    npx husky install
    npx husky add .husky/pre-commit "npm run precommit"

注意事项

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

高级配置示例

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
↓
报错?→ 阻止提交 ✅
相关推荐
十盒半价9 分钟前
TypeScript + React:大型项目开发的黄金搭档
前端·typescript·trae
楚轩努力变强1 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端1 小时前
rust基础二(闭包)
前端·rust
菜鸟学Python1 小时前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er2 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping2 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
未来之窗软件服务3 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录3 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国3 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器