企业官网建设流程全解析

1. Vetur、ESLint、Prettier 在 Vue 项目里到底谁管什么

刚接触 Vue 项目的人，打开一个.vue文件，大概率会经历三个阶段：先是发现代码全是灰白色，没有任何高亮；然后装了 Vetur，颜色回来了，但保存时格式乱跳；最后又装了 ESLint 和 Prettier，结果三个插件互相打架，保存一次代码缩进变一次，甚至报出一堆莫名其妙的格式错误。这不是你配置水平的问题，而是这三个工具职责边界没理清。

先把角色分清楚。Vetur 是 Vue 单文件组件的语言支持插件，它负责.vue文件里<template>、<script>、<style>三块的高亮、补全、跳转，同时它自己也带了一套格式化能力，可以调用js-beautify-html、prettier、vscode-typescript等不同引擎去格式化各个区块。ESLint 是代码质量与语法规范的检查器，它关心的是你有没有用未定义变量、有没有写==、缩进是否符合团队规则，它既能报错也能自动修复一部分问题。Prettier 是纯粹的代码格式化器，它不关心逻辑对错，只关心换行、引号、分号、缩进这些排版问题。

问题就出在 Vetur 自带格式化、Prettier 也格式化、ESLint 还能修复格式，三者都能改你的代码，谁先谁后、谁覆盖谁，如果没有明确指定，保存时就会来回拉扯。我试过最典型的现象是：Prettier 把单引号改成双引号，ESLint 又要求单引号，保存一次改一次，编辑器右下角一直转圈。

所以正确的思路不是三个都开满，而是分层：让 ESLint 管规则和逻辑层面的问题，让 Prettier 管排版，让 Vetur 只负责 Vue 文件的语法支持和区块分派，把 Vetur 自带的格式化关掉或明确指定引擎。这样保存时只有一条格式化链路，冲突自然消失。

这一篇会交付可直接复制的settings.json和.eslintrc片段，演示保存触发格式化的完整验证过程，同时把多工具链里最烦人的鉴权配置用 TaoToken 统一 Key 管理起来。如果你同时用 Claude Code、Cline 这类编码工具，Key 散落在各个配置文件里，改一次要翻好几个地方，后面会给出统一通道的做法。

适合谁看：正在用 VSCode 写 Vue2 或 Vue3 项目、被保存格式化搞崩溃、想让团队配置一次统一的同学。下面从插件安装后的第一份配置开始。

2. TaoToken 前置：统一 Key 与 API 通道管理多工具链鉴权

在讲格式化配置之前，先把这个环节说清楚，因为它和后面的工具链配置直接相关。你在 Vue 项目里可能不只用一个 AI 编码工具：VSCode 里装了 Cline 或 Continue，终端里跑着 Claude Code，偶尔还用 Codex 做代码补全。每个工具都要填 Base URL、API Key、Model ID，Key 一多就乱，换一次 Key 要改四五个地方，还容易把旧 Key 提交到 Git。

TaoToken 在这里的作用是提供一个统一的 API 通道和 Key 管理入口。你只需要在 TaoToken 控制台创建一个 Key，然后把这个 Key 和对应的 Base URL 填到各个工具里，不用每个工具单独去申请。官网地址是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 入口是 https://taotoken.net/api ，注意 API 地址不带 UTM 参数，配置时直接写这个。

具体操作路径：先打开控制台 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，在里面创建 API Key，然后到 API Keys 页面 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 复制你的 Key。这个 Key 就是后面所有工具共用的凭证。

为什么要在格式化文章里讲这个？因为现代 Vue 项目的工具链早就不是只有 Vetur、ESLint、Prettier 了。你在 VSCode 里可能同时开着 Cline 做代码生成，终端里用 Claude Code 做重构，这些工具都需要模型接入配置。如果每个工具都单独配一套 Key，出问题时你根本不知道是格式化冲突还是鉴权失败。统一 Key 之后，排障路径清晰：格式化问题看 VSCode 配置，鉴权问题看 TaoToken 的 Key 和 Base URL。

对于长期做编码和 Agent 任务的场景，可以考虑 Coding Plan，入口在 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ，它更适合需要持续调用模型的开发流程。如果你只是想先验证模型能不能通，用模型对话页面 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite 发一条消息就能确认 Key 是否有效。

接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，里面写了不同工具的 Base URL 填法。Claude Code 的接入可以参考 https://taotoken.net/claudecode-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=claudecode-anthropic&utm_campaign=rewrite ，里面有 Anthropic 协议相关的配置说明。

这里要强调一点：TaoToken 是 API 通道和 Key 管理工具，不是代码编辑器，也不替代 Vetur、ESLint、Prettier 的任何功能。它解决的是多工具鉴权分散的问题，格式化冲突还是要在 VSCode 配置里解决。两者是不同层面的东西，不要混在一起理解。

把 Key 准备好之后，下面进入 VSCode 的实际配置。我会给出完整的settings.json片段，并解释每一段为什么这么写。

3. 可复制配置：settings.json 与 .eslintrc 完整片段

这一节是全文的核心，配置写对了，冲突就解决了一大半。先明确文件位置：VSCode 的用户级设置在settings.json，通过Ctrl+Shift+P输入Open User Settings (JSON)打开；项目级设置在项目根目录的.vscode/settings.json。团队协作建议用项目级，这样每个人拉下来配置一致。ESLint 规则放在项目根目录的.eslintrc.js或.eslintrc.json。

先给出一份经过验证的settings.json片段，你可以直接追加到原有配置对象里，注意 JSON 不能有注释，下面为了讲解方便才标注：

{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "eslint.validate": [ "javascript", "javascriptreact", "vue", "typescript", "typescriptreact" ], "prettier.singleQuote": true, "prettier.semi": false, "prettier.printWidth": 100, "prettier.trailingComma": "none", "[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, "files.autoSave": "off", "editor.tabSize": 2, "editor.detectIndentation": false }

逐段解释关键点。editor.defaultFormatter设为esbenp.prettier-vscode，意思是全局默认用 Prettier 格式化，这样.vue、.js、.ts都走同一条链路。editor.codeActionsOnSave里的source.fixAll.eslint设为"explicit"，这是新版 VSCode 的要求，旧写法true会提示已弃用。eslint.validate里必须包含vue，否则 ESLint 不会检查.vue文件。

vetur.format.enable设为false是关键一步。Vetur 自带的格式化关掉之后，.vue文件里的<template>、<script>、<style>都交给 Prettier 处理，避免 Vetur 和 Prettier 两套引擎打架。vetur.validation三项设为false是因为模板、脚本、样式的校验交给 ESLint 和 vue-tsc 更统一，Vetur 的校验容易和 ESLint 重复报错。

editor.detectIndentation设为false很重要。如果开着，VSCode 会根据文件内容自动猜缩进，导致同一个项目里有的文件 2 空格有的 4 空格，Prettier 和 ESLint 都会报错。固定editor.tabSize为 2，和 Prettier 默认保持一致。

接下来是.eslintrc.js片段，重点是让 ESLint 的格式规则和 Prettier 不冲突：

module.exports = { root: true, env: { node: true, browser: true, es2021: true }, extends: [ 'plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended' ], parserOptions: { parser: '@babel/eslint-parser', requireConfigFile: false, ecmaVersion: 2021, sourceType: 'module' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'vue/multi-word-component-names': 'off' } }

plugin:prettier/recommended这一行是核心，它做了两件事：把 Prettier 作为 ESLint 规则运行，同时关掉所有和 Prettier 冲突的 ESLint 格式规则。这样 ESLint 只报逻辑和规范问题，格式问题全部交给 Prettier，不会出现单引号双引号来回改的情况。

如果你用的是 Vue3 + Vite，extends里把plugin:vue/essential换成plugin:vue/vue3-essential。如果项目用 TypeScript，再加@vue/eslint-config-typescript。

依赖安装命令，在项目根目录执行：

npm install -D eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier @babel/eslint-parser

装完之后，VSCode 里还需要装三个扩展：Vetur（octref.vetur）、ESLint（dbaeumer.vscode-eslint）、Prettier（esbenp.prettier-vscode）。注意 Vetur 和 Volar 不要同时开，Vue3 项目建议用 Volar，Vue2 用 Vetur，两者冲突会导致.vue文件高亮和格式化异常。

配置写完后，右下角如果提示 ESLint 被禁用，点击提示选择Allow Everywhere，让 ESLint 在项目里生效。这一步不做的话，source.fixAll.eslint不会执行。

到这里配置部分完成。下一节验证保存格式化是否真的生效。

4. 验证请求：保存触发格式化与成功结果确认

配置写完不代表生效，必须实际触发一次保存，看格式化链路是否按预期走。这一节给出可复现的验证步骤，以及成功和失败分别长什么样。

先准备一个故意写乱的.vue文件，比如src/components/TestFormat.vue：

<template> <div class="box"> <p v-for="item in list" :key="item.id">{{item.name}}</p> </div> </template> <script> export default { name: 'testFormat', data() { return { list: [{id:1,name:'a'},{id:2,name:'b'}] } } } </script> <style scoped> .box{color:red;font-size:14px} </style>

这个文件里有多余空格、缩进混乱、对象属性没换行、CSS 没格式化。保存前先确认 VSCode 右下角显示的格式化器是 Prettier，如果显示 Vetur 或其他，说明[vue]的editor.defaultFormatter没生效。

按Ctrl+S保存，观察文件变化。成功的结果应该是：<template>里的属性对齐、缩进统一为 2 空格；<script>里的对象属性按 Prettier 规则换行，单引号保留，末尾无分号；<style>里的 CSS 展开成多行。同时底部状态栏不会出现红色 ESLint 报错。

如果保存后文件没变化，先检查editor.formatOnSave是否为true，再检查[vue]段是否被后面的配置覆盖。VSCode 的配置是后面的覆盖前面的，如果你在文件末尾又写了一个[vue]段指向 Vetur，前面的 Prettier 就失效了。

验证 ESLint 自动修复，可以在<script>里加一行var a = 1，保存后如果 ESLint 配置了no-var规则，应该自动改成let a = 1。如果没改，打开命令面板运行ESLint: Restart ESLint Server，再保存一次。

验证 Prettier 和 ESLint 不冲突，重点看引号和分号。在<script>里写const s = "hello";，保存后如果变成const s = 'hello'且分号消失，说明 Prettier 生效且 ESLint 没有反向要求双引号。如果保存后引号来回变，说明.eslintrc里缺少plugin:prettier/recommended，或者eslint-config-prettier没装。

再验证一下多工具链的鉴权是否通。如果你在 VSCode 里用 Cline 或 Continue，把 TaoToken 的 Base URL 填成https://taotoken.net/api，Key 填控制台创建的那个，Model ID 按文档填。保存配置后发一条测试消息，能正常返回就说明 Key 和通道没问题。这一步和格式化是独立的，但放在一起验证可以确认整个开发环境没有遗漏。

成功的结果可以这样确认：格式化后文件结构清晰、缩进一致、无 ESLint 红色波浪线；AI 工具能正常返回内容；Git diff 里只有你实际改的逻辑，没有格式化带来的大面积无关变更。如果 diff 里出现大量引号、分号、缩进变化，说明格式化规则还没统一，需要回到上一节检查配置。

5. 本篇常见错排查：401、local proxy failed、reading choices、OAuth

配置过程中最容易卡住的不是格式化本身，而是各种报错。这一节按真实报错逐条排查，每条给出原因和解决动作。

401 Unauthorized。这个报错通常出现在 AI 工具调用模型时，不是格式化问题。原因一般是 Key 填错、Key 过期、或者 Base URL 写成了带路径的地址。检查 TaoToken 控制台里的 Key 是否复制完整，Base URL 是否写成https://taotoken.net/api，不要多加/v1或斜杠。如果 Key 没问题，到 API Keys 页面重新生成一个再试。接入文档里有各工具的 Base URL 填法，对照检查。

local proxy failed。这个报错说明工具在尝试走本地代理但失败了。先检查 VSCode 的http.proxy设置是否为空，如果之前配过代理，清掉。再检查系统环境变量里有没有HTTP_PROXY、HTTPS_PROXY，有的话临时取消再试。TaoToken 的 API 地址是直连的，不需要额外代理配置，填了反而会失败。

reading choices 相关报错。这类报错一般是模型返回结构不符合工具预期，常见于 Model ID 填错。比如工具期望 OpenAI 格式的choices字段，但你填的 Model ID 对应的是 Anthropic 协议，返回结构不同。解决方法是确认工具支持的协议，Claude Code 走 Anthropic 协议，参考 https://taotoken.net/claudecode-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=claudecode-anthropic&utm_campaign=rewrite 里的配置；其他工具走 OpenAI 兼容协议，Model ID 按文档填。

OAuth 相关报错。有些工具默认走 OAuth 登录流程，如果你用的是 API Key 方式，需要在工具设置里切换到 API Key 模式，关掉 OAuth。比如 Claude Code 的auth.json里如果残留 OAuth token，会优先走 OAuth 而不是你的 Key。检查配置文件，确保只保留 Key 方式。

ESLint 不生效。右下角没有 ESLint 提示，或者保存不修复。先确认扩展装了且启用，然后运行ESLint: Restart ESLint Server。如果项目里没有.eslintrc文件，ESLint 不会工作。再检查eslint.validate里有没有vue。

Prettier 和 Vetur 冲突。表现是保存后格式反复变。确认vetur.format.enable为false，[vue]的editor.defaultFormatter为esbenp.prettier-vscode。如果用的是 Volar，Vetur 要禁用，两者不能共存。

保存后缩进变成 4 空格。检查editor.detectIndentation是否为false，editor.tabSize是否为 2。如果项目里有.editorconfig文件，里面的indent_size也会影响，确保和 Prettier 一致。

Cline MCP 配置报错。如果你用 Cline 的 MCP 功能，配置里需要 Base URL、Key、Model ID 三件套齐全。Base URL 填https://taotoken.net/api，Key 填 TaoToken 的 Key，Model ID 按文档。缺任何一个都会报连接失败。MCP 不要直连生产数据库，这是安全底线。

Codex auth.json 配置。Codex 的auth.json里如果同时有 OAuth 和 API Key，会优先 OAuth。清掉 OAuth 字段，只保留 Key 和 Base URL。文件路径一般在用户目录下的.codex/auth.json，改完重启工具。

CC Switch 配置。CC Switch 用来切换不同的模型通道，配置时同样需要 Base URL、Key、Model ID。切换后如果报错，先确认当前选中的通道 Key 是否有效，再到模型对话页面发一条消息验证。

排障的核心思路是分层：格式化问题看 VSCode 和 ESLint 配置，鉴权问题看 Key 和 Base URL，协议问题看 Model ID 和工具支持的协议。不要把所有报错都当成格式化冲突，那样会越改越乱。

6. 语义一致 CTA：把 Key 和格式化配置一次固化

配置这件事，最怕的是这次调通了，换台机器或者过两周又乱了。所以最后一步是把配置固化下来，让团队和未来的自己都能一键复用。

格式化部分，把.vscode/settings.json和.eslintrc.js提交到 Git 仓库，这样每个人拉下来配置一致。依赖写进package.json的devDependencies，新同学npm install之后直接可用。VSCode 扩展可以在.vscode/extensions.json里推荐，列出 Vetur、ESLint、Prettier 三个扩展 ID，打开项目时 VSCode 会提示安装。

鉴权部分，把 TaoToken 的 Key 统一管理起来。控制台在 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，API Keys 页面在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。Key 不要提交到 Git，用环境变量或者本地配置文件管理。各个工具的 Base URL 统一填https://taotoken.net/api，Model ID 按接入文档 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite 填。

如果你需要长期做编码和 Agent 任务，Coding Plan 入口在 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ，适合持续调用的场景。只是想验证模型通不通，用模型对话 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite 发一条消息即可。

最后给一个实用技巧：在项目根目录加一个.prettierrc文件，把 Prettier 配置从settings.json里抽出来，这样不依赖 VSCode 也能用命令行npx prettier --write .格式化整个项目。CI 里加一步npx prettier --check .和npx eslint .，格式问题在提交前就拦住，不用等到 code review 才发现。

配置固化之后，你换机器只需要三步：拉代码、npm install、在工具里填 TaoToken 的 Key 和 Base URL。格式化规则和鉴权通道都跟着项目走，不会再出现保存一次格式变一次的情况。