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 語言服務對其內容進行求值。有關 JavaScript 支援的更多資訊，請參閱 VS Code 的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

現在您已在“Hello World”中看到了 VS Code 的實際應用，下一節將介紹如何在完整的全棧 Node.js Web 應用中使用 VS Code。

注意： 我們已經完成了“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 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）為 VS Code 提供有關您在應用程式中使用的基於 JavaScript 的框架的元資料。型別宣告檔案是用 TypeScript 編寫的，因此它們可以表達引數和函式的資料型別，從而使 VS Code 能夠提供豐富的 IntelliSense 體驗。感謝“自動型別獲取”功能，您不必擔心下載這些型別宣告檔案，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 指令碼，並將其值用作“啟動程式”配置的 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 profile template - 使用精選的擴充套件、設定和程式碼片段建立新的配置檔案。
設定 - 瞭解如何根據您的工作方式自定義 VS Code。
除錯 - 這是 VS Code 真正出彩的地方。
影片：VS Code 除錯入門 - 瞭解如何在 VS Code 中使用除錯。
Node.js 除錯 - 瞭解更多關於 VS Code 內建的 Node.js 除錯功能。
除錯配方 - 客戶端除錯和容器除錯等場景的示例。
任務 - 使用 Gulp、Grunt 和 Jake 執行任務。顯示錯誤和警告。

12/10/2025