ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

本地工具链一键集成:Claude Code 对接 ESLint、Prettier 与 Git hooks 全链路

本地工具链一键集成:Claude Code 对接 ESLint、Prettier 与 Git hooks 全链路 1. 为什么 Claude Code 写的代码总在提交时翻车用 Claude Code 写代码最爽的瞬间是它一口气生成几十行逻辑严密的函数最崩溃的瞬间是git commit之后 CI 飘红一片——命名风格不对、import 顺序乱、少写返回类型、缩进混用空格和 Tab。你回头找 Claude 说“帮我修一下 lint”它修完又引入两个新问题来回几轮时间全耗在格式上。这不是模型笨是规则没有落到工具链里。Claude Code 默认不知道你项目用的是 ESLint v10 的 flat config也不知道你 Prettier 的printWidth是 100 还是 80更不知道你 commit 前必须跑测试。它只能靠对话里的临时叮嘱而叮嘱是会“忘”的。我试过把 ESLint、Prettier、Git hooks 和 Claude Code 串成一条流水线Claude 每次写文件自动格式化 自动修复每次 commit自动拦截不合格代码。配置完成后AI 生成代码的 lint 通过率从六成出头拉到九成以上人工返工基本消失。这篇就把这套可复制的配置拆开讲清楚包括settings.json、.husky骨架、统一 Key 接入以及提交前自动修复的验证动作。适合谁正在用 Claude Code 做日常开发、被 lint 报错反复打断、想让 AI 产出直接进仓库的开发者。前置要求Node.js 20.19 或 22.13ESLint v10 的硬性要求项目里已有package.json。2. 前置准备TaoToken 统一 Key 与 Claude Code 接入Claude Code 本身是 CLI 工具要让它跑起来得先解决模型调用入口。我这边用 TaoToken 做统一接入一个 Key 管所有模型调用省得在多个平台之间来回切。2.1 拿 Key 与配置环境变量先去控制台创建 API Key地址是https://taotoken.net/console。创建完复制那串sk-开头的字符串然后写进 shell 配置# 写入 ~/.zshrc 或 ~/.bashrc export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENsk-你的KeyANTHROPIC_BASE_URL指向 TaoToken 的 API 端点ANTHROPIC_AUTH_TOKEN放你的 Key。这两行是 Claude Code 识别调用入口的关键别写错。2.2 验证 Claude Code 能通重载配置后跑一句source ~/.zshrc claude --version能打印版本号说明 CLI 装好了。再跑一次简单对话确认 Key 生效claude -p 用一句话说明 ESLint flat config 和旧版 eslintrc 的区别如果返回了正常回答说明模型调用链路通了。如果报 401 或连接错误先检查 Key 有没有复制全、环境变量有没有source生效。注意Claude Code 版本建议 ≥ 2.1.128早期版本存在已公开的安全问题升级一下更稳妥。2.3 装齐工具链依赖在项目根目录装 ESLint v10、Prettier 3.8 和 huskynpm install -D eslint^10 prettier^3.8 husky lint-staged npx husky inithusky init会创建.husky/目录并在package.json里加prepare脚本。装完后确认版本npx eslint --version # 应输出 v10.x npx prettier --version # 应输出 3.8.xESLint v10 已经彻底移除旧版 eslintrc如果你项目里还有.eslintrc.json用官方迁移工具转一下npx eslint/migrate-config .eslintrc.json它会生成eslint.config.mjs后续所有配置都基于这个文件。3. 可复制配置settings.json 与 .husky 骨架这一节是核心把三层配置一次性给全Claude Code 的 hooks、ESLint/Prettier 规则、Git hooks 门禁。3.1 Claude Code 的 settings.json在项目根目录建.claude/settings.json这是项目级配置建议提交到仓库让团队共享{ hooks: { PostToolUse: [ { matcher: Write|Edit, hooks: [ { type: command, command: npx prettier --write \$CLAUDE_TOOL_INPUT_FILE_PATH\ 2/dev/null || true npx eslint --fix \$CLAUDE_TOOL_INPUT_FILE_PATH\ 2/dev/null || true } ] } ], PreToolUse: [ { matcher: Bash, hooks: [ { type: command, command: bash .claude/hooks/pre-commit-check.sh } ] } ] } }PostToolUse在 Claude 每次写文件或编辑文件后触发先 Prettier 格式化再 ESLint 自动修复。2/dev/null || true保证即使命令报错也不中断 Claude 的流程。PreToolUse在 Claude 执行 Bash 命令前触发用来拦截git commit。3.2 pre-commit-check.sh 拦截脚本建.claude/hooks/pre-commit-check.sh#!/bin/bash input$(cat) command$(echo $input | python3 -c import json,sys; djson.load(sys.stdin); print(d.get(command,)) 2/dev/null) if echo $command | grep -q git commit; then echo 检测到 git commit先跑 lint 和测试... npx eslint . --quiet if [ $? -ne 0 ]; then echo ESLint 未通过阻止提交 2 exit 1 fi npm test -- --passWithNoTests if [ $? -ne 0 ]; then echo 测试失败阻止提交 2 exit 1 fi fi exit 0给执行权限chmod x .claude/hooks/pre-commit-check.sh退出码非零时PreToolUse会阻止 Claude 继续执行git commit形成第一道门禁。3.3 .husky 骨架与 lint-staged.husky/pre-commit文件内容#!/bin/sh . $(dirname $0)/_/husky.sh npx lint-stagedpackage.json里加 lint-staged 配置{ lint-staged: { *.{js,jsx,ts,tsx}: [ prettier --write, eslint --fix ], *.{json,md,css}: [ prettier --write ] } }这样即使 Claude 的 hook 漏掉了某个文件Git 层面的 pre-commit 也能兜底只对暂存区的文件跑格式化和修复速度快。3.4 ESLint 与 Prettier 配置eslint.config.mjs最小可用版本import js from eslint/js; import tseslint from typescript-eslint; export default tseslint.config( js.configs.recommended, ...tseslint.configs.recommended, { rules: { typescript-eslint/no-explicit-any: error, typescript-eslint/explicit-function-return-type: warn, prefer-const: error, no-var: error } } );.prettierrc{ semi: true, singleQuote: true, printWidth: 100, trailingComma: es5 }3.5 CLAUDE.md 规则注入在项目根目录建CLAUDE.md把 lint 规则翻译成 Claude 能理解的指令## Code Style - Use TypeScript strict mode; no any type allowed - All functions must have explicit return type annotations - Prefer const over let; never use var ## Naming - Functions: camelCase, verb-first (getUserById, parseConfig) - WRONG: get_user_by_id, GetUserById - Components: PascalCase (UserProfile, DataTable) - Constants: UPPER_SNAKE_CASE (MAX_RETRY_COUNT) ## Imports - External libraries first, then internal modules - Prefer named imports over default imports关键是每条规则都写成祈使句 反例。反例比正例管用不写反例时模型有一定概率输出get_user_by_id这种风格。4. 验证请求提交前自动修复与校验配置写完得验证不然你不知道哪一层没生效。4.1 验证 PostToolUse 自动格式化让 Claude 写一个故意格式混乱的文件claude -p 在 src/utils.ts 里写一个函数用双引号、分号、缩进用 Tab变量名用 snake_case写完后立刻看文件内容cat src/utils.ts如果配置生效你会看到双引号变成了单引号、Tab 变成了空格、snake_case被 ESLint 的命名规则标记如果开了对应规则。这说明PostToolUse的 Prettier ESLint 链路通了。4.2 验证 PreToolUse 拦截 commit故意留一个 lint 错误然后让 Claude 提交claude -p 帮我把当前改动 git commit 一下如果pre-commit-check.sh生效Claude 会收到“ESLint 未通过阻止提交”的反馈commit 不会执行。修掉错误后再试就能正常提交。4.3 验证 Git hooks 兜底手动制造一个格式问题直接命令行提交echo const x1 src/utils.ts git add src/utils.ts git commit -m test hook如果 husky lint-staged 生效提交时 Prettier 会自动把const x1改成const x 1;然后 ESLint 检查通过提交成功。查看git show能看到格式化后的内容。4.4 成功结果对照验证项预期结果失败表现PostToolUse 格式化文件写入后自动变规范文件保持原样PreToolUse 拦截commit 被阻止并提示commit 直接执行husky 兜底提交时自动修复提交后 CI 报错CLAUDE.md 规则生成代码命名规范出现 snake_case三层都通过后跑一次完整会话观察 Claude 是否在每次文件写入后自动执行 prettier 和 eslint。正常的话你已经有一条 AI 驱动的自动化流水线了。5. 本篇常见错排查配置过程中踩过的坑按出现频率排一下。5.1 hooks 不触发最常见的原因是settings.json路径不对。项目级配置必须在.claude/settings.json不是根目录的settings.json。另外确认 JSON 格式合法多一个逗号都会导致整个文件被忽略。用cat .claude/settings.json | python3 -m json.tool检查语法。5.2 $CLAUDE_TOOL_INPUT_FILE_PATH 为空这个环境变量是 Claude Code 注入的如果命令里用了但值为空说明当前 hook 的 matcher 没匹配上。Write|Edit要写对大小写敏感。另外某些版本用的是$CLAUDE_TOOL_INPUT_PATH两个都试一下看哪个有值。5.3 ESLint v10 报配置找不到v10 不再从当前工作目录查找配置而是从被 lint 文件所在目录向上找。如果你在 monorepo 里确保每个子包根目录都有eslint.config.mjs或者在最外层放一个统一的配置。旧版.eslintrc文件在 v10 里完全无效必须迁移。5.4 Prettier 和 ESLint 规则打架Prettier 管格式ESLint 管代码质量但有些规则会重叠比如缩进、引号。解决办法是装eslint-config-prettier在 ESLint 配置里关掉所有和 Prettier 冲突的规则npm install -D eslint-config-prettier然后在eslint.config.mjs的extends数组最后加上prettier。5.5 husky 在 CI 环境报错husky 的prepare脚本在 CI 里可能因为权限或路径问题失败。加个判断{ scripts: { prepare: husky || true } }|| true保证 CI 环境即使 husky 装不上也不中断构建。5.6 自动修复引入新问题ESLint 的--fix不是万能的有些规则修复后会改变代码行为比如no-unused-vars删掉变量。建议在PostToolUse里只跑安全的修复规则或者在 CLAUDE.md 里明确告诉 Claude 哪些规则不允许自动修复。测试驱动的自愈闭环里跑完测试再决定是否保留修复结果。6. 把这条流水线用起来整套配置的核心思路是三层递进CLAUDE.md 让 AI 知道规则PostToolUse hooks 让 AI 必须执行PreToolUse Git hooks 做最后门禁。三层都配好之后Claude Code 从“会写代码的 AI”变成“写完代码自动符合规范的工程系统”。如果你还没配 Key先去https://taotoken.net/api-keys创建一个然后按第 2 节的步骤写进环境变量。接入文档在https://taotoken.net/doc里面有各语言的调用示例。想先验证模型对话是否正常可以用https://taotoken.net/models里的对话入口试一句。长期用 Claude Code 做编码和 Agent 任务的建议看下 Coding Planhttps://taotoken.net/coding-plan里有按量计费的说明比单次调用划算。配置完成后跑一次完整会话观察 Claude 是否在每次文件写入后自动执行 prettier 和 eslint。如果一切正常你已经拥有了一条 AI 驱动的自动化工程流水线。接下来可以试试把测试也接进 PostToolUse形成 test → fail → fix → retest 的自愈循环那才是这套工具链的完全体。
返回列表