Что интересного в последнем обновлении Angular Language Service для Visual Studio

Содержание:

Ранее платформа Microsoft Visual Studio не могла работать с Angular language Service. Так как она отличается от своего продвинутого кроссплатформенного младшего брата VSCode, то и получила только базовую поддержку TypeScript. Хоть в комплект программы VS входит шаблон Angular, но работать полностью на нем нельзя, потому что сама по себе платформа уступает в функциях и возможностях для работы с программным кодом.

В прошлом году это упущение было исправлено. Теперь Microsoft Visual Studio может работать с Java Script и Type Script. Но опытные программисты говорят, что для нормальной работы фреймворка в VS понадобится версия 16.5 и выше. На остальных она может не запуститься. Обновление 16.5 было выпущено в марте 2020 года.

Что было до обновления сервиса

Пользователи постоянно жаловались разработчикам Angular, что фреймворк очень медленный, трудно масштабируется при работе с VS Code. Сбои стали регулярными.

Был добавлен один плагин, но, как выяснилось в ходе пользования, он не поддерживал ссылки и не читал файлы TypeScript из HTML. Поэтому разработчики взялись за перестройку языковой службы.

Какие обновления и исправления были внесены в прошлом году

Разработчики постоянно отслеживают проблемы и вносят изменения. На этот раз были улучшены:

  • системное совокупное исключение System Aggregate Exception;
  • работа HTML-завершения.

Были также обновлены такие расширения, как:

  • поддержка последней версии языковой службы Version 11.2.8;
  • поддержка последней версии Type Script.

Однако полностью работа над устранением ошибок в HTML-завершении не закончена. Сейчас разработчики продолжают трудиться над исправлением обработки завершения в буферах проекта посредством расширения, но пока не могут найти ответа.

Происходит следующее:

  1. Когда это расширение включено, файлы не отображаются.
  2. По умолчанию несколько провайдеров, по идее, должны работать без проблем и обеспечивать комбинацию всех доступных завершений, но некоторые внутренние реализации приводят к тому, что они просто отключаются.

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

Языковой сервис: что это?

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

Что интересного в последнем обновлении Angular Language Service для Visual Studio

Языковые службы постоянно используются в программировании. Разработчик запускает процесс, языковую службу, и работает с ним с помощью протокола LCP. Каждый раз, когда файл изменяется, программист запрашивает Language Service: все ли правильно или что он должен отображать, если разработчик запросит автозаполнение.

Angular Language Service используется для работы по шаблону: если у разработчика имеются ошибки, служба отображает их. Например, когда неверно написан код или же была попытка связать свойства, которых не существует. Angular также проверяет правильность значений, используемых в привязках и интерполяциях.

Вне поля зрения программиста языковой сервис Angular компилирует шаблоны и взаимодействует со службой языка TypeScript, чтобы узнать, что доступно. Он делает это даже тогда, когда шаблон является неполным: например, во время его написания. Сервис всегда восстанавливает большое количество данных и старается делать это настолько быстро, насколько возможно.

Обновленная Angular

Разработчики решились на обновление по нескольким причинам:

  1. Нынешняя языковая служба работала на компиляторе View Engine, а не на современном Ivy. В будущем код механизма просмотра будет удален из кодовой базы Angular, поэтому ее пришлось перенести.
  2. Слишком много ошибок и жалоб от программистов.

Добавили много интересных фич:

  • «Найти все ссылки». Теперь можно увидеть, где ввод используется в коде машинописного текста, а также в шаблонах. Разработчик может переименовать его и дать команду интегрированной среде разработки выполнять тяжелую работу по его изменению везде, а не делать это самому;
  • умное обнаружение компонентов и директив. Если разработчик использует <button mat-button>Hello</button>, сервис сообщит, что это кнопка MatButton, заданная сервисом Angular.

Работая над новой языковой службой, команда старалась сделать ее быстрее. Некоторые введенные оптимизации уже присутствовали на самом компиляторе. Например, фича, которая делает сервис более сообразительным в механизмах кэширования. Работа над языковым сервисом также ускорила процесс компиляции приложения.

Что интересного в последнем обновлении Angular Language Service для Visual Studio

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

Как установить последние функции сервиса

Чтобы включить последние функции, необходимо:

  1. Установить параметр strictTemplates в файле tsconfig.json.
  2. Не забыть поставить значение strictTemplates в true. Вот как будет выглядеть это на примере.

Редактор автоматически определяет, что открывается языковой сервис. Он сразу переходит к использованию языковой службы Angular для чтения файла tsconfig.json, поиска всех шаблонов, имеющихся в приложении, а затем предоставляет языковые сервисы для любых открытых шаблонов.

Установка в среду WebStorm

В WebStorm программисту необходимо подключить плагины Angular и AngularJS.

Начиная с WebStorm 2019.1, службу @angular/language следует удалить из пакета .json.

Установка в среду SubLime Text

В редакторе Sublime Text языковой сервис поддерживает встроенные шаблоны при установке в качестве плагина. Разработчику понадобится пользовательский плагин Sublime (или модификации текущего плагина) для завершения работы в HTML-файлах.

Чтобы использовать языковую службу для встроенных шаблонов, необходимо сначала добавить расширение для разрешения TypeScript, а затем установить плагин Angular Language Service. Начиная с TypeScript 2.3, TypeScript оснащен модификацией подключаемого модуля, который использует языковой сервис.

  1. Потребуется сначала установить последнюю версию TypeScript в локальном каталоге node_modules:

«npm install —save-dev typescript»

  1. Затем поставить пакет языковой службы Angular там же:

«npm install —save-dev @angular/language-service»

  1. После установки пакета следует добавить в раздел CompilerOptions в файле tsconfig.json проекта следующий код:

«tsconfig.json

«плагины»: [

{«имя»: «@angular/language-service»}

  1. В настройках пользователя редактора (Cmd+ или Ctrl+) нужно добавить следующее:

«typescript-tsdk»: «/node_modules/typescript/lib»

Это позволяет службе Angular Language предоставлять диагностику и дополнения в файлах .ts.

Заключение

Тем, кто только начал изучение программирования и желает научиться в нем разбираться досконально, помогут программы и курсы от школы DevEducation. По окончании обучения выдается сертификат и появляется возможность трудоустройства.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!