vscode 直接调试 ts 文件

1、新建一个文件夹”ts-learn”，并建立二级目录src（用于存放ts文件）和dist（存放编译后的js文件）
2、cd进入ts-learn目录
3、安装typescript依赖

npm install typescript --save-dev

4、安装ts-node

npm install ts-node --save-dev

5、在根目录执行tsc --init生成tsconfig.json，并修改为下面这样:

{"compilerOptions": {"module": "commonjs","target": "es5","noImplicitAny": true,"outDir": "./dist","sourceMap": true},"include": ["src/**/*"]
}

6、配置自动编译，利用vscode的tasks自动将ts编译为js。也可以使用别的方式编译，如：gulp, webpack等。
在根目录下添加文件.vscode/tasks.json，内容如下，然后使用快捷键 Ctrl/Comand + Shift + B 开启自动编译。如果不需要自动生成js文件，则这一步可以省略。

{// See https://go.microsoft.com/fwlink/?LinkId=733558// for thedocumentation about the tasks.json format"version": "0.1.0","command": "tsc","isShellCommand": true,//-p 指定目录；-w watch,检测文件改变自动编译"args": ["-p", ".","-w"],"showOutput": "always","problemMatcher": "$tsc"
}

7、配置调试，打开要调试的ts文件，然后点击debug按钮然后点击create a launch.json file创建vscode的laungh.json文件（类型可以选择node-preview)，目录位于根目录/.vscode/launch.json，和tasks.json同目录，内容如下:

{"version": "0.2.0","configurations": [{"name": "Current TS File","type": "node","request": "launch","program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js","args": ["${relativeFile}"],"cwd": "${workspaceRoot}","protocol": "inspector"}]
}

现在打开要调试的ts文件直接点击运行调试吧。
参考： https://segmentfault.com/a/1190000011935122

vscode 直接调试 ts 文件相关推荐

如何在VScode 中调试 ts 文件 Unit test
最近在使用VScode 调试 mocha 写的 UT, 遇到一个问题,executor.js文件中require了某个ts写的文件代码,跑ut的时候回报错说无法找到. 解决方式是在参数中加入 &quo ...
三步让你的 vscode 自动编译ts文件
三步让你的 vscode 自动编译ts文件 TypeScript环境安装与如何在vscode实现自动编译ts文件? 文章目录三步让你的 vscode 自动编译ts文件前提条件环境安装自动编译 ...
VSCode如何调试TS + node项目
在VsCode的项目.vscode目录下新建文件launch.json 内容如下: {// 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述.// 欲了解更多信息,请访问 ...
vscode断开调试服务器文件,vscode显示等待调试器断开连接
我正在尝试在vscode上调试量角器脚本. 我编辑了launch.json文件,但是调试控制台抛出了下面的错误. vscode调试控制台输出: C:\Program Files\nodejs\node ...
VScode 直接运行ts文件
vscode 库依赖 npm install -g ts-node npm install -g typescript 扩展 Code Runner 插件和 setting https://blog ...
VScode直接执行ts文件
以下操作均已安装node.js 首先先下载typescript 使用npm i typescript -g 进行全局安装然后全局安装ts编译器 npm i ts-node -g 接着再项目目录下安装 ...
ts快捷键 vscode_vscode怎么调试ts
vscode怎么调试ts? vscode 调试 TypeScript 环境 typescript :2.5.2 vscode:1.16.0 vscode 直接调试 ts 文件源码:github (h ...
ts文件编译与运行,vscode自动编译
ts文件编译与运行根据官方文档提示,ts文件无法直接运行,需要编译成js文件. 1.那么问题就来了,如何把ts文件编译成js文件呢? 官方文档说,Visual Studio 2017和Visual ...
TypeScript 初体验：第一个 TS 文件
步骤 1. 创建ts文件: ① 在桌面中创建文件夹:code. ② 在文件夹上点击鼠标右键,然后点击 Open With Code(用VSCode打开文件夹). ③ 在 VSCode 中新建ts文件: ...

vscode 直接调试 ts 文件

vscode 直接调试 ts 文件相关推荐

最新文章

热门文章