vscode 中运行 ts 文件
时间: 2025-06-28 10:25:23 浏览: 20
### 在 VSCode 中配置和运行 TypeScript 文件
#### 安装必要的扩展和工具
为了顺利在 Visual Studio Code (VSCode) 编写并执行 TypeScript 代码,安装官方提供的 TypeScript 和 JavaScript 扩展包是必需的操作[^1]。此外,确保全局安装 `ts-node` 工具可以简化命令行下直接运行 `.ts` 文件的过程[^2]。
#### 创建项目结构与初始化设置
建立一个新的工作区或打开已有项目,在根目录通过命令 `tsc --init` 初始化 TypeScript 的编译选项配置文件 `tsconfig.json`。此操作会创建默认的编译参数设定,适用于大多数场景下的开发需求。
#### 使用 ts-node 运行单个脚本
对于简单的测试或是独立的小型应用程序来说,可以直接利用 `ts-node` 来即时解释执行 TypeScript 源码而无需预先编译成 JavaScript 版本。只需切换至集成终端内键入如下指令即可完成指定 `.ts` 文件的快速启动:
```bash
ts-node <filename>.ts
```
#### 设置调试模式
当涉及到更复杂的业务逻辑或者希望获得更好的错误追踪体验时,则推荐采用内置调试器来进行断点调试等工作流优化措施。编辑 launch.json 添加特定于项目的调试配置项,例如指明主程序入口为 `${workspaceRoot}/dist/main.js` ,这通常是指向由 TypeScript 转换后的同名 JS 输出路径[^3]。
```json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/src/index.ts", // 修改为你自己的源文件位置
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"preLaunchTask": "npm: build"
}
]
}
```
上述 JSON 片段展示了如何定义一个名为 “Launch Program” 的调试方案,并关联了一个预启动构建任务来保证每次调试前都拥有最新的编译成果。
#### 自动化编译流程
为了让开发者专注于编码本身而非频繁手动触发编译过程,可以在 package.json 中加入 watch mode 或者借助其他辅助插件实现增量式的实时同步更新机制。比如添加 `"start": "tsc-watch --onSuccess \"node dist\""` 至 scripts 字段里,这样每当保存修改过的 .ts 文件之后就会自动重新编译并立即重启应用服务。
阅读全文
相关推荐


















