在 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://:4200 上看到“Welcome to app!!”。我們將讓 Web 伺服器執行，同時使用 VS Code 檢視應用程式。

要在 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 瀏覽器的偵錯程式。

設定斷點

要在 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://:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

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

hit breakpoint

您可以逐行執行原始碼（F10），檢查變數（如 AppComponent），並檢視客戶端 Angular 應用程式的呼叫堆疊。

debug variable

有關偵錯程式及其可用選項的更多資訊，請參閱我們關於瀏覽器除錯的文件。

Angular 配置模板

配置（Profiles）允許您根據當前專案或任務快速切換擴充套件、設定和 UI 佈局。為了幫助您開始 Angular 開發，您可以使用 Angular 配置模板，這是一個精選的配置，包含有用的擴充套件和設定。您可以直接使用配置模板，也可以將其作為起點，根據自己的工作流程進行進一步自定義。

您透過“**配置檔案**”>“**建立配置檔案...**”下拉選單選擇一個配置檔案模板

一旦你選擇了一個配置檔案模板，你可以審查其設定和擴充套件，並且如果你不想將某些項包含在新配置檔案中，可以單獨移除它們。基於模板建立新配置檔案後，對設定、擴充套件或 UI 所做的更改將持久化在你的配置檔案中。

Angular 擴充套件

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

單擊上面的擴充套件磁貼，在市場上閱讀說明和評論。

要查詢其他 Angular 擴充套件，請開啟擴充套件檢視（⇧⌘X (Windows, Linux Ctrl+Shift+X)），然後鍵入“angular”以檢視 Angular 擴充套件的過濾列表。

angular extensions

社群還建立了“擴充套件包”，它們將有用的擴充套件（例如，linter、偵錯程式和程式碼片段）捆綁在一起，一次下載。要檢視可用的 Angular 擴充套件包，請將“擴充套件包”類別新增到您的過濾器中（angular @category:"extension packs"）。

12/10/2025