🚀 在 VS Code 中！

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 Package Manager 包含在 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 物件上的 IntelliSense。

console IntelliSense

另請注意，VS Code 知道 msg 是以 'Hello World' 初始化為基礎的字串。如果您輸入 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 會顯示不同的彩色狀態列，以指示其處於偵錯模式，且 DEBUG 主控台會顯示出來。

hello world debugging

既然您已了解 VS Code 如何搭配「Hello World」運作，下一節將說明如何搭配完整堆疊 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 檔案，其中包含執行 node ./bin/www 的 start 指令碼。這會啟動 Node.js 應用程式執行。

從 Express 應用程式資料夾中的終端機執行

npm start

Node.js Web 伺服器將會啟動，您可以瀏覽至 https://127.0.0.1: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 架構取得完整的 IntelliSense。例如，您可以要求 http，並在 Visual Studio Code 中輸入時針對 http 類別取得完整的 IntelliSense。

http IntelliSense

VS Code 使用 TypeScript 型別宣告 (型別資訊) 檔案 (例如 node.d.ts) 向 VS Code 提供關於您在應用程式中取用的 JavaScript 架構的中繼資料。型別宣告檔案是以 TypeScript 撰寫，因此它們可以表示參數和函式的資料型別，讓 VS Code 能夠提供豐富的 IntelliSense 體驗。由於稱為 Automatic Type Acquisition 的功能，您不必擔心下載這些型別宣告檔案，VS Code 會自動為您安裝它們。

您也可以撰寫程式碼，參考其他檔案中的模組。例如，在 app.js 中，我們要求 ./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 還有更多值得探索的地方，請嘗試下列主題

02/06/2025