如何在VSCode中实现保存.json文件时自动生成.ts文件？

步骤1：编写JSON转TS的自定义转换脚本 #

用Node.js写一个处理脚本，你可以完全自定义转换逻辑。比如在项目根目录创建json-to-ts.js，示例代码如下：

const fs = require('fs');
const path = require('path');

// 获取当前保存的JSON文件路径（从命令行参数传入）
const targetJsonPath = process.argv[2];
if (!targetJsonPath) {
  console.error('未传入目标JSON文件路径');
  process.exit(1);
}

try {
  // 读取并解析JSON内容
  const jsonRaw = fs.readFileSync(targetJsonPath, 'utf8');
  const jsonData = JSON.parse(jsonRaw);

  // 自定义转换逻辑：这里示例生成TS常量和类型，你可以改成自己需要的格式
  const tsFilePath = path.join(path.dirname(targetJsonPath), `${path.basename(targetJsonPath, '.json')}.ts`);
  const tsContent = `
// 自动生成的TS文件，请勿手动修改
export const data = ${JSON.stringify(jsonData, null, 2)} as const;
export type DataType = typeof data;
  `.trim();

  // 写入TS文件
  fs.writeFileSync(tsFilePath, tsContent);
  console.log(`✅ 已生成TS文件：${tsFilePath}`);
} catch (err) {
  console.error(`❌ 转换失败：${err.message}`);
}

你可以根据需求修改转换逻辑，比如生成Interface、枚举，或者其他TS语法结构。

步骤2：配置VSCode任务实现自动触发 #

1. 打开VSCode命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入Tasks: Configure Task，选择Create tasks.json file from template，再选Others。
2. 替换tasks.json的内容为以下配置：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "JSON转TS自动生成",
      "type": "shell",
      "command": "node ${workspaceFolder}/json-to-ts.js ${file}",
      "problemMatcher": [],
      "trigger": {
        "event": "onSave",
        "filters": {
          "glob": "**/*.json" // 可指定特定文件，比如**/config.json，避免所有JSON触发
        }
      }
    }
  ]
}

• glob字段可以精准匹配需要监听的JSON文件，比如只监听src/config.json就改成src/config.json。
• ${file}会自动替换为当前保存的文件路径，传给转换脚本。

步骤3：测试功能 #

保存你的目标JSON文件，VSCode会自动触发任务运行转换脚本，生成对应的TS文件。你可以在VSCode的“输出”面板（选择“任务”输出）查看运行日志。

注意事项 #

• 确保你的电脑已经安装Node.js，能正常运行node命令。
• 转换脚本里建议加上错误捕获，避免JSON解析失败导致任务异常。
• 如果需要调试转换逻辑，可以在命令面板输入Tasks: Run Task，选择“JSON转TS自动生成”手动运行，查看输出信息。

内容的提问来源于stack exchange，提问作者Adrian Rosca