paste json as code需安装quicktype官方插件,右键触发(非ctrl+v),仅支持.ts/.tsx等目标语言文件;默认camelcase可配为original;生成的| null/?基于样本真实结构,语义类型如date需手动处理;json须严格合法。

Paste JSON as Code 是目前最可靠、最轻量的方案,VSCode 原生不支持该功能,装插件后右键就能用,不需要写脚本、不依赖网络、不上传数据。
怎么装和触发 Paste JSON as Code
必须安装 Paste JSON as Code(作者 quicktype),不是其他同名或类似名插件。装完重启 VSCode 或重载窗口即可生效。
触发路径严格限定为:复制合法 JSON → 打开 .ts 文件 → 光标定位 → 右键 → Paste JSON as Code → 选 TypeScript。
- 不支持 Ctrl+V 触发,也不支持在 .json / .txt / 未保存文件中使用
- 如果右键菜单没出现该选项,先检查当前文件是否为
.ts或.tsx,且编辑器未处于只读状态 - 若仍不显示,打开命令面板(
Ctrl+Shift+P)搜Paste JSON as Code,手动运行一次,之后右键会自动恢复
为什么生成的字段名变成 userName 而不是 user_name
这是 Paste JSON as Code 默认启用 camelCase 命名策略导致的——它把下划线字段自动转成小驼峰,比如 "user_id" → userId: number。
这不是错误,但容易引发和后端字段不一致的误解。解决方式是提前配置:
- 按
Ctrl+Shift+P输入Quicktype: Configure Paste Behavior - 将
style项改为original(保留原始命名) - 改完后所有新生成的 interface 都会用
user_name而非userName
该配置写入用户设置,全局生效,无需每次重复操作。
生成结果里一堆 | null 和 ? 是对的吗
对。插件根据你粘贴的 JSON 样本做类型推断:"name": null → name: string | null;某字段在部分对象中缺失 → 自动加 ? 变成可选属性,比如 avatar?: string。
这反映的是样本真实结构,但未必符合业务契约。常见应对方式:
- 如果文档明确说该字段必填(只是示例值为
null),手动删掉| null或?,并加注释说明依据 - 如果字段语义是时间戳(如
"created_at": "2024-05-20T10:30:00Z"),插件只会生成created_at: string,不会自动转成Date—— 因为 TypeScript 类型系统中Date不是原始类型,运行时需额外解析 - 别用全局替换把所有
string换成DateTimeString,容易误伤其他纯文本字段
JSON 校验失败报 “Invalid JSON” 怎么办
绝大多数 Invalid JSON 错误,根源不在插件本身,而在剪贴板里的内容不合法:
- 从浏览器控制台复制日志时,常混入不可见字符(如
\u200b零宽空格)、颜色控制符或换行符 - JSON 末尾多了一个逗号(
"id": 123,) - 用了单引号代替双引号,或包含 JS 注释(
//)
快速验证方法:把剪贴板内容粘贴到 VSCode,按 Ctrl+K M 切换语言模式为 JSON,看语法高亮是否报错;或者直接访问 JSONLint.com 粘贴校验。确认合法后再执行粘贴操作。
真正难处理的是样本多样性问题:单条 JSON 很难覆盖所有字段分支(比如分页响应里有的 item 有 tags 数组,有的没有)。这时建议先合并多个响应样本,拼成一个“典型+边界”的 JSON,再粘贴生成,能显著提升接口健壮性。











