在 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 套件管理員（npm）已包含在 Node.js 發行版本中。您需要開啟新的終端機（命令提示字元），以便讓 node 與 npm 命令列工具加入您的 PATH 環境變數。

若要測試您的電腦是否已正確安裝 Node.js，請開啟新的終端機並輸入 node --version，您應該會看到目前安裝的 Node.js 版本。

Linux：針對各種不同的 Linux 版本，皆有專屬的 Node.js 套件。請參閱透過套件管理員安裝 Node.js，以尋找適合您 Linux 版本的 Node.js 套件與安裝說明。

適用於 Linux 的 Windows 子系統 (WSL)：如果您使用 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 物件的 IntelliSense 會自動呈現給您。

console IntelliSense

同時請注意，VS Code 根據初始化內容 'Hello World'，已知 msg 是一個字串。如果您輸入 msg.，您將會看到 IntelliSense 顯示所有可用於 msg 的字串函式。

string IntelliSense

體驗過 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 --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 檔案，其中包含一個用於執行 node ./bin/www 的 start 指令碼。這將啟動 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 generator 並建構應用程式，則可以使用檔案 > 開啟資料夾指令，從執行中的 VS Code 實例開啟 myExpressApp 資料夾。

Node.js 與 Express 文件對於如何使用該平台與框架建置功能豐富的應用程式，有著極佳的說明。Visual Studio Code 透過提供出色的程式碼編輯與導覽體驗，將能讓您在開發這類應用程式時更具生產力。

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

VS Code 使用 TypeScript 型別宣告檔 (typings，例如 node.d.ts) 來提供關於您在應用程式中使用的 JavaScript 框架的後設資料。型別宣告檔是以 TypeScript 編寫的，因此它們可以表達參數與函式的資料型別，讓 VS Code 能提供豐富的 IntelliSense 體驗。多虧了一項名為 自動型別取得 (Automatic Type Acquisition) 的功能，您不必擔心下載這些型別宣告檔，VS Code 會自動為您安裝。

您也可以撰寫引用其他檔案中模組的程式碼。例如，在 app.js 中，我們 require 了 ./routes/index 模組，它匯出了 Express.Router 類別。如果您在 index 上叫出 IntelliSense，您可以看到 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 指令碼，並將該值用作 Launch Program 設定中的 program（在此情況下為 "${workspaceFolder}\\bin\\www"）。

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

儲存新檔案，並確保在「執行與偵錯」檢視頂部的設定下拉式選單中選取了 Launch Program。開啟 app.js，並透過點擊行號左側的空白處，在檔案頂部建立 Express app 物件的地方設定一個中斷點。按下 F5 以開始偵錯應用程式。VS Code 將會在新的終端機中啟動伺服器並觸發我們設定的中斷點。從那裡開始，您可以檢查變數、建立監看式，並逐步執行您的程式碼。

Debug session

部署您的應用程式

如果您想了解如何部署您的 Web 應用程式，請參閱將應用程式部署至 Azure 教學，我們將會在其中展示如何讓您的網站在 Azure 上執行。

後續步驟

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

Node.js 設定檔範本 - 使用精選的擴充功能、設定與程式碼片段建立新的設定檔 (profile)。
設定 - 了解如何根據您的工作習慣自訂 VS Code。
偵錯 - 這是 VS Code 真正發光發熱的地方。
影片：VS Code 偵錯入門 - 了解如何在 VS Code 中使用偵錯功能。
Node.js 偵錯 - 進一步了解 VS Code 內建的 Node.js 偵錯功能。
偵錯範例 (Recipes) - 針對用戶端與容器偵錯等情境的範例。
工作 (Tasks) - 使用 Gulp、Grunt 與 Jake 執行工作。顯示錯誤與警告。

4/8/2026