JavaScript学习：如何使用vscode直接调试ts

问题

Python学习过程，研究vscode开发python项目时，准备学习开发vscode插件，不过vscode官方插件开发的样例都是TypeScript语言。vscode上调试JavaScript很方便，但调试TypeScript好像有点麻烦。要像JavaScript那样直接在vscode中调试，不用浏览器调试。

方案

TypeScript语言是JavaScript的超集，网上讲的调试方法，大多是先把ts编译成js文件，使用起来也不大方便。

github上有个强大的工具ts-node，提供了TypeScript运行环境，让我们避免了麻烦的编译步骤。

先确保本机已经安装了node.js，然后在安装typescript和ts-node：

npm install typescript
npm install ts-node

注意事项：typescript和ts-node需要安装工程的当前目录下，npm时不需要使用-g选项。

为了断点调试，我们需要在项目中的根目录下创建tsconfig.json文件，在tsconfig.json开启sourceMap。配置如下：

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

接下来我们修改项目的launch.json（.vscode目录下手工创建，或者通过vscode侧边栏的Debug图标创建）文件，添加一个新的启动文件:

{
    "version": "0.2.0",
    "configurations": [
     {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "args": [
                "${relativeFile}"
            ],
            "runtimeArgs": [
                "--nolazy",
                "-r",
                "ts-node/register"
            ],
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}

通过这些简单的配置，在vscode中选择debug任务，就可以方便的调试TypeScript代码了。

总结

vscode可以直接调试JavaScript，TypeScript是微软推行的JavaScript的超级超集，应该也有直接调试TypeScript的方法。github上的大神果然多，ts-node这样出色的工具都有。