VSCode支持将JSON快速转为TypeScript类型定义:①用Cmd+Shift+P执行“Paste JSON as Code”并命名接口;②右键菜单触发同名命令;③安装扩展可生成class、React PropTypes等;④多光标支持批量定义不同JSON结构。

如果您在VSCode中编辑TypeScript或JavaScript代码时,需要将一段JSON数据快速转换为对应的语言类型定义(如interface、type或class),但手动编写容易出错且耗时,则可以利用VSCode内置的“Paste JSON as Code”功能。以下是实现该功能的具体操作步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、使用内置命令Paste JSON as Code
VSCode原生支持将剪贴板中的JSON字符串直接生成TypeScript接口定义,无需安装扩展,前提是当前文件语言模式为TypeScript或JavaScript,并已启用相关语言特性。
1、复制一段合法的JSON字符串(例如:{"name": "Alice", "age": 30, "isActive": true})。
2、在TypeScript文件(.ts)中,将光标置于顶层作用域(不能在函数或对象内部)。
3、按下 Cmd + Shift + P(macOS)或 Ctrl + Shift + P(Windows/Linux)打开命令面板。
4、输入并选择 Paste JSON as Code 命令。
5、在弹出的输入框中输入接口名称(如 User),按回车确认。
二、通过右键菜单触发转换
当编辑器启用了语言服务器并识别当前为TS/JS上下文时,右键菜单会动态添加快捷入口,避免频繁调用命令面板。
1、确保光标位于支持该功能的文件中,且文件语言模式显示为 TypeScript 或 JavaScript(状态栏右下角可见)。
2、右键单击编辑区域空白处。
3、在上下文菜单中找到并点击 Paste JSON as Code 选项。
4、在弹出的命名提示框中输入目标类型名,例如 ApiResponse。
三、使用扩展增强功能
原生功能仅支持生成TypeScript interface,若需生成class、React PropTypes、Go struct或Python dataclass等格式,可借助第三方扩展扩展能力。
1、打开VSCode扩展市场,搜索并安装 Paste JSON as Code(作者:mohsen1)。
2、重启VSCode后,再次复制JSON内容。
3、按下 Cmd + Shift + P,输入 Paste JSON as,选择对应目标语言模板(如 Paste JSON as React PropTypes)。
4、扩展将根据所选模板生成适配代码,包括嵌套结构与数组类型的自动推导。
四、通过多光标粘贴实现批量定义
当需要为多个不同JSON结构分别生成独立类型定义时,可借助VSCode多光标能力,在同一文件中并行处理多个粘贴点。
1、在编辑器中按住 Option 键(macOS)或 Alt 键(Windows/Linux),同时点击多个期望插入位置,创建多个光标。
2、依次将不同JSON字符串复制到系统剪贴板(每次覆盖前一个)。
3、在每个光标位置分别执行 Cmd + Shift + P → Paste JSON as Code。
4、为每个位置单独输入不同的类型名,例如 ConfigSchema、UserData、LogEntry。










