用Visual Studio Code直接调试TypeScript,看了好多教程,走了好多弯路……
一、安装环境
1、操作系统规格:Windows 10 家庭中文版
2、Visual Studio Code版本:1.71.1,不是Visual Studio 2022哟
二、安装TypeScript
1、安装TypeScript需要使用到 npm 工具安装。下载node.json:https://nodejs.org/en/,一般下载LTS版本进行安装。
2、完成nodejs安装后,在Windows开始菜单里 以管理员身份运行 打开Windows PowerShell:
使用国内镜像:
npm config set registry https://registry.npmmirror.com
全局安装 typescript:
npm install -g typescript
全局安装ts-node
npm install -g ts-node
3、在Visual Studio Code左侧边栏扩展里安装TypeScript Debugger
4、随便编辑一个ts代码文件,然后在Visual Studio Code菜单栏——运行——添加配置,代码如下。
按照实际代码所在目录修改${workspaceRoot},例如:"cwd": "盘符:/上级目录/目录",
{"folders": [],"launch": {"version": "0.2.0","configurations": [{"name": "ts-node","type": "node","request": "launch","args": ["${relativeFile}"],"runtimeArgs": ["-r","ts-node/register"],"cwd": "${workspaceRoot}","protocol": "inspector","internalConsoleOptions": "openOnSessionStart"}]}}
5、按F5用Visual Studio Code直接调试TypeScript吧!
三、调试时报错
报错内容为:
Could not read source map for file:///盘符:/一级目录/二级目录/node_modules/typescript/lib/文件名.js: ENOENT: no such file or directory, open '盘符:/一级目录/二级目录\node_modules\typescript\lib\文件名.js.map'
在菜单栏运行——打开配置文件,添加如下桃红代码:
{"folders": [],"launch": {"version": "0.2.0","configurations": [{"name": "ts-node","type": "node","request": "launch","args": ["${relativeFile}"],"runtimeArgs": ["-r","ts-node/register"],"cwd": "${workspaceRoot}","protocol": "inspector","internalConsoleOptions": "openOnSessionStart""resolveSourceMapLocations": ["${workspaceFolder}/**","!**/node_modules/**"],}]}}
按F5用Visual Studio Code无报错的直接调试TypeScript吧!