vscode試調ts

一、新建工程如下
在這裏插入圖片描述
二、安裝依賴

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": [
               "<node_internals>/**"
           ],
           "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
    在這裏插入圖片描述
  2. ctrl + shift + b
    在這裏插入圖片描述
    在這裏插入圖片描述
    五、啓動debugger
    在這裏插入圖片描述
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章