填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写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 中,必须将语言服务包安装为项目依赖项。

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

devDependencies { "@angular/language-service": "^6.0.0" }
package.json
      
      devDependencies {
  "@angular/language-service": "^6.0.0"
}
    
  1. 打开终端窗口,在项目根目录下使用 npmyarn 来安装这些 devDependencies

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

npm install
      
      npm install
    

OR

yarn
      
      yarn
    

OR

yarn install
      
      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 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