用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吧!