使用 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
↓
报错?→ 阻止提交 ✅
相关推荐
小蜜蜂嗡嗡8 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼10 分钟前
如何简单使用 prompt
前端·aigc
cdbqss115 分钟前
VB.net编写的身份证类
前端·.net
骑自行车的码农33 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky37 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克42 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦43 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan1 小时前
v-on的思考
前端
山河木马1 小时前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502191 小时前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端