1. 为什么 Prettier 和 ESLint 总在 VSCode 里打架如果你同时用 Prettier 和 ESLint大概率遇到过这种场景保存文件后代码先被 Prettier 格式化了一遍紧接着 ESLint 又报了一堆格式错误比如「Expected indentation of 2 spaces but found 4」「Strings must use singlequote」。你手动改完下次保存又变回去来回拉扯。这个问题的本质是Prettier 负责「代码长什么样」ESLint 负责「代码写得对不对」但两者的格式规则有重叠区域。当 ESLint 里开启了indent、quotes、semi这类格式规则而 Prettier 又有自己的默认值时它们就会互相覆盖。VSCode 的保存动作触发了两个格式化器谁后执行谁说了算结果就是代码在两种风格之间反复横跳。更麻烦的是多项目场景。A 项目用 2 空格缩进 单引号 无分号B 项目用 4 空格 双引号 有分号。你在两个项目之间切换时VSCode 的全局settings.json只有一套配置工作区的.vscode/settings.json又经常忘记同步导致格式化行为不一致。这篇内容面向的就是被这个问题困住的多项目开发者。我会给出可直接复制的settings.json和.eslintrc骨架演示如何通过 TaoToken 统一 Key 接入 AI 辅助格式化通道并附上验证格式化是否真正生效的具体操作步骤。核心检索词vscode 插件、格式化代码、prettier、eslint 协同配置。2. TaoToken 前置准备统一 Key 与 API 通道在开始配置之前先把 AI 辅助格式化需要的通道准备好。TaoToken 在这里的角色是提供一个统一的 API 入口让你在 VSCode 插件里调用模型能力时不用每个项目单独配一套 Key。2.1 获取 API Key访问控制台创建 Keyhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentconsole创建后复制 Key格式类似sk-xxxxxxxx。这个 Key 后面会写进 VSCode 的settings.json用于 AI 格式化插件的鉴权。2.2 确认 API 端点TaoToken 的 API 基础地址是https://taotoken.net/api注意这个地址不加 UTM 参数直接用于插件配置里的baseURL字段。如果你用的是 OpenAI 兼容的插件填这个地址即可。2.3 验证 Key 是否可用在终端里用 curl 快速验证curl https://taotoken.net/api/v1/models \ -H Authorization: Bearer sk-你的Key返回 JSON 里能看到模型列表就说明 Key 和通道都正常。这一步别跳过后面插件报错时你能快速判断是 Key 问题还是配置问题。3. 可复制配置settings.json 与 .eslintrc 骨架这一章是全文的核心操作部分。我会分三层来配VSCode 工作区设置、Prettier 规则文件、ESLint 规则文件最后加上 AI 辅助格式化的接入配置。3.1 工作区 settings.json在项目根目录创建.vscode/settings.json这是多项目隔离的关键。不要只改全局设置否则切项目就乱。{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, eslint.validate: [ javascript, javascriptreact, typescript, typescriptreact, vue ], prettier.requireConfig: true, prettier.useEditorConfig: false, [vue]: { editor.defaultFormatter: esbenp.prettier-vscode }, [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [typescript]: { editor.defaultFormatter: esbenp.prettier-vscode } }几个关键点解释一下。editor.defaultFormatter必须显式指定为esbenp.prettier-vscode否则 VSCode 可能用内置格式化器导致.prettierrc不生效。editor.codeActionsOnSave里的source.fixAll.eslint设为explicit是新版 VSCode 的要求旧版写true会警告。prettier.requireConfig设为true表示只有存在.prettierrc时才格式化避免在没配置的项目里乱动代码。3.2 .prettierrc 规则文件在项目根目录创建.prettierrc{ semi: false, singleQuote: true, printWidth: 120, trailingComma: none, arrowParens: always, singleAttributePerLine: true, useTabs: false, tabWidth: 2, endOfLine: lf }这套配置对应的是「无分号 单引号 120 行宽 无尾逗号 箭头函数参数始终带括号」。singleAttributePerLine设为true后标签属性超过一个就会换行Vue 模板里特别明显。endOfLine设为lf是为了跨平台一致Windows 上默认crlf会导致 git diff 全是改动。配套的.prettierignore/dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/*3.3 .eslintrc 规则文件关键原则ESLint 里关掉所有和 Prettier 重叠的格式规则只保留代码质量规则。{ root: true, env: { browser: true, es2021: true, node: true }, extends: [ eslint:recommended, plugin:vue/vue3-recommended, prettier ], parserOptions: { ecmaVersion: latest, sourceType: module }, rules: { indent: off, quotes: off, semi: off, comma-dangle: off, no-unused-vars: warn, no-console: off, vue/multi-word-component-names: off } }extends里的prettier是eslint-config-prettier它的作用就是关掉所有与 Prettier 冲突的规则。装了它之后你不需要手动一个个关indent、quotes、semi但显式写出来更清晰。vue/multi-word-component-names关掉是因为很多项目用单文件名单词组件开着会一直报错。安装依赖npm install -D eslint prettier eslint-config-prettier eslint-plugin-vue3.4 AI 辅助格式化接入配置在settings.json里追加 AI 格式化插件的配置。以常见的 OpenAI 兼容插件为例{ aiFormatter.enabled: true, aiFormatter.baseURL: https://taotoken.net/api, aiFormatter.apiKey: sk-你的Key, aiFormatter.model: gpt-4o-mini, aiFormatter.triggerOnSave: false, aiFormatter.triggerCommand: aiFormatter.formatWithAI }triggerOnSave设为false是有意为之。AI 格式化比 Prettier 慢每次保存都触发会拖慢编辑体验。建议绑定快捷键手动触发比如CtrlAltF。baseURL填 TaoToken 的 API 地址apiKey填你在控制台创建的 Key。如果你更习惯在对话里让模型帮你生成格式化配置可以直接用模型对话入口https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentmodels4. 验证格式化生效的具体操作步骤配置写完不代表生效必须验证。下面是我实测下来最可靠的验证流程。4.1 验证 Prettier 是否接管打开一个.js文件故意写一段格式混乱的代码const obj{a:1,b:2,c:3} function test( x,y ){ return xy }按ShiftAltFWindows或ShiftOptionFMac如果代码变成const obj { a: 1, b: 2, c: 3 } function test(x, y) { return x y }说明 Prettier 生效了。注意看有没有分号、引号是单是双、缩进是 2 还是 4这些都要和.prettierrc一致。4.2 验证 ESLint 自动修复在代码里加一个未使用的变量const unusedVar 123保存文件如果 ESLint 配置了no-unused-vars: warn编辑器应该出现黄色波浪线。如果配置了source.fixAll.eslint某些可自动修复的问题比如引号、分号会在保存时被修掉。4.3 验证两者不冲突这是最关键的一步。写一段同时触发 Prettier 和 ESLint 的代码const name test保存后如果 Prettier 把它改成const name test单引号、无分号而 ESLint 没有报「Strings must use singlequote」或「Missing semicolon」说明两者已经协同好了。如果 ESLint 还在报格式错误检查.eslintrc的extends里有没有prettier。4.4 验证 AI 格式化通道手动触发 AI 格式化命令CtrlShiftP输入AI Formatter: Format观察输出面板。如果返回了格式化后的代码说明 TaoToken 的 Key 和 API 通道都通了。如果报 401检查 Key 是否复制完整如果报 404检查baseURL是否写成了https://taotoken.net/api不要多加/v1插件通常自己拼。5. 本篇常见错排查5.1 保存不格式化快捷键却可以这是最高频的问题。原因通常是editor.formatOnSave没开或者被语言级别的设置覆盖了。检查settings.json里有没有[javascript]: { editor.formatOnSave: false }这种覆盖。另外如果项目里有.vscode/settings.json它会覆盖全局设置确认工作区文件里也开了。5.2 Prettier 报「Cannot find module prettier」VSCode 的 Prettier 插件默认使用内置的 Prettier 版本但如果你的项目里装了不同版本的 Prettier可能冲突。解决办法是在settings.json里加{ prettier.prettierPath: ./node_modules/prettier }这样插件会用项目本地的 Prettier版本和package.json一致。5.3 ESLint 和 Prettier 同时报格式错误说明.eslintrc里没有正确引入eslint-config-prettier。确认extends数组里prettier放在最后一位因为它会覆盖前面的格式规则。如果用了plugin:vue/vue3-recommended顺序应该是[eslint:recommended, plugin:vue/vue3-recommended, prettier]。5.4 Vue 文件格式化失效Vue 文件需要 VolarVue 3或 VeturVue 2插件支持。确认settings.json里有[vue]: { editor.defaultFormatter: esbenp.prettier-vscode }。如果用的是 Vetur还要加vetur.format.enable: false避免 Vetur 自己的格式化和 Prettier 打架。5.5 AI 格式化超时或返回乱码先检查网络是否能访问https://taotoken.net/api。如果 curl 能通但插件超时可能是插件的超时设置太短在settings.json里加aiFormatter.timeout: 30000。返回乱码通常是模型选择问题换一个指令跟随能力更强的模型试试。6. 长期编码与 Agent 场景的接入建议如果你不只是偶尔格式化而是长期在 VSCode 里做编码和 Agent 辅助开发建议把 Key 管理集中化。每个项目单独配 Key 容易泄露也难维护用 TaoToken 的统一 Key 通道可以一套 Key 走通多个项目。对于需要长时间运行编码任务的场景比如让 AI 帮你重构整个模块、批量生成测试用例可以了解 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding-plan接入文档在这里里面有不同编辑器和插件的配置示例https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdocKey 管理入口https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentapi-keys如果你用 Claude Code 做终端里的编码 AgentAnthropic 兼容通道的配置参考https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentclaude-code-anthropic最后说一个我踩过的坑.prettierrc里的printWidth不要设太大120 是比较舒服的值。设成 200 以上代码虽然不换行但 review 时横向滚动很痛苦。另外singleAttributePerLine在 Vue 模板里会让每个属性独占一行如果团队不习惯设成false更紧凑。配置这东西没有绝对最优团队统一才是关键。