Angular Language Service

Служба Angular Language Service - это способ получения дополнений, ошибок, подсказок и навигации внутри ваших шаблонов Angular, независимо от того, являются ли они внешними в файле HTML или встроены в аннотации / декораторы в строку. Служба Angular Language Service автоматически обнаруживает, что вы открываете файл Angular, читает ваш файл tsconfig.json, находит все шаблоны, которые есть в вашем приложении, а затем предоставляет языковые службы для любых открываемых вами шаблонов.

Автозаполнение

Автозаполнение может ускорить ваше время разработки, предоставляя вам контекстные возможности и подсказки при вводе. Этот пример показывает автозаполнение в интерполяции. Когда вы набираете текст, вы можете нажать Tab для завершения.

Есть также дополнения в элементах. Любые элементы, которые вы используете в качестве селектора компонентов, будут отображаться в списке завершения.

Проверка ошибок

Служба Angular Language Service также может предупредить вас об ошибках в вашем коде. В этом примере Angular не знает, что это за заказы и откуда они поступают.

навигация

Навигация позволяет вам навести курсор, чтобы увидеть, откуда компонент, директива, модуль и т. Д., А затем нажать и нажать F12, чтобы перейти непосредственно к его определению.

Angular Language Service в вашем редакторе

Сервис Angular Language Service в настоящее время доступен для кода Visual Studio и WebStorm.

Visual Studio Code

В Visual Studio Code установите Angular Language Service из магазина, который доступен из нижнего значка в левой части меню. Вы также можете использовать VS Quick Open (? + P на Mac, CTRL + P на Windows) для поиска расширения. Когда вы откроете его, введите следующую команду:

ext install Angular.ng-template

Затем нажмите кнопку «Установить», чтобы установить Angular Language Service.

WebStorm

В веб-шторме вы должны установить языковой сервис как зависимость от разработчика. Когда Angular видит эту зависимость dev, он предоставляет языковой сервис внутри WebStorm. Затем Webstorm предоставляет вам раскрашивание внутри шаблона и автозаполнение в дополнение к Angular Language Service.

Вот зависимость dev, которую вы должны иметь в package.json:

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

Затем в окне терминала в корне вашего проекта установите devDependencies с помощью npm или yarn:

```npm install```

```yarn install```

Возвышенный текст

В Sublime Text сначала нужно расширение, чтобы разрешить Typescript. Установите последнюю версию машинописи в локальном каталоге node_modules:

```npm install --save-dev typescript```

Затем установите Angular Language Service в том же месте:

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

Начиная с TypeScript 2.3, в TypeScript есть модель подключаемого модуля языковой службы, которую может использовать языковая служба.

Далее, в ваших пользовательских настройках (Cmd + или Ctrl +,), добавьте:

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

Установка в ваш проект

Вы также можете установить Angular Language Service в своем проекте с помощью следующей команды npm:

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

Кроме того, добавьте следующее в раздел «compilerOptions» вашего tsconfig.json вашего проекта.

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

Обратите внимание, что это обеспечивает диагностику и доработку только в файлах .ts. Для дополнений в HTML-файлах вам понадобится собственный возвышенный плагин (или модификации текущего плагина).

Как работает языковая служба

Когда вы используете редактор с языковой службой, существует процесс редактора, который запускает отдельный языковой процесс / службу, с которой он общается через RPC. Каждый раз, когда вы вводите текст в редакторе, он отправляет информацию другому процессу для отслеживания состояния вашего проекта. Когда вы запускаете список завершения в шаблоне, процесс редактора сначала анализирует шаблон в HTML AST или абстрактном синтаксическом дереве. Затем Angular-компилятор интерпретирует, в какой модуль входит шаблон, область видимости и селектор компонента. Затем он выясняет, где в шаблоне AST находится ваш курсор. Когда он определяет контекст, он может определить, какими могут быть дети.

Это немного сложнее, если вы находитесь в интерполяции. Если у вас есть интерполяция {{data .---}} внутри div и вам нужен список завершения после data .---, компилятор не может использовать HTML AST, чтобы найти ответ. HTML AST может только сказать компилятору, что есть некоторый текст с символами "{{data .---}}". Именно тогда анализатор шаблонов создает выражение AST, которое находится в шаблоне AST. Затем Angular Language Services просматривает данные в своем контексте и спрашивает Language Type Service, каковы члены данных. Затем TypeScript возвращает список возможностей.

Предыдущий: Простые варианты развертывания
Далее: Тестирование