1. Vetur、ESLint、Prettier 在 Vue 项目里到底谁管什么在 VSCode 里写 Vue最容易被三件套搞晕的地方不是装不上而是装完之后它们互相抢活。Vetur 是 Vue 的语法高亮与模板解析插件它负责让.vue文件里的template、script、style三块都有颜色、有提示、有基础格式化能力ESLint 是规则校验器它管的是“你这段代码是否符合团队约定的语法与风格规则”比如未使用变量、v-for缺key、缩进不一致Prettier 是纯格式化器它只关心排版不关心逻辑把代码按统一风格重排。问题就出在职责重叠Vetur 自带格式化、Prettier 也能格式化、ESLint 还能通过--fix改格式。三者同时开启formatOnSave保存一次文件可能被格式化三遍结果就是引号一会儿单一会儿双、分号一会儿有一会儿没、缩进在 2 和 4 之间反复横跳。我试过在一个老项目里同时开三个格式化器保存后代码直接变成“每保存一次 diff 就多几百行”的灾难现场。所以正确的思路是让 Vetur 只做语法高亮和模板解析把格式化权交给 Prettier把规则校验权交给 ESLint并且让 Prettier 的规则与 ESLint 的风格规则对齐。这样保存时只触发一次格式化ESLint 只报逻辑与规范问题不再和 Prettier 抢排版。这一篇会给出可直接复制的settings.json与.eslintrc.js片段演示保存自动修复、冲突关闭项并说明如何把 AI 辅助补全的请求地址改到 TaoToken最后用一次格式化前后对比验证规则是否生效。适合正在维护 Vue2/Vue3 项目、被格式化冲突折磨过的前端同学。2. TaoToken 前置准备把 AI 补全请求地址接进来在配置三件套之前先把 AI 辅助补全的请求地址准备好。很多同学在 VSCode 里用 AI 补全插件时默认走的是插件自带的服务地址一旦网络波动或额度受限补全就会时好时坏。把请求地址改到 TaoToken 之后补全链路会稳定很多而且和代码格式化互不干扰。TaoToken 的官网入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 。注意 API 地址后面不加任何查询参数直接作为 Base URL 使用。你需要先拿到一个 API Key。进入控制台创建密钥的页面是 https://taotoken.net/console 创建好之后复制那串sk-开头的 Key后面配置里会用到。如果你还没决定用哪个模型可以先到模型对话页面 https://taotoken.net/models 试一下补全效果确认模型对 Vue 模板和 TypeScript 的补全质量符合预期再写进配置。这里要强调一个容易踩的坑AI 补全插件和格式化插件是两条独立的链路。格式化走的是本地 Prettier/ESLint 进程不消耗任何 API 额度AI 补全才走 TaoToken 的 API。所以你把 Base URL 改到 TaoToken不会影响 Prettier 的格式化速度也不会让 ESLint 报错。两者互不干扰可以放心同时开。配置 AI 补全时通常需要填三件套Base URL、API Key、Model ID。Base URL 填https://taotoken.net/apiAPI Key 填你刚创建的sk-开头那串Model ID 填你在模型对话页面确认过的模型名。有些插件把这三项放在settings.json里有些放在插件自己的配置文件里下面一节会给出具体写法。如果你打算长期在 VSCode 里做编码和 Agent 任务可以看一下 Coding Plan 页面 https://taotoken.net/coding-plan 它更适合高频补全和长上下文场景。接入文档在 https://taotoken.net/doc 里面有各语言和各编辑器的接入示例遇到字段名对不上时可以对照查。3. 可复制配置settings.json 与 .eslintrc.js 片段这一节是全文的核心直接给可复制的配置。先看 VSCode 的settings.json路径是%APPDATA%\Code\User\settings.jsonWindows或~/Library/Application Support/Code/User/settings.jsonmacOS。把下面这段合并进你原有的配置对象里注意不要整体覆盖只追加缺失的键。{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, eslint.validate: [ javascript, typescript, vue, html ], eslint.format.enable: false, prettier.enable: true, prettier.requireConfig: true, prettier.singleQuote: true, prettier.semi: false, prettier.trailingComma: none, prettier.printWidth: 100, [vue]: { editor.defaultFormatter: esbenp.prettier-vscode }, [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [typescript]: { editor.defaultFormatter: esbenp.prettier-vscode }, vetur.format.enable: false, vetur.validation.template: false, vetur.validation.script: false, vetur.validation.style: false, vetur.ignoreProjectWarning: true, files.autoSave: off, editor.tabSize: 2, editor.detectIndentation: false }这里有几个关键点。第一editor.defaultFormatter全局设为 Prettier[vue]也设为 Prettier这样保存时格式化权统一交给 PrettierVetur 不再插手格式化。第二vetur.format.enable设为false关掉 Vetur 自带的格式化避免和 Prettier 打架。第三vetur.validation.*三项设为false把模板、脚本、样式的校验权交给 ESLint避免 Vetur 和 ESLint 同时报错。第四eslint.format.enable设为false让 ESLint 只做规则校验和fixAll不做格式化。第五prettier.requireConfig设为true强制 Prettier 读取项目根目录的配置文件保证团队风格一致。接下来是项目根目录的.prettierrc这是 Prettier 的真正规则来源settings.json里的prettier.*只是兜底{ singleQuote: true, semi: false, trailingComma: none, printWidth: 100, tabWidth: 2, useTabs: false, endOfLine: lf }然后是.eslintrc.js重点是关掉所有和 Prettier 冲突的风格规则只保留逻辑与规范规则module.exports { root: true, env: { browser: true, node: true, es2021: true }, extends: [ plugin:vue/essential, eslint:recommended, vue/typescript/recommended ], parserOptions: { ecmaVersion: 2021, sourceType: module }, rules: { no-unused-vars: warn, no-console: process.env.NODE_ENV production ? warn : off, vue/multi-word-component-names: off, vue/no-unused-components: warn, vue/require-v-for-key: error, indent: off, quotes: off, semi: off, comma-dangle: off, space-before-function-paren: off, vue/html-indent: off, vue/max-attributes-per-line: off, vue/singleline-html-element-content-newline: off } }注意indent、quotes、semi、comma-dangle、space-before-function-paren这几条全部设为off因为它们和 Prettier 的排版规则直接冲突。如果你用的是eslint-config-prettier可以直接在extends里加prettier它会自动关掉所有冲突规则比手动关更省事。手动关的好处是你能清楚看到哪些规则被关掉了排查问题时更直观。最后是 AI 补全的接入配置。以常见的 VSCode AI 补全插件为例在settings.json里追加{ aiCompletion.baseUrl: https://taotoken.net/api, aiCompletion.apiKey: sk-你的密钥, aiCompletion.model: 你的模型ID }不同插件的字段名可能不一样有的叫endpoint有的叫apiBase具体以插件文档为准。接入文档在 https://taotoken.net/doc 里面有各编辑器的字段对照表。API Key 的创建入口在 https://taotoken.net/api-keys 如果 Key 泄露了可以在这里直接吊销重建。4. 验证请求保存自动修复与格式化前后对比配置写完之后必须验证一次否则你不知道规则到底有没有生效。验证分两步先验证格式化再验证 AI 补全请求。第一步准备一个故意写乱的.vue文件比如src/components/DemoCard.vuetemplate div classcard h2{{title}}/h2 ul li v-foritem in list{{item}}/li /ul /div /template script export default { name: DemoCard, props: { title: { type: String, default: }, list: { type: Array, default: () [] } }, data() { return { count: 0 } }, methods: { add() { this.count } } } /script style scoped .card { padding: 16px; } /style注意这段代码里li v-foritem in list缺了:key缩进是 4 空格引号是双引号add方法后面没有空格。保存这个文件观察三个结果。第一个结果缩进从 4 空格变成 2 空格双引号变成单引号这是 Prettier 生效的标志。第二个结果li v-for那一行出现黄色波浪线提示vue/require-v-for-key这是 ESLint 生效的标志。第三个结果保存后add方法没有自动补空格因为space-before-function-paren被关掉了这是冲突规则被正确关闭的标志。如果你在保存时看到右下角弹出 ESLint 被禁用的提示点击它选择Allow Everywhere否则 ESLint 不会在保存时执行fixAll。这个提示在第一次配置时几乎必现很多人以为配置错了其实只是权限没给。第二步验证 AI 补全请求。在.vue文件里输入this.看补全列表是否正常弹出。如果弹出正常说明 Base URL 和 Key 都通了。如果补全不弹或报错打开 VSCode 的输出面板选择对应插件的日志通道看请求地址是不是https://taotoken.net/api以及返回状态码是不是 200。常见的错误是 Base URL 多写了/v1或少了/api这两种都会导致 404。第三步做一次格式化前后对比。在终端里执行git diff src/components/DemoCard.vue你会看到 diff 里只有缩进、引号、v-for的:key提示没有大面积的无关改动。如果 diff 里出现了大量你不想看到的改动说明还有格式化器在抢活回到settings.json检查vetur.format.enable和eslint.format.enable是否都设为了false。验证通过后你可以把editor.formatOnSave保持开启日常写代码时保存即格式化ESLint 的fixAll会自动修掉能自动修的问题修不掉的会以波浪线提示。这样三件套就各司其职了Vetur 管高亮Prettier 管排版ESLint 管规则AI 补全走 TaoToken。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth配置过程中最容易遇到的四类报错逐个说清楚原因和解法。第一类401 Unauthorized。这个报错几乎都出现在 AI 补全链路上原因是 API Key 不对或没带上。检查三处Key 是不是sk-开头、有没有多余空格、有没有过期。如果 Key 是在 https://taotoken.net/api-keys 创建的确认它没有被吊销。还有一种情况是插件把 Key 存在了系统钥匙串里settings.json里写的是旧 Key两边不一致这时以钥匙串里的为准或者清掉钥匙串重新填。第二类local proxy failed。这个报错说明插件尝试走本地代理端口但本地没有代理进程在监听。常见于之前配过代理、后来关掉了但插件配置里还留着http://127.0.0.1:xxxx。解法是把插件配置里的代理项清空Base URL 直接填https://taotoken.net/api不要经过任何本地端口。注意这里说的是插件自身的代理配置不是让你去配网络代理两者不是一回事。第三类reading choices或Cannot read properties of undefined (reading choices)。这个报错说明请求发出去了但返回体里没有choices字段通常是 Base URL 写错导致返回了 HTML 错误页或者 Model ID 填了一个不存在的模型。检查 Base URL 是不是https://taotoken.net/apiModel ID 是不是在模型对话页面确认过的名字。如果 Base URL 多写了/v1有些插件会拼成/v1/chat/completions而正确路径可能不带/v1就会返回 404 页面解析时自然读不到choices。第四类OAuth相关报错。有些 AI 插件默认走 OAuth 登录流程配置里如果同时开了 OAuth 和 API Key会互相冲突。解法是关掉 OAuth 登录选项只用 API Key 模式。在插件设置里找auth mode或login method切换成API Key。切换后重启 VSCode让插件重新读取配置。除了这四类还有一个高频问题是“保存后格式化两次”。原因是editor.formatOnSave和eslint.codeActionsOnSave.source.fixAll.eslint同时触发而 ESLint 的fixAll又调用了格式化。解法是把eslint.format.enable设为false并且确认editor.defaultFormatter只有一个。如果[vue]里写的是 Vetur全局写的是 Prettier保存时就会先走 Vetur 再走 Prettier改两次。排查时有一个通用技巧打开 VSCode 的命令面板执行Developer: Show Running Extensions看哪些插件处于激活状态。如果 Vetur、ESLint、Prettier 三个都激活且都注册了格式化器就回到settings.json把 Vetur 的格式化关掉。命令面板里还可以执行Format Document With...看当前文件默认用哪个格式化器如果不是 Prettier说明[vue]的配置没生效。最后提醒一句.eslintrc.js里的extends顺序会影响规则优先级后面的覆盖前面的。如果你加了prettier它必须放在最后否则它关掉的冲突规则会被前面的配置重新打开。这个顺序问题很隐蔽报错不会直接告诉你只会表现为“明明关了semi还是报分号”。6. 把三件套和 AI 补全串成日常链路配置稳定之后日常写 Vue 的链路是这样的打开.vue文件Vetur 负责高亮和模板解析你写代码时 AI 补全通过 TaoToken 的 API 返回建议保存时 Prettier 统一排版ESLint 自动修掉能修的问题并标出修不掉的。整个过程只有一次格式化不会出现保存一次 diff 爆炸的情况。如果你在团队里推广这套配置建议把.prettierrc和.eslintrc.js提交到仓库settings.json里的个人偏好项比如字体大小、主题不要提交只提交和格式化、校验相关的键。这样新同学拉下代码后装好三个插件把settings.json里的格式化相关配置复制进去就能得到一致的保存行为。AI 补全的 Base URL 和 Key 属于个人配置不要提交到仓库。如果团队统一用 TaoToken可以把 Base URL 写进项目文档Key 让每个人自己去 https://taotoken.net/api-keys 创建。接入文档在 https://taotoken.net/doc 里面有 VSCode 各插件的字段对照遇到字段名对不上时直接查。长期高频编码的话Coding Plan 页面 https://taotoken.net/coding-plan 有更详细的额度说明。这套配置我在 Vue2 和 Vue3 项目里都跑过Vue3 的script setup语法下 Prettier 和 ESLint 的配合也没问题唯一要注意的是vue/typescript/recommended对script setup的规则覆盖如果报vue/script-setup-uses-vars相关错误把vue/script-setup-uses-vars设为error即可。格式化前后对比用git diff看只要 diff 里没有无关改动就说明三件套的职责边界划清楚了。