VSCode调试TypeScript

• 安装 typescript

npm install typescript --save-dev

• 安装 ts-node

npm install ts-node --save-dev

• 配置 package.json

在根目录下执行以下命令生成package.json文件

npm init -y
# npm init [--force|-f|--yes|-y|--scope]

{
  "name": "tsdemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-node": "^9.0.0",
    "typescript": "^2.9.2"
  }
}

package.json 中有dependencies和devDependencies，列出了项目所使用的第三方依赖包，下载的依赖包存放在node_modules目录中。

devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

添加依赖有2种方法：

1. npm install name –save 就是将要安装的依赖写到 package.json 的 dependencies 对象中
2. npm install name –save-dev 是将要安装的依赖写到 package.json 的 devDependencies 对象中

• 添加 tsconfig.json

在根目录下执行以下命令生成tsconfig.json

tsc --init

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,    // 强制类型检验
        "outDir": "./dist",       // 输出目录
        "sourceMap": true         // 生成相应的map文件（断点调试需要开启此项）
    },
    "include": [
        "src/**/*"
    ]
}

• 配置 tasks.json

添加.vscode/tasks.json文件方法：https://blog.csdn.net/watson2017/article/details/109779609

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

• 配置自动实时编译

设置自动编译ts为js。

• 配置 launch.json

单击最上方面板调试视图中的齿轮图标，选择你的调试环境，然后VS Code将在你的工作空间的.vscode目录下生成一个launch.json文件。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "启动程序",
            "type": "node",
            "request": "launch",
            "args": [
                "${workspaceFolder}/src/main.ts"    //入口文件
            ],
            "runtimeArgs": [
                "--nolazy",
                "-r",
                "ts-node/register"
            ],
            "sourceMaps": true,
            "cwd": "${workspaceFolder}",
            "protocol": "inspector",
            "console":"integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}

预定义变量

支持下面的预定义变量：

${workspaceFolder} - 当前工作目录(根目录)

${workspaceFolderBasename} - 当前文件的父目录

${file} - 当前打开的文件名(完整路径)

${relativeFile} - 当前根目录到当前打开文件的相对路径(包括文件名)

${relativeFileDirname} - 当前根目录到当前打开文件的相对路径(不包括文件名)

${fileBasename} - 当前打开的文件名(包括扩展名)

${fileBasenameNoExtension} - 当前打开的文件名(不包括扩展名)

${fileDirname} - 当前打开文件的目录

${fileExtname} - 当前打开文件的扩展名

${cwd} - 启动时task工作的目录

${lineNumber} - 当前激活文件所选行

${selectedText} - 当前激活文件中所选择的文本

${execPath} - vscode执行文件所在的目录

${defaultBuildTask} - 默认编译任务(build task)的名字

• 调试main.ts