vscode怎么調試ts？
vscode 調試 TypeScript
環境
typescript :2.5.2
vscode:1.16.0
vscode 直接調試 ts 文件
源碼:github
（https://github.com/meteor199/my-demo/tree/master/typescript/vscode-debug）
安裝 typescript 依賴
npm?install?typescript?--save-dev
添加 tsconfig.json
主要是將 sourceMap 設置為true。
{ ????"compilerOptions":?{ ????????"module":?"commonjs", ????????"target":?"es5", ????????"noImplicitAny":?true, ????????"outDir":?"./dist", ????????"sourceMap":?true ????}, ????"include":?[ ????????"src/**/*" ????] }
配置自動編譯
利用 vscode 的 tasks 自動將 ts 編譯為 js。也可以使用別的方式編譯，如:gulp,webpack 等。
添加文件: /.vscode/tasks.json
{ ????//?See?https://go.microsoft.com/fwlink/?LinkId=733558 ????//?for?thedocumentation?about?the?tasks.json?format ???"version":?"0.1.0", ???"command":?"tsc", ???"isShellCommand":?true, ???//-p?指定目錄；-w?watch,檢測文件改變自動編譯 ???"args":?["-p",?".","-w"], ???"showOutput":?"always", ???"problemMatcher":?"$tsc" }
使用快捷鍵 Ctrl + Shift + B 開啟自動編譯。
配置調試
調試時，需要配置 vscode 的 launch.json 文件。這個文件記錄啟動選項。
添加或編輯文件 /.vscode/launch.json。
{ ????"version":?"0.2.0", ????"configurations":?[ ????????{ ????????????"name":?"launch", ????????????"type":?"node", ????????????"request":?"launch", ????????????"program":?"${workspaceRoot}/dist/main.js", ????????????"args":?[], ????????????"cwd":?"${workspaceRoot}", ????????????"protocol":?"inspector" ????????} ????] }
注意 : program 需設置為你要調試的 ts 生成的對應的 js。
假如需要調試 /src/main.ts,則此處為 ${workspaceRoot}/dist/main.js。
調試
打開 main.ts，在左側添加斷點，進行調試。
使用 ts-node 調試 ts 文件
源碼:github（https://github.com/meteor199/my-demo/tree/master/typescript/vscode-debug-without-compiling）
來自:Debugging TypeScript in VS Code without compiling, using ts-node
ts-node 調試 ts 文件時，不會顯式生成 js。假如你不想編譯為 js 后 再調試，可以考慮這種方式。
安裝 npm 依賴包
npm?install?typescript?--save-dev npm?install?ts-node?--save-dev
配置 tsconfig.json
主要是將 sourceMap 設置為true。
{ ????"compilerOptions":?{ ????????"module":?"commonjs", ????????"target":?"es5", ????????"noImplicitAny":?true, ????????"outDir":?"./dist", ????????"sourceMap":?true ????}, ????"include":?[ ????????"src/**/*" ????] }
配置 launch.json
打開 DEBUG 界面，添加 配置
或者編輯 /.vscode/launch.json。
{ ????"version":?"0.2.0", ????"configurations":?[ ????????{ ????????????"name":?"Current?TS?File", ????????????"type":?"node", ????????????"request":?"launch", ????????????"program":?"${workspaceRoot}/node_modules/ts-node/dist/_bin.js", ????????????"args":?[ ????????????????"${relativeFile}" ????????????], ????????????"cwd":?"${workspaceRoot}", ????????????"protocol":?"inspector" ????????} ????] }
調試
打開要調試的 ts 文件，添加debugger。
打開 debug 界面。
在DEBUG后 選擇 launch.json 中對應的配置，此處為Current TS File。
點擊運行按鍵或者按 F5 運行。
相關教程推薦：vscode教程
