1. Vue 项目保存自动格式化总失效先理清 ESLint 与 Prettier 的职责边界如果你在 VS Code 里写 Vue大概率遇到过这种场景明明装了 ESLint 和 Prettiersettings.json也配了editor.formatOnSave可保存时要么纹丝不动要么两个插件互相打架——Prettier 把单引号改成双引号ESLint 又改回来控制台红黄波浪线此起彼伏。这个问题的根源是没搞清「谁负责格式化、谁负责规范校验」这条链路。先把概念对齐。ESLint 是代码质量与规范检查器它关心的是「你有没有用未定义变量」「缩进是不是 2 空格」「有没有多余分号」这类规则通过eslint --fix能修一部分。Prettier 是纯格式化器它不关心代码逻辑只负责把代码排版成统一风格——换行、引号、缩进宽度、行宽。两者职责有重叠区比如缩进、引号一旦都开启自动修复就会争夺「最终写入权」。Vue 单文件组件更特殊一个.vue文件里同时有template、script、style三块每块的语言不同格式化器需要分别处理。老项目常用 Vetur新项目转向 VolarVue - Official两者对格式化器的接管方式不一样。这就是为什么很多人照抄一份settings.json在自己机器上却不生效——插件组合和 Vue 版本对不上。我试过的稳定方案是让 ESLint 管规范、Prettier 管排版通过eslint-config-prettier关掉 ESLint 里和 Prettier 冲突的规则保存时只触发一次source.fixAll.eslint由 ESLint 内部调用 Prettier。这样职责单一不会来回改。本文要解决的核心检索词就是「vscode vue eslint prettier 保存自动格式化配置」。适合谁看正在用 Vue2/Vue3 写业务、被保存格式化折磨、想要一份能直接复制落地的配置的前端。我会从插件组合讲到settings.json关键项再给一个「故意写错缩进和分号、保存后自动修复」的验证动作最后说明怎么把settings.json里的模型服务 endpoint 统一改到 TaoToken让格式化之外的 AI 辅助能力也走同一条 Key 通道。先明确一个判断标准保存后代码被改动了、且没有报错才算配置成功。如果保存后弹出一堆 ESLint 报错但代码没变说明fixAll没触发如果代码变了但报错还在说明 Prettier 和 ESLint 规则冲突没关干净。下面按这个标准一步步搭。2. 前置准备插件组合与 TaoToken 统一 Key 通道接入动手改配置前先把插件装对。VS Code 插件市场里名字相近的很多装错一个就白折腾。我列一下 Vue 项目自动格式化必需的最小集合以及各自的作用。插件扩展 ID作用是否必需ESLintdbaeumer.vscode-eslint读取.eslintrc.js提供source.fixAll.eslint必需Prettieresbenp.prettier-vscode提供格式化能力被 ESLint 调用必需Vue - OfficialVue.volarVue3 语言支持接管.vue格式化Vue3 必需Veturoctref.veturVue2 语言支持Vue2 必需注意 Vetur 和 Volar 不要同时启用会抢.vue文件的控制权。Vue2 项目用 VeturVue3 项目用 Volar这是硬性分界。装完插件后settings.json里[vue].editor.defaultFormatter要指向对应插件。接下来是 TaoToken 的接入。TaoToken 是一个统一的模型服务通道提供 OpenAI 兼容的 API 接口你可以用同一个 Key 调用多种模型。它的价值在于前端项目里除了格式化往往还需要 AI 辅助——比如让模型帮你补全组件、解释报错、生成单测。如果每个工具各配一套 Key 和 endpoint管理起来很乱。把 endpoint 统一到 TaoToken用一把 Key 走所有 AI 能力配置就干净了。接入前你需要准备三样东西我称之为「三件套」Base URLhttps://taotoken.net/api这是所有请求的根地址注意不要带末尾斜杠。API Key在 TaoToken 控制台的 API Keys 页面创建形如sk-开头的一串字符。Model ID你要调用的模型标识比如claude-sonnet-4-5或gpt-4o具体以控制台模型列表为准。获取路径打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册登录后进入控制台在 API Keys 菜单下点「创建密钥」复制保存。模型列表在「模型对话」页面能看到当前可用的 Model ID。文档在接入文档页里面有各语言的调用示例。为什么要在讲格式化的文章里提这个因为很多 VS Code 的 AI 插件比如 Continue、Cline都支持自定义 OpenAI 兼容 endpoint。你把它们的 Base URL 填成 TaoToken 的地址Key 填同一把就能在写 Vue 组件时直接让 AI 补代码而不用切来切去。格式化负责「代码整齐」AI 负责「代码写对」两条链路共用一套凭证这是我想推荐的工程习惯。如果你只是想把格式化跑通TaoToken 这部分可以先跳过等格式化稳定了再回来配。但如果你打算长期用 AI 辅助编码建议一开始就把 Key 通道规划好后面接 Coding Plan 或 Claude Code 时不用重复折腾。3. 可复制配置settings.json 关键项与 .eslintrc.js 落地这一节是全文的核心所有片段都可以直接复制。先给settings.json再给.eslintrc.js最后给package.json的依赖。路径说明settings.json在项目根目录的.vscode/settings.json工作区级或者用户级%APPDATA%\Code\User\settings.json。我推荐用工作区级跟着项目走团队协作时一致。先看settings.json的完整片段。注意 JSON 里不能有注释下面为了讲解我单独说明每个关键项实际复制时去掉注释。{ editor.formatOnSave: true, editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, eslint.validate: [ javascript, javascriptreact, vue ], eslint.run: onSave, prettier.singleQuote: true, prettier.semi: false, prettier.printWidth: 120, prettier.tabWidth: 2, prettier.useTabs: false, [vue]: { editor.defaultFormatter: Vue.volar }, [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [json]: { editor.defaultFormatter: vscode.json-language-features }, files.autoSave: off }逐项解释。editor.formatOnSave打开保存格式化但真正干活的是editor.codeActionsOnSave里的source.fixAll.eslint。新版 VS Code 要求这个值写成explicit或always老写法true会提示弃用。eslint.validate里必须包含vue否则.vue文件不会被 ESLint 检查。eslint.run设为onSave避免打字时频繁触发卡顿。prettier.*这几项是给 Prettier 的默认风格单引号、不加分号、行宽 120、缩进 2 空格、不用 Tab。这些值要和.eslintrc.js里的规则对齐否则会冲突。[vue].editor.defaultFormatter指向Vue.volarVue3或octref.veturVue2这是格式化.vue文件的入口。然后是.eslintrc.js。这个文件决定 ESLint 检查哪些规则以及哪些规则交给 Prettier。module.exports { root: true, env: { node: true, browser: true, es2021: true }, extends: [ plugin:vue/vue3-essential, eslint:recommended, vue/standard, prettier ], parserOptions: { ecmaVersion: 2021, sourceType: module }, rules: { no-console: process.env.NODE_ENV production ? warn : off, no-debugger: process.env.NODE_ENV production ? warn : off, indent: off, space-before-function-paren: off, eol-last: off, vue/multi-word-component-names: off, comma-dangle: off, semi: off, quotes: off }, globals: { // 在这里声明全局变量例如 AMap: true } }关键点extends数组最后一项必须是prettier它的作用是关闭 ESLint 中所有和 Prettier 冲突的格式化规则。indent、semi、quotes、comma-dangle这些全部设为off交给 Prettier 管。vue/multi-word-component-names关掉是因为很多项目组件名就是单词开着会一直报错。最后是package.json的 devDependencies装这些包{ devDependencies: { babel/eslint-parser: ^7.22.0, vue/cli-plugin-eslint: ~5.0.8, vue/eslint-config-standard: ^8.0.1, eslint: ^8.57.0, eslint-config-prettier: ^9.1.0, eslint-plugin-import: ^2.29.1, eslint-plugin-node: ^11.1.0, eslint-plugin-promise: ^6.1.1, eslint-plugin-vue: ^9.20.0, prettier: ^3.2.5 } }注意eslint-config-prettier这个包必须装extends里的prettier就是它。版本不用太纠结npm install会自动解析兼容版本。装完后重启 VS Code让 ESLint 插件重新加载配置。到这里格式化链路就搭好了。下一节验证它是否真的工作。4. 验证请求新建 .vue 文件故意写错保存后确认自动修复配置写完不验证等于没配。这一节给一个可复现的验证动作你照着做一遍就能确认整条链路是否通。第一步在项目src/components下新建一个文件TestFormat.vue故意写得不规范缩进用 4 空格、每行末尾加分号、字符串用双引号、函数括号前加空格。template div classtest p{{ msg }}/p /div /template script export default { name: TestFormat, data() { return { msg: hello, }; }, methods: { greet () { console.log(hi); }, }, }; /script style scoped .test { color: red; } /style第二步按CtrlS保存。观察文件变化。如果配置生效保存后代码应该被自动改成缩进变 2 空格、行尾分号消失、双引号变单引号、greet ()变成greet()。改完后大致是这样template div classtest p{{ msg }}/p /div /template script export default { name: TestFormat, data() { return { msg: hello } }, methods: { greet() { console.log(hi) } } } /script style scoped .test { color: red; } /style第三步检查有没有报错。打开 VS Code 的「问题」面板CtrlShiftM如果配置正确这个文件不应该有红色错误。如果还有黄色警告多半是no-console在生产环境下的提示开发环境不影响。第四步验证 ESLint 确实在管规范。在script里加一行const unused 1保存后应该出现unused is assigned a value but never used的报错。这说明 ESLint 的eslint:recommended规则在工作而格式化部分由 Prettier 接管两者没打架。如果保存后代码没变按这个顺序排查先看右下角状态栏 ESLint 图标是不是打勾再看「输出」面板选 ESLint 有没有报配置错误最后确认.vscode/settings.json是不是被用户级设置覆盖了。工作区级优先级高于用户级但如果你在用户级里也配了editor.defaultFormatter可能冲突。验证通过后这套配置就可以在团队里推广了。把.vscode/settings.json、.eslintrc.js、package.json三个文件提交到仓库新同事拉下来装完依赖就能用不用口头传配置。5. 本篇常见错排查401、local proxy failed、reading choices 与 OAuth 报错配置过程中最容易卡住的不是格式化本身而是 AI 辅助链路接入时的报错。这一节把几个高频错误对照着讲每个都给定位方法和修复动作。报错一401 Unauthorized。这个几乎都是 Key 的问题。表现是请求模型接口时返回{error:{message:Invalid API key,type:invalid_request_error}}。排查顺序先确认 Key 有没有复制完整sk-开头那一整串别漏字符再确认请求头里Authorization: Bearer sk-xxx格式对不对最后确认这个 Key 在 TaoToken 控制台是不是被禁用或额度耗尽。修复动作去控制台 API Keys 页面重新创建一个替换配置里的旧 Key。报错二local proxy failed。这个报错通常出现在 VS Code 的 AI 插件如 Continue里意思是插件尝试走本地代理转发请求但代理没起来或端口被占。定位方法看插件设置里有没有proxy或apiBase字段被填成了http://localhost:xxxx。修复动作把 Base URL 直接改成https://taotoken.net/api不要经过本地代理。如果你确实需要本地转发确认那个进程在运行且端口没冲突。报错三reading choices 或 Cannot read properties of undefined (reading choices)。这是解析响应时拿不到choices字段。原因通常是接口返回的不是标准 OpenAI 格式或者请求根本没成功但代码没检查状态码。定位方法在插件日志里看原始响应体。如果返回的是 HTML 错误页或空对象说明 endpoint 填错了。修复动作确认 Base URL 是https://taotoken.net/api且请求路径拼成了/v1/chat/completionsOpenAI 兼容格式。有些插件要求 Base URL 带/v1有些不带按插件文档调整。报错四OAuth 相关错误比如 invalid_grant 或 token expired。这类报错出现在用 OAuth 登录方式的工具里比如某些 Claude Code 接入场景。OAuth token 有有效期过期后需要重新授权。修复动作在工具里执行登出再登录或者改用 API Key 方式接入。用 TaoToken 的 Key 通道可以绕开 OAuth 的刷新问题因为 Key 是长期有效的不依赖浏览器授权流程。把这几类报错对照着排查AI 辅助链路基本能通。记住一个原则先确认 Key 和 Base URL 正确再看请求格式最后看响应解析。大部分问题出在第一步。6. 把 AI 辅助能力接到同一条通道从格式化到 Coding Plan格式化跑通、AI 插件也能调通之后你可能会想能不能让这些能力更系统地用起来比如让 AI 帮我写整个组件、做代码审查、甚至跑 Agent 任务。这就涉及到 TaoToken 的 Coding Plan。Coding Plan 是面向长期编码场景的套餐适合每天都要用 AI 辅助写代码的开发者。它的价值在于你不用每次单独买模型额度而是用一个套餐覆盖多种模型的调用配合统一的 Key 通道在 VS Code、命令行、CI 里都能用同一套凭证。对于前端项目来说这意味着你可以在写 Vue 组件时让模型补全在 review 时让模型检查规范在写单测时让模型生成用例全部走同一个 endpoint。接入方式还是那三件套Base URL 填https://taotoken.net/apiKey 用控制台创建的Model ID 按需选。如果你用 Claude Code 这类命令行工具配置里也是填这三项。文档在接入文档页有详细说明模型对话页面可以先用网页版试一下模型效果确认可用再写进配置。回到格式化这件事。我建议的工程习惯是把.vscode/settings.json、.eslintrc.js、.prettierrc这三个文件作为项目标配提交到仓库让格式化规范跟着代码走。AI 辅助的配置Key、Base URL放在本地用户级设置里不要提交避免泄露。这样团队协作时代码风格统一但每个人的 AI 凭证各自管理。最后给一个实用技巧如果你在多个项目间切换可以把 ESLint 和 Prettier 的配置抽成一个共享的 npm 包各项目extends它。这样改一次规则所有项目生效。TaoToken 的 Key 通道也是同理用环境变量管理不同项目读同一个变量换 Key 时只改一处。整套配置落地后你写 Vue 的体验会变成保存即格式化规范自动修AI 随时补。剩下的就是专注写业务逻辑了。