填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

Angular 語言服務

Angular Language Service

Angular 語言服務為程式碼編輯器提供了一種在 Angular 範本中獲取自動自動完成、錯誤、提示和導航的方法。 它支援位於獨立 HTML 檔案中的外部範本以及內聯範本。

The Angular Language Service provides code editors with a way to get completions, errors, hints, and navigation inside Angular templates. It works with external templates in separate HTML files, and also with in-line templates.

配置 Angular 語言服務的編譯器選項

Configuring compiler options for the Angular Language Service

要啟用最新的語言服務功能,請在 tsconfig.json 中將 strictTemplates 選項設定為 true,如以下示例所示:

To enable the latest Language Service features, set the strictTemplates option in tsconfig.json by setting strictTemplates to true, as shown in the following example:

      
      "angularCompilerOptions": {
  "strictTemplates": true
}
    

有關更多資訊,請參見 Angular 編譯器選項指南。

For more information, see the Angular compiler options guide.

特性

Features

編輯器會自動檢測到你正在開啟 Angular 檔案。然後,它就會使用 Angular Language Service 讀取 tsconfig.json 檔案,查詢應用程式中具有的所有範本,然後為你開啟的任何範本提供語言服務。

Your editor autodetects that you are opening an Angular file. It then uses the Angular Language Service to read your tsconfig.json file, find all the templates you have in your application, and then provide language services for any templates that you open.

語言服務包括:

Language services include:

  • 自動自動完成清單

    Completions lists

  • AOT 診斷訊息

    AOT Diagnostic messages

  • 快捷資訊

    Quick info

  • 轉到定義

    Go to definition

自動自動完成

Autocompletion

自動自動完成可以在輸入時為你提供當前情境下的候選內容和提示,從而提高開發速度。下面這個例子展示了插值中的自動自動完成功能。當你進行輸入的時候,就可以按 tab 鍵來自動自動完成。

Autocompletion can speed up your development time by providing you with contextual possibilities and hints as you type. This example shows autocomplete in an interpolation. As you type it out, you can hit tab to complete.

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

There are also completions within elements. Any elements you have as a component selector will show up in the completion list.

錯誤檢查

Error checking

Angular 語言服務能對程式碼中存在的錯誤進行預警。在這個例子中,Angular 不知道什麼是 orders 或者它來自哪裡。

The Angular Language Service can forewarn you of mistakes in your code. In this example, Angular doesn't know what orders is or where it comes from.

快捷資訊與導航

Quick info and navigation

快捷資訊功能使你可以懸停以檢視元件、指令、模組等的來源。然後,你可以單擊“轉到定義”或按 F12 鍵直接轉到定義。

The quick-info feature allows you to hover to see where components, directives, modules, and so on come from. You can then click "Go to definition" or press F12 to go directly to the definition.

編輯器中的 Angular 語言服務

Angular Language Service in your editor

Angular 語言服務目前在Visual Studio CodeWebStormSublime TextEclipse IDE 中都有可用的擴充套件。

Angular Language Service is currently available as an extension for Visual Studio Code, WebStorm, Sublime Text and Eclipse IDE.

Visual Studio Code

Visual Studio Code 中,從 “擴充套件程式:市場 中安裝擴充套件程式。你可以使用左側選單窗格中的擴充套件程式圖示從編輯器中開啟市場,或使用 VS 快速開啟(在 Mac 上為 ⌘+ P,在 Windows 上為 CTRL + P)並輸入“? ext”。在市場中,搜尋 Angular Language Service 擴充套件,並點選 Install 按鈕。

In Visual Studio Code, install the extension from the Extensions: Marketplace. You can open the marketplace from the editor using the Extensions icon on the left menu pane, or use VS Quick Open (⌘+P on Mac, CTRL+P on Windows) and type "? ext". In the marketplace, search for Angular Language Service extension, and click the Install button.

Visual Studio Code 與 Angular 語言服務的整合工作是由 Angular 團隊發佈的。

The Visual Studio Code integration with the Angular language service is maintained and distributed by the Angular team.

Visual Studio

Visual Studio 中,從“擴充套件程式:市場”中安裝擴充套件程式。你可以從編輯器中開啟市場,在頂部選單窗格中選擇“擴充套件”,然後選擇“管理擴充套件”。在市場上,搜尋 Angular Language Service extension,然後單擊“安裝”按鈕。

In Visual Studio, install the extension from the Extensions: Marketplace. You can open the marketplace from the editor selecting Extensions on the top menu pane, and then selecting Manage Extensions. In the marketplace, search for Angular Language Service extension, and click the Install button.

Microsoft 在 Angular 團隊的幫助下維護和發佈了 Visual Studio 與 Angular 語言服務的整合。在這裡檢視專案

The Visual Studio integration with the Angular language service is maintained and distributed by Microsoft with help from the Angular team. Check out the project here

WebStorm

WebStorm 中,啟用 Angular 與 AngularJS 外掛。

In WebStorm, enable the plugin Angular and AngularJS.

從 WebStorm 2019.1 開始,@angular/language-service 已經不再需要了,應該從你的 package.json 中移除。

Since WebStorm 2019.1, the @angular/language-service is not required anymore and should be removed from your package.json.

Sublime Text

Sublime Text 中,當安裝為外掛時,語言服務僅支援內聯範本。 你需要自訂 Sublime 外掛(或修改當前外掛),來實現 HTML 檔案中的自動補齊。

In Sublime Text, the Language Service supports only in-line templates when installed as a plug-in. You need a custom Sublime plug-in (or modifications to the current plug-in) for completions in HTML files.

要想在內聯範本中使用語言服務,你必須首先新增一個擴充套件,以支援 TypeScript,然後安裝 Angular 語言服務外掛。從 TypeScript 2.3 開始,TypeScript 提供了一個外掛模型,供語言服務使用。

To use the Language Service for in-line templates, you must first add an extension to allow TypeScript, then install the Angular Language Service plug-in. Starting with TypeScript 2.3, TypeScript has a plug-in model that the language service can use.

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

    Install the latest version of TypeScript in a local node_modules directory:

      
      npm install --save-dev typescript
    
  1. 把 Angular 語言服務的套件安裝到同一位置:

    Install the Angular Language Service package in the same location:

      
      npm install --save-dev @angular/language-service
    
  1. 安裝好這個包後,將以下內容新增到專案的 tsconfig.json"compilerOptions" 部分。

    Once the package is installed, add the following to the "compilerOptions" section of your project's tsconfig.json.

tsconfig.json
      
      "plugins": [
    {"name": "@angular/language-service"}
]
    
  1. 在編輯器的使用者首選項(Cmd+,Ctrl+,)中,新增以下內容:

    In your editor's user preferences (Cmd+, or Ctrl+,), add the following:

Sublime Text user preferences
      
      "typescript-tsdk": "/node_modules/typescript/lib"
    

這樣就能讓 Angular 語言服務提供 .ts 檔案中的診斷與自動自動完成資訊。

This allows the Angular Language Service to provide diagnostics and completions in .ts files.

Eclipse IDE

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

Either directly install the "Eclipse IDE for Web and JavaScript developers" package which comes with the Angular Language Server included, or from other Eclipse IDE packages, use Help > Eclipse Marketplace to find and install Eclipse Wild Web Developer.

語言服務的工作原理

How the Language Service works

當你將編輯器與語言服務一起使用時,該編輯器將啟動一個單獨的語言服務程序,並使用語言服務協議透過 RPC 與之通訊。當你輸入編輯器時,編輯器會將資訊傳送到語言服務流程,以追蹤你的專案狀態。

When you use an editor with a language service, the editor starts a separate language-service process and communicates with it through an RPC, using the Language Server Protocol. When you type into the editor, the editor sends information to the language-service process to track the state of your project.

當你觸發範本中的完成列表時,編輯器首先將範本解析為 HTML 抽象語法樹(AST)。Angular 編譯器解釋這棵樹以確定上下文:範本屬於哪個模組,當前作用域,元件選擇器以及游標在範本 AST 中的位置。然後,它就可以確定可能位於該位置的符號。

When you trigger a completion list within a template, the editor first parses the template into an HTML abstract syntax tree (AST). The Angular compiler interprets that tree to determine the context: which module the template is part of, the current scope, the component selector, and where your cursor is in the template AST. It can then determine the symbols that could potentially be at that position..

如果你要進行插值,則需要更多的精力。如果你在 div{{data.---}} 的插值,並且在 data.--- 之後需要自動自動完成列表,則編譯器無法使用 HTML AST 查詢答案。HTML AST 只能告訴編譯器某些文字帶有字元 “{{data.---}}”。 那時範本解析器會產生一個表示式 AST,該表示式位於範本 AST 中。然後,Angular 語言服務會在其上下文中查詢 data.---,詢問 TypeScript 語言服務 data 的成員是什麼,並返回可能性列表。

It's a little more involved if you are in an interpolation. If you have an interpolation of {{data.---}} inside a div and need the completion list after data.---, the compiler can't use the HTML AST to find the answer. The HTML AST can only tell the compiler that there is some text with the characters "{{data.---}}". That's when the template parser produces an expression AST, which resides within the template AST. The Angular Language Services then looks at data.--- within its context, asks the TypeScript Language Service what the members of data are, and returns the list of possibilities.

更多資訊

More information