在開發 Angular 應用時，我最依賴的工具之一就是 Angular Language Service。它可以讓 IDE 直接看懂 Angular 模板語法，提供語法自動補完、錯誤檢查與程式碼跳轉，大幅減少我在模板綁定上犯的錯。這篇筆記整理它的三大功能，以及如何在 Visual Studio Code、WebStorm 與 Sublime Text 上安裝。
Angular Language Service 能做什麼？
語法自動補完
自動完成可以通過在輸入時提供可能要填入的值讓我們選擇，以加速開發的速度，如下圖：
錯誤檢查
可以檢查像是模版變數是否在元件內有對應的變數供綁定，拼錯或漏定義時立刻看到紅字提示：
跳轉到模版變數或方法所指向的程式碼位置
單擊並按下 F12，就能進入相對應的變數位置，在模板與元件類別之間來回不用再手動搜尋：
哪些 IDE 可以使用 Angular Language Service？
Visual Studio Code
方法一：直接安裝擴充套件——在 VSCode 的擴充功能裡搜尋並下載 Angular Language Service：
方法二：自行使用 VSIX 安裝
- 下載附加元件：直接按此下載 ngls.vsix（原始專案位置：vscode-ng-language-service）。
- 打開 VSCode，按下
command+shift+P打開指令列，輸入：
install from VSIX
- 選擇剛剛下載的檔案，Reload 之後 VSCode 就可以支援 Angular Language Service 了！
WebStorm
在 package.json 加上：
devDependencies {
"@angular/language-service": "^4.0.0"
}
然後執行：
npm install
Sublime Text
在專案下執行下面兩個指令：
npm install --save-dev typescript
npm install --save-dev @angular/language-service
常見問題
Angular Language Service 是什麼？
它是 Angular 官方提供的語言服務，讓 IDE 能理解 Angular 模板語法。安裝後可獲得語法自動補完、模板錯誤檢查，以及從模板跳轉到元件程式碼的能力。
在 VSCode 上最快怎麼安裝 Angular Language Service？
最快的做法是打開擴充功能面板，搜尋「Angular Language Service」直接安裝官方套件。若無法使用市集，也可以到 GitHub 下載 .vsix 檔，用 install from VSIX 指令手動安裝。
WebStorm 需要另外安裝外掛嗎？
WebStorm 不用裝外掛，只要在 package.json 的 devDependencies 加上 @angular/language-service 套件，執行 npm install 即可。
Sublime Text 要怎麼支援 Angular 模板？
在專案目錄下分別執行 npm install --save-dev typescript 與 npm install --save-dev @angular/language-service，讓語言服務透過 TypeScript 一起運作。
參考資料
延伸閱讀
- Angular Service 建立教學：用 CLI 產生 HeroService 並回傳 Observable：同屬「前端開發」主題，可延伸理解相近問題的判斷方式。
- Angular 架構總覽：Component、Template、Metadata、NgModule、Directive 與 Dependency Injection 入門：同樣聚焦 angular，可接著比較不同情境的做法。
- Angular NPM 與 package.json 設定教學：同屬「前端開發」主題，可延伸理解相近問題的判斷方式。
最後更新
2026-08-28（原文發布於 2018-01-12，本文保留原始筆記內容並補上 GEO 結構。）
關於作者
Claire Chang ｜ 企業 AI 導入與流程轉型顧問。專注於 AI Agent 架構設計、ERP 系統整合與企業 AI 治理。
首次發布：2018-01-12