若VSCode中API Blueprint文档无法实时预览或语法高亮异常，需依次安装API Blueprint Language Support扩展、配置Drafter CLI实现预览、借助Live Server规避file://协议限制，并通过tasks.json设置一键编译预览任务。
如果您在 VSCode 中编写 API Blueprint 文档时无法实时预览或语法高亮异常，则可能是由于缺少对应扩展或配置未生效。以下是解决此问题的步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 API Blueprint 官方扩展
VSCode 本身不原生支持 API Blueprint 语法解析与渲染，需通过社区维护的专用扩展提供基础支持。该扩展可启用语法高亮、错误提示及基础格式校验功能。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按快捷键 Ctrl+Shift+X）。
2、在搜索框中输入 API Blueprint。
3、在结果中找到由 danielgtaylor 发布的 API Blueprint Language Support 扩展并点击“安装”。
4、安装完成后重启 VSCode，新建或打开 .apib 文件，确认文件右下角语言模式已切换为 API Blueprint。
二、配置实时预览服务（使用 Drafter CLI）
Drafter 是 API Blueprint 官方推荐的命令行解析器，用于将 .apib 文件编译为可浏览的 HTML 文档。VSCode 需调用本地 Drafter 实现预览功能。
1、在终端中执行 brew install --cask drafter（macOS）或访问 https://github.com/apiaryio/drafter/releases 下载对应平台二进制文件并加入 PATH。
2、验证安装：在终端运行 drafter --version，确认输出版本号不低于 v3.2.7。
3、在 VSCode 中打开命令面板（Cmd+Shift+P），输入并选择 API Blueprint: Preview Document。
4、预览窗口将在内置浏览器中打开，内容随 .apib 文件保存自动刷新（需扩展支持热重载）。
三、启用 Live Server 辅助预览
当 Drafter 输出 HTML 后，可借助 Live Server 扩展启动本地 HTTP 服务，规避浏览器因 file:// 协议导致的跨域限制或资源加载失败问题。
1、安装 VSCode 扩展 Live Server（作者：ritwickdey）。
2、使用 Drafter 将 .apib 文件导出为 HTML：在终端执行 drafter input.apib -f html -o output.html。
3、右键点击生成的 output.html 文件，在上下文菜单中选择 Open with Live Server。
4、浏览器将自动打开 http://127.0.0.1:5500/output.html，且支持实时刷新。
四、配置自定义任务实现一键编译预览
通过 VSCode 的 tasks.json 可将 Drafter 编译与浏览器打开操作整合为单条命令，避免重复输入终端指令。
1、在工作区根目录创建 .vscode/tasks.json 文件（若不存在）。
2、填入以下内容（确保 path 字段指向实际 drafter 可执行路径）：
{ "version": "2.0.0", "tasks": [{ "label": "Build and Preview API Blueprint", "type": "shell", "command": "drafter ${file} -f html -o ${fileBasenameNoExtension}.html && open ${fileBasenameNoExtension}.html" }] }
3、按下 Cmd+Shift+P，输入 Tasks: Run Task，选择刚定义的任务。
4、当前编辑的 .apib 文件将被编译为同名 HTML 并在默认浏览器中打开。
