一、插件背景
平时自己在开发项目的过程中，经常需要根据后端接口数据来定义类型，有时候后端接口字段很多，光类型定义就要写半天。自己就想着能不能通过代码的方式将接口数据直接转化为 ts 类型定义，好在 github 上发现了相应的库 json2ts ，它提供了网页版 可以在线使用，用了一段时间觉得还不错，但每次使用都要打开网站不是很方便，于是就想着把它的功能封装成一个 vscode 插件。
二、插件安装
可以在 VS Code 的扩展商店中搜索 json2any 插件进行安装。
安装完成后，在支持的文件窗口右上角会显示一个小图标，选中要转化的代码后点击小图标即可。
三、插件功能
1. 通过 json 数据转化生成 TS 类型声明
插件会使用如下默认配置来生成 ts 类型
{
// 命名空间
"namespace": false,
// 每个属性都加I
"prependWithI": true,
// 字母顺序排序
"sortAlphabetically": false,
// 添加export
"addExport": false,
// 使用Array<T>
"useArrayGeneric": false,
// 全部可选
"optionalFields": false,
// 类型前缀 类似于namespace功能
"prefix": '',
// 根节点名称
"rootObjectName": 'RootObject',
}
同时也支持自定义配置项，可以全局设置，也可以每次转化的时候设置
1.1 使用全局设置配置项
1.2 每次转化时设置
将 json2any.showJson2tsConfig 设置为 true, 每次转化时会出弹窗选择配置。
2. 将 React 内联 CSS 转化为纯 CSS
平时在开发项目的时候，有些情况下会先把 css 直接写在组件的 style 上，这样可以不用在 css 文件和 tsx 文件之间来回跳转，但写完之后又想把样式转移到单独的 css 文件中，这时候手动转移就非常费劲，于是就想着给插件加上这个功能。
3. 将纯 CSS 转化为 React 内联 CSS
反过来，有时候也需要将 css 转化为 React 内联 CSS。
四、源码仓库
github.com/hzyhbk/json… 觉得有用欢迎点个star~
