Angular 语言服务link

Angular Language Servicelink

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.

特性link

Featureslink

编辑器会自动检测到你正在打开 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

自动补全link

Autocompletionlink

自动补全可以在输入时为你提供当前情境下的候选内容和提示，从而提高开发速度。下面这个例子展示了插值中的自动补全功能。当你进行输入的时候，就可以按 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.

错误检查link

Error checkinglink

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.

快捷信息与导航link

Quick info and navigationlink

快捷信息功能使你可以悬停以查看组件、指令、模块等的来源。然后，你可以单击“转到定义”或按 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 语言服务link

Angular Language Service in your editorlink

Angular 语言服务目前在Visual Studio Code和WebStorm 和 Sublime Text 中都有可用的扩展。

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

Visual Studio Codelink

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

WebStormlink

在 WebStorm 中，必须将语言服务包安装为项目依赖项。

In WebStorm, you must install the language service package as a project dependency.

1. 将以下内容添加到项目的 package.json devDependencies 中

   Add the following to your devDependencies in your project's package.json

      
        content_copy
      
      devDependencies {
  "@angular/language-service": "^6.0.0"
}
    

2. 打开终端窗口，在项目根目录下使用 npm 或 yarn 来安装这些 devDependencies：

   In the terminal window at the root of your project, install the devDependencies with npm or yarn:

      
        content_copy
      
      npm install
    

或

OR

      
        content_copy
      
      yarn
    

或

OR

      
        content_copy
      
      yarn install
    

当 Angular 插件发现这个开发依赖时，就会在 WebStorm 环境中提供语言服务。 除了 Angular 语言服务提供的这些功能之外，WebStorm 还会提供自动补齐和模板代码着色功能。

When Angular sees this dev dependency, it provides the language service in the WebStorm environment. WebStorm then gives you colorization inside the template and autocomplete in addition to the Angular Language Service.

Sublime Textlink

在 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:

      
        content_copy
      
      npm install --save-dev typescript
    

2. 把 Angular 语言服务的包安装到同一位置：

   Install the Angular Language Service package in the same location:

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

3. 安装好这个包后，将以下内容添加到项目的 tsconfig.json 的 "compilerOptions" 部分。

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

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

4. 在编辑器的用户首选项（Cmd+, 或 Ctrl+,）中，添加以下内容：

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

      
        content_copy
      
      "typescript-tsdk": "/node_modules/typescript/lib"
    

这样就能让 Angular 语言服务提供 .ts 文件中的诊断与自动补全信息。

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

语言服务的工作原理link

How the Language Service workslink

当你将编辑器与语言服务一起使用时，该编辑器将启动一个单独的语言服务进程，并使用语言服务协议通过 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.

更多信息link

More informationlink

• 有关该实现的更多详细信息，请参阅 Angular 语言服务 API。

  For more in-depth information on the implementation, see the Angular Language Service API.

• 有关此设计注意事项和意图的更多信息，请参见此处的设计文档。

  For more on the design considerations and intentions, see design documentation here.

• 另请参阅 ng-conf 2017 上 Chuck Jazdzewski 关于 Angular 语言服务的 演讲。

  See also Chuck Jazdzewski's presentation on the Angular Language Service from ng-conf 2017.