使用 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
↓
报错?→ 阻止提交 ✅
相关推荐
小猫由里香19 小时前
小程序打开文件(文件流、地址链接)封装
前端
Tzarevich19 小时前
使用n8n工作流自动化生成每日科技新闻速览:告别信息过载,拥抱智能阅读
前端
掘金一周19 小时前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统 | 掘金一周 10.23
前端·人工智能·后端
大杯咖啡19 小时前
前端常见的6种设计模式
前端·javascript
zyfts19 小时前
手把手教学用nodejs读写飞书在线表格
前端
泉城老铁19 小时前
vue实现前端excel的导出
前端·vue.js
用户516816614584119 小时前
Lottie动画在前端web、vue、react中使用详解
前端·vue.js
咖啡の猫19 小时前
Vue收集表单数据
前端·javascript·vue.js
知识分享小能手20 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
林恒smileZAZ20 小时前
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
前端·计算机外设·css3