ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

Prettier 与 ESLint 冲突报错?让 Codex 走 TaoToken 改 eslint.config.js

Prettier 与 ESLint 冲突报错?让 Codex 走 TaoToken 改 eslint.config.js TaoToken 官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcodex-prettier-eslint-intro 在这篇 Prettier 与 ESLint 冲突报错排障里只做一件事提供 Key 和 Base URL不替你格式化代码。问题出在 VSCode 的 Prettier - Code formatter 已安装settings.json 也配了 editor.formatOnSave但 eslint.config.js 中 semi: error 和 prettier.config.js 中 semi: false 方向相反保存 Vue 文件或执行 lint-staged 时分号报错反复出现。本文按排障视角把 Codex 的 Base URL 指向 https://taotoken.net/api让 Codex 对照 eslint.config.js、prettier.config.js、settings.json、package.json 的 lint-staged 去定位冲突再回到本地跑 pnpm lint:prettier 或触发提交钩子验证。TaoToken 不替代编辑器也不负责具体格式化结果它只是模型通道。一、原问题与场景保存 Vue 文件后 ESLint 和 Prettier 在分号上打架当前场景很典型VSCode 已经安装 Prettier - Code formattersettings.json 中设置了保存时自动格式化并且默认格式化器指向 esbenp.prettier-vscode。同时保存动作还可能触发 ESLint 的 fixAll。单看每一步都没错但一旦 eslint.config.js 和 prettier.config.js 对分号的态度相反保存就会变成来回拉扯。例如 eslint.config.js 里有类似规则rules: { no-console: error, semi: error }而 prettier.config.js 里是export default { semi: false }前者要求必须有分号后者要求不要分号。你在编辑器里按一次保存Prettier 可能会删掉分号ESLint 随后又提示缺少分号或者 ESLint 先自动修复加上分号Prettier 下一次保存又删掉。表现出来可能是Delete ;、Extra semicolon、prettier/prettier之类的提示也可能在 git commit 时被 lint-staged 拦住。原文在 ESlint与Prettier冲突报错一节里强调手动对照 eslint.config.js 和 package.json 中 lint-staged 的步骤。这个方向没有错但人工来回翻文件容易漏掉一个关键点eslint-config-prettier 到底有没有真正生效。它的作用是关闭 ESLint 中那些会和 Prettier 抢格式的规则包括分号、引号、缩进等。如果它只是被写在某个 rules 对象里或者通过...eslintConfigPrettier展开的位置不对就可能没有覆盖到后面的 Vue 配置或后续规则。所以本篇不直接让你盲改格式而是先把 Codex 接到 TaoToken 的模型通道让 Codex 只读分析这几个文件的冲突关系eslint.config.js 中 semi 是否仍然开启prettier.config.js 中 semi 的实际值settings.json 中 defaultFormatter 和 codeActionsOnSave 是否分工冲突package.json 中 lint-staged 是否同时让多个工具改同一批文件。Codex 给出排查结论后你再回本地执行验证命令。二、TaoToken 前置先拿 Key再把 Codex 的 Base URL 指向 https://taotoken.net/apiTaoToken 在这里的定位是提供 Key 和 Base URL让 Codex 可以走统一模型通道来协助排查。它不替读者格式化代码也不替代 Prettier 或 ESLint。你要做的第一件事是打开官网注册并创建 Keyhttps://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcodex-prettier-eslint-register创建后拿到一个 Key下文用YOUR_API_KEY占位。不要把它提交到仓库也不要写进前端项目文件。可以放在系统环境变量、shell profile或者 Codex 自己的配置文件里。比较推荐环境变量方式例如 macOS/Linuxexport TAOTOKEN_API_KEYYOUR_API_KEYWindows PowerShell$env:TAOTOKEN_API_KEYYOUR_API_KEY接下来配置 Codex。Codex 使用 config.toml 管理模型提供方时Base URL 必须填https://taotoken.net/api这里要特别注意三个不要不要写成 TaoToken 官网地址不要在后面加/v1也不要带 UTM 参数。官网地址用于注册和创建 KeyAPI 地址用于 Codex 请求模型。两者不是同一个用途。如果你把官网地址填进 Codex或者写成https://taotoken.net/api/v1很容易出现 404 或鉴权路径不匹配。TaoToken 只提供 Key 和 Base URL格式化是否生效仍由本地 Prettier、ESLint 和 VSCode 配置决定。三、可复制配置Codex config.toml、eslint.config.js、settings.json 和 lint-staged 一起对齐先给 Codex 的~/.codex/config.toml示例。不同 Codex 版本字段可能略有差异但核心是 provider、base_url 和 env_keymodel MODEL_ID model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat如果你本地已有其他 provider不要整段覆盖只追加model_providers.taotoken再把当前 profile 或默认 model_provider 指向它。保存后可以在终端确认 Codex 能读到配置codex --help codex exec 只回复一句TaoToken Codex 通道测试如果这条请求能返回内容说明 Key 和 Base URL 基本可用。接下来给 Codex 一个只读排查提示词让它不要直接改文件只输出冲突点和建议请在当前仓库做只读排查不要修改任何文件。 读取以下文件 - eslint.config.js - prettier.config.js - .vscode/settings.json - package.json 检查 1. eslint.config.js 中 semi 规则是否仍为 error 2. eslint-config-prettier 当前版本的默认导出是对象还是数组 3. ...eslintConfigPrettier 或 eslintConfigPrettier 是否放在所有会写 rules 的配置之后 4. prettier.config.js 中 semi 的实际值 5. settings.json 中 editor.defaultFormatter、editor.formatOnSave、editor.codeActionsOnSave 是否让 Prettier 和 ESLint 同时改格式 6. package.json 中 lint-staged 是否同时让 ESLint 和 Prettier 处理同一批文件顺序是否有冲突。 输出冲突点、涉及文件与行号、最小修改建议、需要本地执行的验证命令。 只给排查结论不要替我格式化代码。eslint.config.js 是重点。先确认 eslint-config-prettier 的导出形态node -e import(eslint-config-prettier).then(mconsole.log({isArray:Array.isArray(m.default), type:typeof m.default}))如果输出isArray: true说明默认导出是数组应使用...eslintConfigPrettier并且放在配置数组最后。如果输出isArray: false说明默认导出是对象直接写eslintConfigPrettier同样放在最后。不要把它塞进某个 rules 对象里也不要放在 pluginVue.configs 前面否则后面的配置可能重新开启格式规则。示意结构如下import js from eslint/js; import globals from globals; import pluginVue from eslint-plugin-vue; import { defineConfig } from eslint/config; import eslintConfigPrettier from eslint-config-prettier; export default defineConfig([ { files: [**/*.{js,mjs,cjs,vue}], plugins: { js }, extends: [js/recommended], languageOptions: { globals: { ...globals.browser, ...globals.node } }, rules: { no-console: error, semi: error } }, ...pluginVue.configs[flat/essential], // 注意如果上方检测结果是数组这里写 ...eslintConfigPrettier // 如果检测结果是对象这里直接写 eslintConfigPrettier eslintConfigPrettier ]);settings.json 方面检查默认格式化器是否只指向 Prettier{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, [vue]: { editor.defaultFormatter: esbenp.prettier-vscode }, [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode } }如果保存时仍出现分号冲突可以临时把source.fixAll.eslint改为never先确认 Prettier 单独保存是否稳定。ESLint 仍然可以用命令行检查不一定非要和保存格式化同时执行。package.json 中 lint-staged 也要看。原文里可能只写了 Prettier也可能同时有 ESLint。若同时存在不要让 ESLint 的格式规则和 Prettier 抢同一批文件{ lint-staged: { *.{js,mjs,cjs,vue,json,css,less,scss,html,md}: [ prettier --write, eslint --fix ] } }更稳的做法是让 eslint-config-prettier 关闭 ESLint 的格式规则ESLint 只保留代码质量规则Prettier 负责格式化。这样 lint-staged 里谁先谁后都不容易再次产生分号冲突。四、验证请求与成功结果pnpm lint:prettier、lint-staged 和 Codex 排查输出配置完成后不要只看编辑器里的波浪线要回到项目根目录执行命令。第一步可以让 Codex 输出排查摘要确认它能读取仓库文件并指出具体行号。如果它返回的内容里包含 eslint.config.js、prettier.config.js、settings.json、lint-staged 的差异点说明 TaoToken 的 Key 和 Base URL 已经配通Codex 请求成功。第二步执行本地格式化与检查pnpm lint:prettier pnpm exec eslint **/*.{js,mjs,cjs,vue} --fix pnpm exec lint-stagedpnpm lint:prettier对应原文里的 Prettier 写操作可以确认分号、引号、缩进最终按 prettier.config.js 执行。eslint --fix用于观察 ESLint 是否还会改回格式。lint-staged更接近真实提交场景能验证 Git Hooks 是否还会因为 Prettier 和 ESLint 冲突而失败。成功结果可以这样判断保存 Vue 文件时不再出现Delete ;、Extra semicolon或prettier/prettier这类分号相关报错。pnpm lint:prettier执行后文件按 prettier.config.js 中semi: false处理ESLint 不再要求补分号。eslint --fix执行后不会再把 Prettier 已删掉的分号加回来。lint-staged通过git commit 不再被格式规则拦住。Codex 返回的排查结论能明确指出 eslint-config-prettier 是否生效以及它应该放在 eslint.config.js 的哪个位置。如果只是验证模型通道是否可用也可以先发一条不涉及仓库文件的短请求。能正常返回就说明 Codex 到 TaoToken 的链路没有问题。后面再让 Codex 做只读排查避免它一开始就执行格式化或修改文件。五、本篇常见错排查semi、eslint-config-prettier、defaultFormatter 与 Base URL第一个常见错是 Base URL 写错。Codex 的 config.toml 中应填https://taotoken.net/api不要写成官网首页不要加/v1不要带 UTM。官网链接用于注册和创建 KeyAPI 地址用于请求模型混用后容易出现 404、401 或路径错误。第二个常见错是 Key 环境变量名不一致。config.toml 里写env_key TAOTOKEN_API_KEY终端里却导出了别的名字Codex 自然读不到。检查当前 shell 是否真的存在这个变量echo $TAOTOKEN_API_KEYWindows PowerShell 则检查echo $env:TAOTOKEN_API_KEY第三个常见错是 eslint-config-prettier 展开方式错误。它可能是对象也可能是数组。对象直接作为独立配置放最后数组才用...展开。若你把对象展开到 rules 同级它不会按你预期关闭 semi若你把它放在 pluginVue.configs 前面后面的 Vue 规则可能再次开启冲突项。第四个常见错是 eslint.config.js 中 semi 仍然手动开启。即使安装了 eslint-config-prettier如果后面的配置又写了semi: error冲突仍会回来。要确认最终生效配置中 semi 被关闭或者至少不要和 prettier.config.js 的semi: false相反。第五个常见错是 settings.json 中多个格式化器同时工作。editor.defaultFormatter应该稳定指向esbenp.prettier-vscode。如果你在 Vue、JavaScript、TypeScript 等语言级别又设置了别的默认格式化器保存时可能不是 Prettier 在改文件。editor.codeActionsOnSave中的source.fixAll.eslint也会参与保存动作必要时先关闭它做对照。第六个常见错是 lint-staged 顺序和职责不清。如果 ESLint 还负责分号、引号、缩进而 Prettier 也负责这些两个工具会在提交阶段互相覆盖。应让 eslint-config-prettier 关闭 ESLint 的格式规则让 ESLint 关注未使用变量、潜在错误、控制台输出等质量问题。第七个常见错是多工作区 settings 覆盖。VSCode 用户设置、工作区设置、文件夹设置可能同时存在。你以为改的是项目里的.vscode/settings.json实际生效的可能是用户级设置。排查时让 Codex 或你自己确认当前工作区实际读取的 settings.json 路径。第八个常见错是版本差异。ESLint 9 的 flat config 与旧版.eslintrc写法不同Prettier 3 的配置文件格式也有变化。eslint-config-prettier 新版本在 flat config 中的用法要以安装版本为准。先看 package.json 中版本再看导出形态不要直接复制旧文章里的 extends 写法。第九个常见错是缓存和编辑器未重启。修改 eslint.config.js、prettier.config.js 或 settings.json 后VSCode 有时仍沿用旧配置。可以关闭再打开项目或者执行一次命令行格式化确认到底是配置问题还是编辑器缓存问题。六、语义一致 CTA继续排障就查 API Keys 和接入文档如果你的目标是把 Codex 接到 TaoToken 后继续排查 Prettier 与 ESLint 冲突优先看 API Keys 和接入文档。先创建或管理 Key再按文档确认 Codex 的 config.toml、Base URL、环境变量名。API Keys 入口https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcodex-prettier-eslint-api-keysutm_campaignrewrite接入文档入口https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentcodex-prettier-eslint-docutm_campaignrewrite如果你还在处理 settings.json、CC Switch、Cline 或类似接入配置也建议从 API Keys 和接入文档核对 Base URL 与 Key 的填写方式。长期用 Codex 做仓库级排查、Agent 任务或编码辅助可以再看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcodex-prettier-eslint-coding-planutm_campaignrewrite如果还没创建 Key从官网注册后创建再回到 Codex config.toml 填https://taotoken.net/api。记住TaoToken 只提供 Key 和 Base URL真正解决 Prettier 与 ESLint 冲突的仍是 eslint.config.js 中 eslint-config-prettier 的位置、prettier.config.js 中 semi 的值、settings.json 中 defaultFormatter 的分工以及本地pnpm lint:prettier和 lint-staged 的验证结果。把这些点对齐后Codex 的排查输出才能和本地命令结果互相印证。
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进