VSCode怎么運(yùn)行TypeScript? VSCode配置并調(diào)試TypeScript代碼的技巧

發(fā)布時間：2022-04-29 11:06:51 作者：佚名

我要評論

VSCode怎么運(yùn)行TypeScript？VSCode中想要運(yùn)行TypeScript代碼需要我們自己配置，下面我們就來看看VSCode配置并調(diào)試TypeScript代碼的技巧

VSCode如果配置并調(diào)試TypeScript代碼？本篇經(jīng)驗(yàn)將和大家介紹在VSCode中配置并調(diào)試TypeScript代碼，希望對大家的工作和學(xué)習(xí)有所幫助！

Visual Studio Code(代碼編輯器) v1.99.3 64位中文免費(fèi)綠色版

類型：編譯工具
大?。?/span>143MB
語言：簡體中文
時間：2025-04-17

查看詳情

首先確保本機(jī)已安裝Node.js，并全局安裝了ts-node插件，如下圖所示：

使用VSCode打開一個空目錄，在下面創(chuàng)建一個src目錄，并在其下面創(chuàng)建兩個ts腳本，如下圖所示：

在VSCode中點(diǎn)擊左側(cè)的調(diào)試工具欄，選擇“顯示所有自動調(diào)試配置”，點(diǎn)擊“添加配置”，如下圖所示：

選擇Node.js，如下圖所示：

之后在項(xiàng)目根目錄下，默認(rèn)會創(chuàng)建一個.vscode的目錄，下面包括一個名為launch.json文件，如下圖所示：

右鍵資源管理器面板中的空白目錄，選擇“在集成終端中打開”，如下圖所示：

在項(xiàng)目根目錄下，在終端窗口，輸入命令

npm install typescript ts-node

根目錄下會創(chuàng)建一個名為node_modules的文件夾和package.json文件，如下圖所示：

<

根目錄下我們創(chuàng)建一個名為tsconfig.json文件，內(nèi)容如下

{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true
},
"include": [
"src/**/*"
]
}

，如下圖所示：

打開.vscode/launch.json文件，修改如下

{
"version": "0.2.0",
"configurations": [
{
"name": "調(diào)試TypeScript",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js",
"args": [
"${relativeFile}"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}

，如下圖所示：