vscode是微軟最新推出的使用 atom 的 electron 技術開發的新一代文本編輯器。
同時最近也在GitHub( https://github.com/Microsoft/vscode )上開源了。
本文簡單的教大家如何使用vscode的構建和調試功能。
構建項目
vscode使用 task.json 來配置項目的構建過程。
打開命令面板(Ctrl+Shift+P)選擇Run Build Task(Ctrl+Shift+B)
如果當前工作空間沒有 task.json 配置文件此時會出現提示
選擇 Configure Task Runner 自動創建 task.json 。該配置文件在工作空間的.vscode目錄下，這個目錄也是存放vscode配置的文件夾。
vscode默認的task配置文件中給出了執行tsc 和 gulp模板配置。簡單介紹一下 task.json 的寫法
{"version": "0.1.0",// 要使用的命令或者可執行文件的路徑"command": "tsc",// 對應command參數，是否是一個命令，否則為執行文件路徑"isShellCommand": true,// 是否在執行task任務時顯示控制台窗口"showOutput": "always",// 對應command參數指定程序的參數"args": ["-p", "src", "--allowJs", "-w"],// 不太明白這個，基本用不到"problemMatcher": "$tsc",}
另外還有更多參數和用法可以參照下面的官方文檔
https://code.visualstudio.com/docs/editor/tasks
配置好了之后使用默認的快捷鍵Ctrl+Shift+B即可執行編譯。
運行和調試項目
vscode默認支持nodejs，ts，js等項目的調試。使用 launch.json p配置調試參數。
調試啟動調試的默認快捷鍵是F5， 如果沒有 launch.json 則會彈窗提示選擇調試環境，並自動創建 launch.json 。
以調試node項目為例，簡單說明下 launch.json 的寫法
{"version": "0.2.0","configurations": [{// 啟動配置的名稱。每個程序可能有多個啟動配置// 此名稱將顯示在調試面板的下拉框中"name": "Launch",// 配置的類型，默認有三種類型(node,momo,extensionHost)// 可以通過插件來自定義更多的類型"type": "node",// 請求類型, launch表示啟動程序調試，attach表示監聽某一端口進行調試"request": "launch",// node程序的入口腳本路徑(相對於工作空間)"program": "./out/bootstrap.js","stopOnEntry": false,// 接在program指定js后面的參數"args": [],// 程序的啟動位置"cwd": ".",// 啟動程序的路徑, 如果為null則使用默認的node"runtimeExecutable": null,// 傳遞給node的參數"runtimeArgs": ["--nolazy","--es_staging","--harmony-proxies"],// 程序啟動時設置的環境變量"env": {"NODE_ENV": "development"},"externalConsole": false,// 是否使用sourceMaps"sourceMaps": true,// 如果使用sourceMaps，js腳本所在的路徑"outDir": "./out"},{"name": "Attach","type": "node",// attach表示監聽某一端口進行調試"request": "attach",// 要監聽的端口"port": 5858,// 是否使用sourceMaps"sourceMaps": true,// 如果使用sourceMaps，js腳本所在的路徑"outDir": "./out"}]}
這里面對應了launch和attach兩個配置任務。說下兩者的區別。
launch實際上是啟動一個node執行指定代碼，同時可以在vscode里面打斷點調試。以上述配置為例，實際執行的命令為
node --debug-brk=30001 --nolazy --es_staging --harmony-proxies out/bootstrap.js
端口號是隨機的，vscode能打斷點調試是因為他內部監聽了這個端口，並與node通訊實現調試。
attach就是監聽的任務。例如 其他程序 啟動了一個node應用並使用了—debug-brk參數開啟了5858端口使程序暫停在了第一行。此時啟動attach任務，就可以監聽到這個端口，並在 vscode里面 調試這個node應用了