VSCode 1.77+ 原生支持 OpenAPI v3.x 预览,但需文件后缀为.yaml/.yml/.json且首行为openapi:,再手动设语言模式为OpenAPI Specification;自动补全等高级功能须配置Red Hat YAML插件绑定OpenAPI Schema。
VSCode 1.77+ 原生支持 OpenAPI v3.x 预览,不用装 Swagger 插件;但想获得自动补全、错误高亮和跨文件跳转,必须装 Red Hat YAML + OpenAPI (Swagger) Editor 组合。
为什么预览按钮不出现或点开是空白
不是插件没装对,而是 VSCode 没把当前文件识别为 OpenAPI 模式。它只认三种后缀:
、
、
,且内容第一行必须是
(不能是
)。
右键文件 →
Change Language Mode
→ 选
(不是 YAML 或 JSON)
接着点击右下角弹出的
Configure File Association for '.yaml'
,输入
回车,这样所有
文件默认就走 OpenAPI 模式了
如果仍不显示预览按钮,按
输入命令
手动唤出
自动补全失效或 enum 报错:Red Hat YAML 的 Schema 绑定必须手动配
Red Hat YAML 插件本身不自动关联 OpenAPI Schema,不配置就只有基础 YAML 补全,没有字段提示、必填校验、
跳转这些能力。
打开
,加这段:
字段必须写字符串数组,
合法,
直接触发
只支持相对路径,
可以,
或
全部报错
Preview 显示 “Invalid OpenAPI document” 的真实原因
这不是语法错误,是 OpenAPI 结构校验失败。VSCode 内置校验器比 YAML 解析器严格得多,尤其卡在 schema 嵌套层级和 content 定义上。
VSCode 1.118
微软正式发布 Visual Studio Code 1.118 版本 。本次更新重点强化了 AI 开发体验与企业管理能力,其中最引人注目的是新增 Copilot CLI 远程控制功能,允许开发者通过手机或网页远程监控和接管 AI 会话 。同时,为了提高 AI 的运行性价比,新版本优化了令牌缓存策略以降低成本 。此外,1.118 版还引入了 Chronicle 本地历史追踪、TypeScript 7.0 支持以及更严格的企业级访问管控 。
下载
下必须显式包一层
,下面这样会失败:
正确写法是:
根级字段缺失也会触发,确保至少有
、
、
三个顶层 key
调试建议:先用在线工具
https://www.php.cn/link/762d77fa312b52c109f63a9fa0b1edbe
验证结构,再回 VSCode,避免反复试错
字体太小、格式被乱改、预览页卡顿怎么办
OpenAPI 预览界面本身没 UI 设置项,所有调整都得靠底层配置干预。
禁用保存时自动重排 key:
放大预览字体:预览页不响应
,得靠系统缩放 +
避免
被其他插件劫持:检查
,删掉类似
这种误配
如果预览卡顿,关掉
插件里「Enable auto-refresh on file change」选项,大文件编辑时很关键
最易忽略的一点:VSCode 的预览只是只读查看,不提供 mock server、导出 HTML、生成 client code 等功能——这些必须交给专门工具链,比如
或
,别在编辑器里硬扛。
.yaml.yml.jsonopenapi:swagger:OpenAPI Specificationopenapi.yamlCtrl+Shift+POpenAPI: Open Preview to the Side$refsettings.json{
"yaml.schemas": {
"https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/schemas/v3.1/schema.json": [
"*.yaml",
"*.yml",
"*.json"
]
}
}enumenum: ["200", "404"]enum: [200, 404]Invalid OpenAPI document$ref./components/schemas/User.yamlhttps://example.com/schema.json/abs/path.yamlcontentschema:content:
application/json:
type: objectcontent:
application/json:
schema:
type: objectopenapiinfopaths"yaml.format.enable": falseeditor.fontSize"workbench.fontAliasing": "antialiased".yamlfiles.associations"*.yaml": "ansible"OpenAPI (Swagger) Editoropenapi-generatorprismmock