首先安装Node.js、TypeScript和VSCode扩展,初始化tsconfig.json配置编译选项,设置package.json脚本实现构建与运行,再通过launch.json和tasks.json配置调试任务,最后利用sourceMap在VSCode中对TypeScript文件设断点并启动调试,或使用ts-node直接运行以简化开发流程。

要在VSCode中顺利运行和调试TypeScript,关键在于正确配置开发环境。TypeScript本身不能直接在Node.js中执行,必须先编译成JavaScript。下面是如何在VSCode中完成这一流程的完整说明。
1. 安装必要的工具
确保你的系统已安装以下工具:
- Node.js 和 npm:用于运行TypeScript编译器和脚本
-
TypeScript 编译器(tsc):通过npm全局安装:
npm install -g typescript -
VSCode:推荐安装以下扩展:
- ESLint(可选)
- Prettier(可选)
2. 初始化项目并配置 tsconfig.json
进入项目目录,运行以下命令初始化TypeScript配置:
tsc --init这会生成一个 tsconfig.json 文件。建议修改以下常用选项:
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"sourceMap": true
},
"include": ["src/**/*"]
}
这样TypeScript会把 src 目录下的 .ts 文件编译到 dist 目录。
3. 添加运行脚本(package.json)
如果还没有 package.json,运行:
npm init -y然后添加编译和运行脚本:
"scripts": {
"build": "tsc",
"start": "node dist/index.js",
"dev": "tsc && node dist/index.js"
}
现在你可以用 npm run dev 编译并运行程序。
4. 在VSCode中设置调试配置
点击左侧调试图标,然后点击“创建 launch.json”文件,选择 Node.js 环境。VSCode会生成 .vscode/launch.json。修改内容如下:
1、演示:以截图为准 程序试用后台:http://你的域名/admin/login.asp 后台登陆帐号:admin 密码:admin 说明: 这个是基于asp+access的企业网站源码,数据库已设有有防下载,网站更安全 要修改网站,自定义你自己要的页面,和美化页面都是你自己完成,网站源码程序完整,后台功能强大。 调试运行环境:要安装IIS服务器(IIS的安装和配置,安装好后,在地址栏输入:h
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Program",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/src/index.ts",
"preLaunchTask": "tsc: build",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"skipFiles": ["/**"]
}
]
}
注意:program 指向的是 .ts 源文件,但实际执行的是编译后的 .js。VSCode借助 sourceMap 实现断点映射。
你还需要定义 preLaunchTask 对应的构建任务。打开 .vscode/tasks.json(没有则创建),内容如下:
{
"version": "2.0.0",
"tasks": [
{
"label": "tsc: build",
"type": "shell",
"command": "tsc",
"options": {
"cwd": "${workspaceFolder}"
},
"group": "build",
"presentation": {
"echo": true,
"reveal": "silent"
},
"problemMatcher": ["$tsc"]
}
]
}
5. 开始调试
现在你可以在 .ts 文件中设置断点,按 F5 启动调试。VSCode会自动:
- 运行 tsc 编译代码
- 启动 Node.js 执行 dist/index.js
- 将源码断点映射到运行时行为
调试控制台会显示输出,变量、调用栈等面板均可正常使用。
6. 可选:使用 ts-node 简化流程
如果你不想手动编译,可以使用 ts-node 直接运行TypeScript:
npm install -D ts-node修改 launch.json:
{
"name": "Run with ts-node",
"type": "node",
"request": "launch",
"runtimeExecutable": "npx",
"runtimeArgs": ["ts-node", "src/index.ts"],
"console": "integratedTerminal"
}
这种方式无需预编译,适合开发阶段快速迭代。
基本上就这些。只要配置好 tsconfig、launch.json 和 task,VSCode就能高效运行和调试TypeScript。关键是理解编译与执行的流程,以及sourceMap如何连接源码与运行代码。









