VSCode的Paste JSON as Code功能:快速将JSON转换为类型定义

19次阅读

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

VSCode的Paste JSON as Code功能:快速将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 + Pwindows/linux)打开命令面板。

4、输入并选择 Paste JSON as Code 命令。

5、在弹出的输入框中输入接口名称(如 User),按回车确认。

二、通过右键菜单触发转换

当编辑器启用了语言服务器并识别当前为TS/JS上下文时,右键菜单会动态添加快捷入口,避免频繁调用命令面板。

1、确保光标位于支持该功能的文件中,且文件语言模式显示为 TypeScriptJavaScript(状态栏右下角可见)。

2、右键单击编辑区域空白处。

3、在上下文菜单中找到并点击 Paste JSON as Code 选项。

4、在弹出的命名提示框中输入目标类型名,例如 ApiResponse

三、使用扩展增强功能

原生功能仅支持生成TypeScript interface,若需生成class、React PropTypes、go Structpython 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、为每个位置单独输入不同的类型名,例如 ConfigSchemaUserDataLogEntry

text=ZqhQzanResources