vscode试调ts

一、新建工程如下
vscode试调ts_第1张图片
二、安装依赖

npm install ts-node --save-d
npm install typescript --save-d

三、.vscode 配置文件

  1. launch.json配置
{
   // 使用 IntelliSense 了解相关属性。 
   // 悬停以查看现有属性的描述。
   // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
       {
           "type": "node",
           "request": "launch",
           "name": "启动程序",
           "skipFiles": [
               "/**"
           ],
           "program": "${workspaceFolder}\\dist\\demo.js",  //指向 ts 编译后的目录文件
           "outFiles": [
               "${workspaceFolder}/**/*.js"
           ]
       }
   ]
}
  1. tasks.json 自动编译输出 tsc --init 命令生成配置文件
{
   // See https://go.microsoft.com/fwlink/?LinkId=733558
   // for thedocumentation about the tasks.json format
  "version": "2.0.0",
  "shell": true,
  //-p 指定目录;-w watch,检测文件改变自动编译
  "presentation": {
      "reveal":"always"
  },
  "problemMatcher": "$tsc",
  "tasks": [{
   "label": "Run debugger ts",
   "type": "shell",
   "args": ["-p", ".", "-w"],
   "command": "tsc",
   "group": "build", 
  }]
}

四、生成编译文件

  1. ctrl + shift + p
    vscode试调ts_第2张图片
  2. ctrl + shift + b
    vscode试调ts_第3张图片
    vscode试调ts_第4张图片
    五、启动debugger
    vscode试调ts_第5张图片

你可能感兴趣的:(js前端)