Visual Studio Code下typescript调试配置 | 青训营

57 阅读1分钟

一、写作缘由

这几天在使用typescript开发一个青训营的小项目,准备调试一下,解决项目中存在的一个问题。查找了一些资料,学习如何配置typescript的调试功能,都没有一个满意的,大多数都是先把.ts利用tsc翻译为.js,然后再使用node命令调试,感觉这样有点麻烦。如果能直接在*.ts调试就好了,最终找到一个方法,所以记录一下。

二、环境安装

  1. 安装nodejs
  2. 修改npm源
npm config set registry=https://registry.npm.taobao.org
  1. 安装Visual Studio Code
  2. 安装Visual Studio Code的TypeScript Debugger插件

image.png 6. 安装typescript依赖和ts-node依赖

npm install typescript -D
npm install ts-node -D

三、配置launch.json文件

  1. 点击Visual Studio Code侧边栏的运行和调试按钮,并创建launch.json文件

image.png

  1. 由于安装了TypeScript Debugger这个插件,所以出现了TS Debug配置选项,选择这个选项

image.png

  1. 修改配置

原始的配置

image.png

修改后的配置实际只修改了一项

image.png

从调试的命令来看,还是使用node命令,但使用了ts-node包下面的register模块,猜测这个应该是跟typescript语法解析有关,这也是为什么刚才安装ts-node到本地而不是全局的原因方便配置路径

四、自由自在地调试

image.png