在 Visual Studio Code 中使用 Angular

Angular 是由 Google 開發及維護的熱門 Web 開發平台。Angular 使用 TypeScript 作為其主要程式語言。Visual Studio Code 編輯器開箱即用，支援 TypeScript IntelliSense 和程式碼導覽，因此您無需安裝任何其他擴充功能即可進行 Angular 開發。

Welcome to app

注意：為了協助您開始 Angular 開發，您可以使用 Angular 設定檔範本，其中包含實用的擴充功能、設定和程式碼片段。

Angular 歡迎使用

在本教學中，我們將使用 Angular CLI。若要安裝及使用命令列介面，以及執行 Angular 應用程式伺服器，您需要安裝 Node.js JavaScript 執行階段和 npm (Node.js 套件管理員)。npm 隨附於 Node.js，您可以從 Node.js 下載中安裝。

提示：若要測試您是否已在電腦上正確安裝 Node.js 和 npm，您可以輸入 node --version 和 npm --version。

若要安裝 Angular CLI，請在終端機或命令提示字元中輸入

npm install -g @angular/cli

這可能需要幾分鐘才能安裝完成。您現在可以輸入以下命令來建立新的 Angular 應用程式

ng new my-app

my-app 是您應用程式的資料夾名稱。ng new 命令會提示您輸入產生應用程式的選項。按 Enter 鍵接受預設值。這可能需要幾分鐘才能以 TypeScript 建立 Angular 應用程式並安裝其相依性。

讓我們快速執行 Angular 應用程式，方法是導覽至新資料夾，然後輸入 ng serve 以啟動 Web 伺服器，並在瀏覽器中開啟應用程式

cd my-app
ng serve

您應該會在瀏覽器中的 https://127.0.0.1:4200 上看到「Welcome to app!!」。在我們使用 VS Code 查看應用程式時，我們將讓 Web 伺服器保持執行狀態。

若要在 VS Code 中開啟您的 Angular 應用程式，請開啟另一個終端機 (或命令提示字元)，然後導覽至 my-app 資料夾並輸入 code .

cd my-app
code .

語法醒目提示和括號比對

現在展開 src\app 資料夾，然後選取 app.component.ts 檔案。您會注意到 VS Code 針對各種原始碼元素具有語法醒目提示，而且如果您將游標放在括號上，也會選取相符的括號。

angular bracket matching

IntelliSense

當您將滑鼠游標停留在檔案中的文字上方時，您會看到 VS Code 提供您原始碼中重要項目的相關資訊。變數、類別和 Angular 裝飾器等項目是您會看到此資訊的幾個範例。

angular decorator hover

當您開始在 app.component.ts 中輸入時，您會看到智慧建議和程式碼片段。

angular suggestions

您可以按一下資訊按鈕 (i) 以查看包含更多文件資訊的浮出視窗。

angular intellisense

VS Code 使用 TypeScript 語言服務來取得程式碼智慧 (IntelliSense)，而且它具有稱為自動類型取得 (ATA) 的功能。ATA 會針對 package.json 中參考的 npm 模組，提取 npm 類型宣告檔案 (*.d.ts)。

移至定義、查看定義

透過 TypeScript 語言服務，VS Code 也可以透過 [移至定義] (F12) 或 [查看定義] (⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10))，在編輯器中提供類型定義資訊。開啟 app.module.ts 檔案，然後將游標放在 bootstrap 屬性宣告中的 AppComponent 上，按一下滑鼠右鍵並選取 [查看定義]。這時會開啟查看視窗，顯示 app.component.ts 中的 AppComponent 定義。

angular peek definition

按 Escape 鍵關閉 [查看] 視窗。

Hello World

讓我們將範例應用程式更新為「Hello World」。返回 app.component.ts 檔案，然後將 AppComponent 中的 title 字串變更為「Hello World」。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello World';
}

儲存 app.component.ts 檔案後，伺服器的執行個體將會更新網頁，而且您會看到「Welcome to Hello World!!」。

提示：VS Code 支援自動儲存，預設會在延遲後儲存您的檔案。勾選 [檔案] 功能表中的 [自動儲存] 選項以開啟自動儲存，或直接設定 files.autoSave 使用者設定。

hello world

偵錯 Angular

若要偵錯用戶端 Angular 程式碼，我們將使用內建的 JavaScript 偵錯工具。

注意：本教學假設您已安裝 Edge 瀏覽器。如果您想要使用 Chrome 進行偵錯，請將啟動 type 取代為 chrome。Firefox 瀏覽器也有偵錯工具 Firefox。

設定中斷點

若要在 app.component.ts 中設定中斷點，請按一下行號左側的邊界。這會設定一個中斷點，並以紅色圓圈顯示。

set a breakpoint

設定偵錯工具

我們需要先設定偵錯工具。若要執行此操作，請前往 [執行與偵錯] 檢視 (⇧⌘D (Windows、Linux Ctrl+Shift+D))，然後選取 [建立 launch.json 檔案] 連結以建立 launch.json 偵錯工具組態檔。從 [選取偵錯工具] 下拉式清單中選擇 [Web 應用程式 (Edge)]。這會在您專案的新 .vscode 資料夾中建立 launch.json 檔案，其中包含啟動網站的組態。

我們需要針對我們的範例進行一項變更：將 url 的連接埠從 8080 變更為 4200。您的 launch.json 應如下所示

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "https://127.0.0.1:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

按 F5 鍵或綠色箭頭以啟動偵錯工具並開啟新的瀏覽器執行個體。設定中斷點的原始碼會在偵錯工具附加之前在啟動時執行，因此我們在重新整理網頁之前不會命中中斷點。重新整理頁面，您應該就會命中中斷點。

hit breakpoint

您可以逐步執行原始碼 (F10)、檢查變數 (例如 AppComponent)，並查看用戶端 Angular 應用程式的呼叫堆疊。

debug variable

如需偵錯工具及其可用選項的詳細資訊，請參閱我們關於瀏覽器偵錯的文件。

Angular 設定檔範本

設定檔可讓您根據目前的專案或工作，快速切換您的擴充功能、設定和 UI 版面配置。為了協助您開始 Angular 開發，您可以使用 Angular 設定檔範本，這是一個包含實用擴充功能和設定的精選設定檔。您可以依原樣使用設定檔範本，或將其用作起點，進一步自訂以符合您自己的工作流程。

您可以透過 [設定檔] > [建立設定檔...] 下拉式清單選取設定檔範本

選取設定檔範本後，您可以檢閱設定和擴充功能，如果您不想將個別項目包含在新的設定檔中，也可以移除它們。根據範本建立新的設定檔後，對設定、擴充功能或 UI 所做的變更會保存在您的設定檔中。

Angular 擴充功能

除了 VS Code 開箱即用提供的功能之外，您還可以安裝 VS Code 擴充功能以獲得更強大的功能。

按一下上方的擴充功能磚，以閱讀 Marketplace 上的描述和評論。

若要尋找其他 Angular 擴充功能，請開啟 [擴充功能] 檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X))，然後輸入「angular」以查看 Angular 擴充功能的篩選清單。

angular extensions

社群也建立了「擴充功能套件」，將實用的擴充功能 (例如，程式碼檢查器、偵錯工具和程式碼片段) 捆綁在一起，以便單次下載。若要查看可用的 Angular 擴充功能套件，請將「extension packs」類別新增至您的篩選器 (angular @category:"extension packs")。

02/06/2025