1. VS Code 写 HTML 的两类刚需预览插件与 AI 补全插件怎么配在 VS Code 里写 HTML很多人一开始只装一个 Live Server 就以为够了。实际写起来你会发现真正高频的需求分成两条线一条是「我改完代码浏览器能不能立刻看到效果」另一条是「我写标签和样式的时候有没有 AI 帮我把补全、解释、改错一起做了」。这两条线如果各自为战你会陷入一个很别扭的状态——预览插件管刷新AI 插件管补全但 AI 插件要你填 API Key、填 Base URL、选模型每个插件填一遍换台机器又得重来。这篇就围绕「在 VS Code 中运行 html 用到的插件」这个具体场景把本地实时预览和 AI 代码补全两件事一次讲清楚。预览侧我会给出 Live Server、Open in Browser、Code Runner 这几个经典插件的配置方式AI 补全侧用 TaoToken 作为统一的 Key 和 API 通道你只需要在 TaoToken 拿一个 Key就能同时喂给 Continue、Cline 这类补全插件不用为每个插件单独申请账号。适合刚接触 VS Code 前端开发、想把「预览 补全」一次性配好的人也适合已经在用 AI 插件但被多 Key 管理搞烦的人。核心检索词先摆出来VS Code 运行 HTML 插件、Live Server 实时预览、VS Code AI 代码补全插件配置、TaoToken 统一 Key。这几个词基本覆盖了你搜这类问题时会敲的内容。下面按「先解决预览再解决补全最后验证两者同时生效」的顺序走每一步都给可复制的配置片段。先说清楚一个容易混淆的点Live Server 和 Open in Browser 不是二选一的关系。Open in Browser 是「把当前 HTML 文件用浏览器打开」它不启动服务器改完代码要手动刷新Live Server 是「起一个本地静态服务器监听文件变化自动刷新」。写纯静态页面时 Live Server 更省事但有些场景比如你要用 file:// 协议测某些行为Open in Browser 反而更直接。Code Runner 则是「运行代码片段」对 HTML 来说它更多是配合其他语言用的单独跑 HTML 意义不大但如果你一个文件里混了 JS 想快速执行它有用。AI 补全侧的逻辑不一样。VS Code 本身不带大模型补全你得装插件插件再连模型服务。传统做法是每个插件去对应厂商开账号、拿 Key、填配置。TaoToken 的作用是把这一步收敛你在 TaoToken 拿一个 Key得到一个兼容常见接口规范的 Base URL然后 Continue、Cline 这些插件都填同一套地址和 Key模型 ID 按需选。这样你换插件、换机器配置逻辑是一致的不用记一堆不同的 Key。我试过把预览和补全分开配、再合起来验证的流程踩过的坑主要集中在「插件装了但没生效」和「AI 插件报 401」这两类。下面把配置和排障都写全你照着做基本能一次跑通。2. TaoToken 前置拿 Key、认地址、选模型 ID在动 VS Code 之前先把 TaoToken 这边的三样东西准备好API Key、Base URL、Model ID。这三样是后面所有 AI 插件配置的公共部分先拿到手后面填配置就是复制粘贴。打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册登录后进控制台。控制台里能找到 API Keys 管理页新建一个 Key复制出来先存好——这个 Key 只显示一次丢了就得重建。Key 的格式通常是一串以特定前缀开头的字符串复制的时候注意别把前后空格带进去这是后面 401 报错最常见的原因之一。Base URL 这块要记准TaoToken 的 API 地址是 https://taotoken.net/api 注意这个地址后面不加任何 UTM 参数配置里就填这个。有些插件要求你填到 /v1 这一层有些要求填到根具体看插件文档但源头都是这个地址。如果你填错成带查询参数的地址请求会失败。Model ID 是你要调用的具体模型标识。TaoToken 支持多种模型你在控制台或文档里能看到可用的模型列表。写 HTML 补全这种场景选一个响应快、代码能力够用的就行不用一上来就挑最贵的。把 Model ID 记下来比如类似 claude-3-5-sonnet 这种格式的字符串后面配置里要用。这三样准备好之后建议先在 TaoToken 的模型对话页面 https://taotoken.net/api 对应的对话入口deep link模型对话里发一条测试消息确认 Key 本身是通的。这一步能帮你把「Key 无效」和「插件配置错」两类问题分开——如果对话页面都发不出去那问题在 Key如果对话页面正常但插件报错那问题在插件配置。这个排查顺序能省你很多时间。关于 Coding Plan如果你不只是想补全还想让 AI 帮你做长期的编码任务、跑 Agent 流程可以看下 Coding Plan 这个入口deep linkcoding-plan。它和单次 API 调用的区别在于使用方式和额度模型适合把 AI 补全当成日常开发习惯的人。不过这篇的重点是「预览 补全同时生效」Coding Plan 你先知道有这么个东西就行配置逻辑和下面讲的一致。还有一个细节TaoToken 的接入文档deep linkdoc里有各插件的配置示例遇到插件特有的字段不知道怎么填去文档里对一下最稳。API Keys 管理页deep linkapi-keys用来管理你建的 Key控制台deep linkconsole是总入口。这几个地址记一下后面配置和排障会反复用到。3. 可复制配置settings.json 与插件配置片段这一节是全文最实操的部分给的都是可以直接复制粘贴的片段。分两块VS Code 的 settings.json 配置以及 AI 补全插件的配置。预览插件Live Server 等主要靠右键菜单和状态栏操作settings.json 里配的是默认行为和端口这类参数。先看 VS Code 的 settings.json。打开方式CtrlShiftPmacOS 是 CmdShiftP输入 Open User Settings (JSON)回车。这个文件是用户级配置对所有项目生效。如果你只想对当前项目生效就在项目根目录建 .vscode/settings.json。下面这段是预览相关的配置{ liveServer.settings.port: 5500, liveServer.settings.root: /, liveServer.settings.CustomBrowser: chrome, liveServer.settings.donotShowInfoMsg: true, liveServer.settings.ignoreFiles: [ .vscode/**, **/*.scss, **/*.ts, **/*.map ], open-in-browser.default: chrome, code-runner.runInTerminal: true, code-runner.saveFileBeforeRun: true }逐项说下。liveServer.settings.port 是 Live Server 起的本地服务器端口默认 5500你改成别的也行但别和系统里已占用的端口冲突。liveServer.settings.root 是服务器根目录填 / 表示以当前工作区根为根。CustomBrowser 指定用哪个浏览器打开填 chrome、firefox、edge 这些。donotShowInfoMsg 关掉每次启动的提示弹窗省得烦。ignoreFiles 是告诉 Live Server 哪些文件变化不用触发刷新把 .scss、.ts 这些编译前的源文件排除掉避免你改 SCSS 时页面疯狂刷新。open-in-browser.default 是 Open in Browser 插件的默认浏览器。code-runner.runInTerminal 让 Code Runner 在终端里跑而不是输出面板这样你能看到完整输出。code-runner.saveFileBeforeRun 是运行前自动保存避免你改了没存就跑出旧结果。然后是 AI 补全插件的配置。这里以 Continue 为例它是 VS Code 里比较常用的开源补全插件配置文件是 config.json 或 config.yaml放在用户目录的 .continue 文件夹下。下面给一个 config.json 的片段把 TaoToken 作为模型提供方接进去{ models: [ { title: TaoToken Claude, provider: openai, model: claude-3-5-sonnet, apiBase: https://taotoken.net/api, apiKey: 你的_TaoToken_Key, contextLength: 200000 } ], tabAutocompleteModel: { title: TaoToken Autocomplete, provider: openai, model: claude-3-5-sonnet, apiBase: https://taotoken.net/api, apiKey: 你的_TaoToken_Key }, allowAnonymousTelemetry: false }这里的关键字段是 apiBase 和 apiKey。apiBase 填 https://taotoken.net/api apiKey 填你从 TaoToken 控制台复制的 Key。model 填你要用的 Model ID。provider 填 openai 是因为 TaoToken 的接口兼容 OpenAI 的调用格式Continue 用这个 provider 就能对接。tabAutocompleteModel 是专门管 Tab 补全的模型配置和对话模型分开你可以用同一个模型也可以分开配。如果你用的是 Cline 这类插件配置逻辑类似在插件的设置界面里找 API Provider 选 OpenAI Compatible然后 Base URL 填 https://taotoken.net/api API Key 填 TaoToken 的 KeyModel ID 填你的模型。Cline 的 MCP 功能如果你要用注意别把 MCP 直连到生产数据库这是安全底线测试环境用用就行。三件套再强调一遍Base URL 是 https://taotoken.net/api Key 是你在 TaoToken 控制台建的Model ID 是你选的模型标识。这三个字段在任何 AI 补全插件里都是核心填对了基本就通。配置改完记得重启 VS Code或者至少重载窗口CtrlShiftP 输入 Reload Window让配置生效。很多人配完没反应就是忘了这步。4. 验证请求打开本地 HTML 看预览与补全是否同时生效配置填完接下来是验证。验证要分两步走先确认预览插件工作再确认 AI 补全工作最后确认两者能同时在一个 HTML 文件上生效。先建一个测试用的 HTML 文件。在 VS Code 里新建 index.html贴下面这段!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title预览与补全测试/title style body { font-family: sans-serif; padding: 40px; background: #f5f5f5; } .card { background: #fff; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /style /head body div classcard h1Hello, VS Code/h1 p如果你能看到这个页面说明 Live Server 工作正常。/p /div /body /html保存文件。然后右键编辑器空白处菜单里找 Open with Live Server点它。VS Code 右下角状态栏会显示 Port: 5500浏览器会自动打开 http://127.0.0.1:5500/index.html页面显示卡片和文字。这时候你回到 VS Code把 h1 里的文字改成别的保存浏览器会自动刷新显示新内容——这就是 Live Server 的实时预览生效了。如果右键没有 Open with Live Server检查 Live Server 插件是否装好、是否启用。装好后状态栏右下角会有一个 Go Live 的按钮点它也能启动。预览验证完验证 AI 补全。在 HTML 文件里新起一行输入div class停一下看有没有补全建议弹出来。Continue 的 Tab 补全会以灰色文字形式给出建议按 Tab 接受。如果没反应先确认 Continue 插件装好、配置里的 Key 和 Base URL 填对、模型 ID 有效。你也可以打开 Continue 的侧边栏直接问它「帮我写一个按钮的样式」看它能不能返回内容——这一步能确认模型通道是通的。两个都单独验证通过后做一次「同时生效」的验证在 Live Server 已经打开页面的情况下用 AI 补全写一段新的 HTML 结构保存看浏览器是否自动刷新出新内容。如果刷新了说明预览和补全两条线互不干扰同时工作。这里有个细节AI 补全插件在请求模型时会有网络延迟Tab 补全建议可能不是瞬间出现等一两秒是正常的。如果一直不出现看 VS Code 底部的输出面板选 Continue 或对应插件的输出通道里面会有请求日志和报错信息。这个日志是排障的关键后面第 5 节会讲怎么读。验证模型通道是否正常除了在插件里试也可以直接去 TaoToken 的模型对话页面发消息测试。如果对话页面正常但插件报错问题在插件配置如果对话页面也报错问题在 Key 或额度。这个二分法能快速定位。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth配置过程中最容易撞上的几类报错这里逐个拆。每个都给你现象、原因、解决方式。401 Unauthorized。现象是 AI 插件请求返回 401补全不工作。原因基本是 Key 不对。检查三处Key 是不是从 TaoToken 控制台复制的完整字符串有没有多复制空格或换行Key 是不是已经失效或被删配置里 apiKey 字段有没有写错位置。解决方式是把 Key 重新复制一遍粘贴到配置里重启 VS Code。如果还不行去 TaoToken 控制台确认这个 Key 的状态和额度。local proxy failed。现象是插件报本地代理失败。这个通常和系统代理设置有关。检查 VS Code 的代理配置settings.json 里搜 http.proxy如果填了一个不可用的代理地址去掉它。另外检查环境变量 HTTP_PROXY、HTTPS_PROXY 有没有设成不可用的值。解决方式是把这些代理配置清掉让请求直连。注意这里说的是清掉错误的代理配置不是让你去搞什么网络工具配置正确的情况下直连就能通。reading choices 相关报错。现象是插件返回的数据结构解析失败报类似 reading choices 的错误。原因是接口返回的格式和插件预期的格式不匹配。检查 apiBase 是不是填成了 https://taotoken.net/api 有没有多填或少填路径层级。有些插件要求 Base URL 到 /v1有些要求到根按插件文档调整。另外确认 provider 选的是 OpenAI Compatible 这类兼容模式而不是某个厂商专属模式。OAuth 相关报错。现象是插件尝试走 OAuth 登录流程失败。原因是有些插件默认走账号登录而不是 API Key 模式。解决方式是在插件设置里找「使用 API Key」或「Use API Key」的选项切换到 Key 模式然后填 TaoToken 的 Base URL 和 Key。别让它走 OAuth那条路和 TaoToken 的接入方式不匹配。除了这几类还有一个高频问题是「插件装了但补全不触发」。检查插件的启用状态有些插件默认只对特定语言生效确认 HTML 在它的支持列表里。另外检查有没有和其他补全插件冲突比如同时装了多个 AI 补全插件它们可能互相抢触发。留一个就行。排障时善用输出面板。VS Code 底部面板切到 Output右上角下拉选对应插件的通道里面会有请求 URL、状态码、返回内容。401 会明确显示格式错误也能从返回内容看出来。这个日志比猜有用得多。如果配置过程中对某个字段不确定去 TaoToken 的接入文档deep linkdoc对一下示例。文档里的配置片段是验证过的照着填比自己试快。6. 把 Key 统一之后日常写 HTML 的顺手流程配置跑通之后日常写 HTML 的流程会变得很顺。我的习惯是项目根目录放一个 .vscode/settings.json把 Live Server 的端口和忽略规则写进去这样每个项目打开就是一致的预览行为。AI 补全的配置放在用户级因为 Key 和模型是跨项目复用的不用每个项目配一遍。写页面的时候左边编辑器写结构右边浏览器实时看效果中间遇到不确定的样式或交互直接让 AI 补全给建议Tab 接受保存浏览器刷新。整个循环里不需要切换工具也不需要手动刷新。这个体验的前提就是预览和补全两条线都配好而且补全侧的 Key 是统一的——你不用在多个插件之间同步 Key换插件只改插件配置Key 还是那一个。TaoToken 在这里的角色就是那个统一的接入点。一个 Key一个 Base URL喂给所有兼容 OpenAI 接口的插件。你以后想换补全插件或者想加一个对话式的 AI 助手配置逻辑都一样不用重新申请账号。对于经常折腾工具的人来说这个收敛能省不少事。最后留一个实用技巧把常用的配置片段存成一个 gist 或本地文件换机器的时候直接复制。settings.json 的预览部分、Continue 的 config.json、Cline 的配置这三块存好新环境十分钟就能配完。Key 不要存进 git用环境变量或者本地文件管理避免泄露。如果你还没拿 Key去 TaoToken 控制台建一个然后按第 3 节的配置填进去第 4 节验证一遍。整个流程走下来你应该能在同一个 HTML 文件上同时看到实时预览和 AI 补全在工作。