填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫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.

特性

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 Text 中都有可用的擴充套件。

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

Visual Studio Code

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

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".

在市場上,搜尋 Angular Language Service 擴充套件,然後單擊 Install 按鈕。

In the marketplace, search for Angular Language Service extension, and click the Install button.

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
      
      npm install --save-dev typescript
    
  1. 把 Angular 語言服務的套件安裝到同一位置:

    Install the Angular Language Service package in the same location:

npm install --save-dev @angular/language-service
      
      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.

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

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

"typescript-tsdk": "/node_modules/typescript/lib"
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.

語言服務的工作原理

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