編輯

在 Visual Studio Code 中進行 Node.js 開發

Node.js 是一個用於使用 JavaScript 構建快速、可擴充套件的伺服器應用程式的平臺。Node.js 是執行時，而 npm 是 Node.js 模組的包管理器。

Visual Studio Code 提供對 JavaScript 和 TypeScript 語言的開箱即用支援，以及 Node.js 除錯功能。但是，要執行 Node.js 應用程式，您需要在您的機器上安裝 Node.js 執行時。

要開始本演練，請為您的平臺安裝 Node.js。Node 包管理器已包含在 Node.js 發行版中。您需要開啟一個新的終端（命令提示符），以便 node 和 npm 命令列工具位於您的 PATH 中。

要測試您是否已正確安裝 Node.js，請開啟一個新的終端並鍵入 node --version，您應該會看到當前安裝的 Node.js 版本。

Linux：有適用於各種 Linux 版本的特定 Node.js 包。請參閱透過包管理器安裝 Node.js，以找到適合您的 Linux 版本的 Node.js 包和安裝說明。

適用於 Linux 的 Windows 子系統：如果您使用的是 Windows，WSL 是進行 Node.js 開發的好方法。您可以在 Windows 上執行 Linux 發行版，並將 Node.js 安裝到 Linux 環境中。結合 WSL 擴充套件，您可以在 WSL 環境中獲得完整的 VS Code 編輯和除錯支援。要了解更多資訊，請訪問在 WSL 中開發或嘗試在 WSL 中工作教程。

Hello World

讓我們從建立最簡單的 Node.js 應用程式“Hello World”開始。

建立一個名為 "hello" 的空資料夾，導航到該資料夾並開啟 VS Code

mkdir hello
cd hello
code .

提示： 您可以直接從命令列開啟檔案或資料夾。句點“.”表示當前資料夾，因此 VS Code 將啟動並開啟 Hello 資料夾。

在檔案資源管理器工具欄中，按“新建檔案”按鈕

File Explorer New File

並將檔案命名為 app.js

File Explorer app.js

透過使用 .js 副檔名，VS Code 將此檔案解釋為 JavaScript，並使用 JavaScript 語言服務評估其內容。請參閱 VS Code JavaScript 語言主題，瞭解有關 JavaScript 支援的更多資訊。

在 app.js 中建立一個簡單的字串變數，並將字串的內容傳送到控制檯

var msg = 'Hello World';
console.log(msg);

請注意，當您鍵入 console. 時，console 物件的智慧感知會自動呈現給您。

console IntelliSense

還要注意，VS Code 根據 'Hello World' 的初始化，知道 msg 是一個字串。如果您鍵入 msg.，您將看到智慧感知顯示 msg 上所有可用的字串函式。

string IntelliSense

在嘗試智慧感知後，撤銷上述原始碼示例中的任何額外更改並儲存檔案（⌘S (Windows, Linux Ctrl+S)）。

執行 Hello World

使用 Node.js 執行 app.js 很簡單。在終端中，只需鍵入

node app.js

您應該會在終端中看到“Hello World”輸出，然後 Node.js 返回。

整合終端

VS Code 有一個整合終端，您可以使用它來執行 shell 命令。您可以直接從那裡執行 Node.js，避免在執行命令列工具時切換出 VS Code。

檢視 > 終端（⌃` (Windows, Linux Ctrl+`)，使用反引號字元）將開啟整合終端，您可以在那裡執行 node app.js

integrated terminal

對於本演練，您可以使用外部終端或 VS Code 整合終端來執行命令列工具。

除錯 Hello World

如簡介中所述，VS Code 附帶了一個用於 Node.js 應用程式的偵錯程式。讓我們嘗試除錯我們的簡單 Hello World 應用程式。

要在 app.js 中設定斷點，請將編輯器游標放在第一行並按 F9 或單擊行號旁邊的編輯器左側邊距。邊距中將出現一個紅色圓圈。

app.js breakpoint set

要開始除錯，請在活動欄中選擇執行和除錯檢視

Run icon

您現在可以單擊除錯工具欄綠色箭頭或按 F5 啟動並除錯“Hello World”。您的斷點將被命中，您可以檢視並單步執行簡單的應用程式。請注意，VS Code 會顯示不同顏色的狀態列以指示它處於除錯模式，並且會顯示除錯控制檯。

hello world debugging

現在您已經看到了 VS Code 與“Hello World”的實際操作，下一節將展示如何將 VS Code 與一個全棧 Node.js Web 應用程式一起使用。

注意： 我們已經完成了“Hello World”示例，所以在建立 Express 應用程式之前，請導航出該資料夾。如果您願意，可以刪除“Hello”資料夾，因為其餘演練不需要它。

一個 Express 應用程式

Express 是一個非常流行的應用程式框架，用於構建和執行 Node.js 應用程式。您可以使用 Express Generator 工具腳手架（建立）一個新的 Express 應用程式。Express Generator 作為 npm 模組釋出，並使用 npm 命令列工具 npm 安裝。

提示： 要測試您是否已正確安裝 npm，請在終端中鍵入 npm --help，您應該會看到使用文件。

透過在終端中執行以下命令安裝 Express Generator

npm install -g express-generator

-g 開關將 Express Generator 全域性安裝在您的機器上，因此您可以從任何地方執行它。

我們現在可以透過執行以下命令來腳手架一個新的名為 myExpressApp 的 Express 應用程式

express myExpressApp --view pug

這將建立一個名為 myExpressApp 的新資料夾，其中包含您的應用程式內容。--view pug 引數告訴生成器使用 pug 模板引擎。

要安裝所有應用程式依賴項（同樣作為 npm 模組釋出），請進入新資料夾並執行 npm install

cd myExpressApp
npm install

此時，我們應該測試我們的應用程式是否執行。生成的 Express 應用程式有一個 package.json 檔案，其中包含一個 start 指令碼來執行 node ./bin/www。這將啟動 Node.js 應用程式執行。

在 Express 應用程式資料夾的終端中，執行

npm start

Node.js Web 伺服器將啟動，您可以瀏覽到 https://:3000 檢視正在執行的應用程式。

Your first Node Express App

出色的程式碼編輯

關閉瀏覽器，並在 myExpressApp 資料夾的終端中，按 CTRL+C 停止 Node.js 伺服器。

現在啟動 VS Code

code .

注意： 如果您一直使用 VS Code 整合終端來安裝 Express 生成器並腳手架應用程式，您可以使用檔案 > 開啟資料夾命令從正在執行的 VS Code 例項中開啟 myExpressApp 資料夾。

Node.js 和 Express 文件很好地解釋瞭如何使用平臺和框架構建豐富的應用程式。Visual Studio Code 將透過提供出色的程式碼編輯和導航體驗，讓您在開發這些型別的應用程式時更高效。

開啟檔案 app.js 並將滑鼠懸停在 Node.js 全域性物件 __dirname 上。請注意 VS Code 如何理解 __dirname 是一個字串。更有趣的是，您可以獲得針對 Node.js 框架的完整智慧感知。例如，您可以要求 http 並在 Visual Studio Code 中鍵入時獲得針對 http 類的完整智慧感知。

VS Code 使用 TypeScript 型別宣告（型別定義）檔案（例如 node.d.ts）向 VS Code 提供有關您在應用程式中使用的基於 JavaScript 的框架的元資料。型別宣告檔案是用 TypeScript 編寫的，因此它們可以表達引數和函式的資料型別，從而允許 VS Code 提供豐富的智慧感知體驗。由於一個名為 自動型別獲取 的功能，您不必擔心下載這些型別宣告檔案，VS Code 會自動為您安裝它們。

您還可以編寫引用其他檔案中模組的程式碼。例如，在 app.js 中，我們需要 ./routes/index 模組，它匯出一個 Express.Router 類。如果您在 index 上調出智慧感知，您可以看到 Router 類的形狀。

Express.Router IntelliSense

除錯您的 Express 應用程式

您需要為您的 Express 應用程式建立一個偵錯程式配置檔案 launch.json。點選活動欄中的執行和除錯（⇧⌘D (Windows, Linux Ctrl+Shift+D)），然後選擇建立 launch.json 檔案連結以建立預設的 launch.json 檔案。透過確保 configurations 中的 type 屬性設定為 "node" 來選擇 Node.js 環境。當檔案首次建立時，VS Code 將在 package.json 中查詢 start 指令碼，並將該值用作啟動程式配置的 program（在此示例中為 "${workspaceFolder}\\bin\\www）。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}\\bin\\www"
    }
  ]
}

儲存新檔案，並確保在執行和除錯檢視頂部的配置下拉列表中選擇了啟動程式。開啟 app.js，並在建立 Express 應用程式物件的檔案頂部附近設定一個斷點，方法是單擊行號左側的邊距。按 F5 啟動除錯應用程式。VS Code 將在新終端中啟動伺服器並命中我們設定的斷點。從那裡您可以檢查變數、建立監視並單步執行程式碼。

Debug session

部署您的應用程式

如果您想了解如何部署您的 Web 應用程式，請檢視將應用程式部署到 Azure 教程，其中我們展示瞭如何在 Azure 中執行您的網站。

後續步驟

Visual Studio Code 還有更多值得探索的功能，請嘗試以下主題

Node.js 配置檔案模板 - 使用精選的擴充套件、設定和程式碼片段集建立新的配置檔案。
設定 - 瞭解如何根據您的工作方式自定義 VS Code。
除錯 - 這是 VS Code 真正出彩的地方。
影片：VS Code 除錯入門 - 瞭解如何在 VS Code 中使用除錯功能。
Node.js 除錯 - 瞭解有關 VS Code 內建 Node.js 除錯功能的更多資訊。
除錯秘訣 - 客戶端和容器除錯等場景的示例。
任務 - 使用 Gulp、Grunt 和 Jake 執行任務。顯示錯誤和警告。

09/11/2025