Angular 語言服務(wù)

Angular 語言服務(wù)

Angular 語言服務(wù)為代碼編輯器提供了一種在 Angular 模板中獲取自動補全、錯誤、提示和導(dǎo)航的方法。它支持位于獨立 HTML 文件中的外部模板以及內(nèi)聯(lián)模板。

配置 Angular 語言服務(wù)的編譯器選項

要啟用最新的語言服務(wù)功能，請在 ?tsconfig.json? 中將 ?strictTemplates ?選項設(shè)置為 ?true?，如以下示例所示：

"angularCompilerOptions": {
  "strictTemplates": true
}

特性

編輯器會自動檢測到你正在打開 Angular 文件。然后，它就會使用 Angular Language Service 讀取 ?tsconfig.json? 文件，查找應(yīng)用程序中具有的所有模板，然后為你打開的任何模板提供語言服務(wù)。

語言服務(wù)包括：

• 自動補全清單
• AOT 診斷消息
• 快捷信息
• 轉(zhuǎn)到定義

自動補全

自動補全可以在輸入時為你提供當前情境下的候選內(nèi)容和提示，從而提高開發(fā)速度。下面這個例子展示了插值中的自動補全功能。當你進行輸入的時候，就可以按 tab 鍵來自動補全。

還有對元素的自動補全。你定義的任何組件的選擇器都會顯示在自動補全列表中。

錯誤檢查

Angular 語言服務(wù)能對代碼中存在的錯誤進行預(yù)警。在這個例子中，Angular 不知道什么是 ?orders ?或者它來自哪里。

快捷信息與導(dǎo)航

快捷信息功能使你可以懸停以查看組件、指令、模塊等的來源。然后，你可以單擊“轉(zhuǎn)到定義”或按 F12 鍵直接轉(zhuǎn)到定義。

編輯器中的 Angular 語言服務(wù)

Angular 語言服務(wù)目前在Visual Studio Code和WebStorm、Sublime Text 和  Eclipse IDE 中都有可用的擴展。

Visual Studio Code

在 Visual Studio Code 中，從 “擴展程序：市場 中安裝擴展程序?？梢杂米髠?cè)菜單窗格中的擴展程序圖標從編輯器中打開市場，或使用 VS 快速打開（在 Mac 上為 ?+ P，在 Windows 上為 CTRL + P）并輸入“? ext”。在市場中，搜索 Angular Language Service 擴展，并點擊 Install 按鈕。

Visual Studio Code 與 Angular 語言服務(wù)的集成工作是由 Angular 團隊發(fā)布的。

Visual Studio

在 Visual Studio 中，從“擴展程序：市場”中安裝擴展程序?？梢詮木庉嬈髦写蜷_市場，在頂部菜單窗格中選擇“擴展”，然后選擇“管理擴展”。在市場上，搜索 Angular Language Service extension，然后單擊“安裝”按鈕。

Microsoft 在 Angular 團隊的幫助下維護和發(fā)布了 Visual Studio 與 Angular 語言服務(wù)的集成。在這里查看項目。

WebStorm

在 WebStorm 中，啟用 Angular 與 AngularJS 插件。

從 WebStorm 2019.1 開始，?@angular/language-service? 已經(jīng)不再需要了，應(yīng)該從你的 ?package.json? 中移除。

Sublime Text

在 Sublime Text 中，當安裝為插件時，語言服務(wù)僅支持內(nèi)聯(lián)模板。你需要自定義 Sublime 插件（或修改當前插件），來實現(xiàn) HTML 文件中的自動補齊。

要想在內(nèi)聯(lián)模板中使用語言服務(wù)，你必須首先添加一個擴展，以支持 TypeScript，然后安裝 Angular 語言服務(wù)插件。從 TypeScript 2.3 開始，TypeScript 提供了一個插件模型，供語言服務(wù)使用。

1. 把最新版本的 TypeScript 安裝到本地的 ?node_modules ?目錄下：

npm install --save-dev typescript

2. 把 Angular 語言服務(wù)的包安裝到同一位置：

npm install --save-dev @angular/language-service

3. 安裝好這個包后，將以下內(nèi)容添加到項目的 ?tsconfig.json? 的 ?"compilerOptions"? 部分。

"plugins": [
    {"name": "@angular/language-service"}
]

4. 在編輯器的用戶首選項（?Cmd+,? 或 ?Ctrl+,?）中，添加以下內(nèi)容：

"typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"

這樣就能讓 Angular 語言服務(wù)提供 ?.ts? 文件中的診斷與自動補全信息。

Eclipse IDE

你或者直接安裝包含了 Angular Language Server 的 “Eclipse IDE for Web and JavaScript developers” 軟件包，或者直接從其他 Eclipse IDE 軟件包中安裝，使用“Help” > “Eclipse Marketplace” 來查找并安裝 Eclipse Wild Web Developer。

語言服務(wù)的工作原理

當你將編輯器與語言服務(wù)一起使用時，該編輯器將啟動一個單獨的語言服務(wù)進程，并使用語言服務(wù)協(xié)議通過 RPC 與之通信。當你輸入編輯器時，編輯器會將信息發(fā)送到語言服務(wù)流程，以跟蹤你的項目狀態(tài)。

當你觸發(fā)模板中的完成列表時，編輯器首先將模板解析為 HTML 抽象語法樹（AST）。Angular 編譯器解釋這棵樹以確定上下文：模板屬于哪個模塊，當前作用域，組件選擇器以及光標在模板 AST 中的位置。然后，它就可以確定可能位于該位置的符號。

如果你要進行插值，則需要更多的精力。如果你在 ?div ?有 ?{{data.---}}? 的插值，并且在 ?data.---? 之后需要自動補全列表，則編譯器無法使用 HTML AST 查找答案。HTML AST 只能告訴編譯器某些文本帶有字符 “?{{data.---}}?”。那時模板解析器會生成一個表達式 AST，該表達式位于模板 AST 中。然后，Angular 語言服務(wù)會在其上下文中查找 ?data.---?，詢問 TypeScript 語言服務(wù) ?data ?的成員是什么，并返回可能性列表。