Опубликовано автор в категориях Верстальщику, Проги для вебмастера.

Чуть более года назад, я написал пост Мой новый любимый редактор — Atom, в котором рассказал о смене старого-доброго Саблайма на Атом. Но время шло, и по мере моего все большего увлечения JavaScript и, в частности TypeScript и Angular, как средствами написания правильного модульного кода, мне пришлось снова сменить редактор. И вот уже порядка 5-6 месяцев я пишу код, используя VS Code. Почему так сложилось, потому, что изначально VS Code заточен под работу с TypeScript, не мудрено ведь и редактор и «язык» детища Microsoft, а там постарались, чтобы они как нельзя подходили друг другу. По моему сугубо личному мнению — это вообще два наиболее удачных продукта компании. Но сейчас не об этом, сейчас а том, как дополнить VS Code, чтобы писать приложения на Angular 4 на нем было максимально удобно.

Итак, не для кого не секрет, что Google делает акцент на использовании Angular 4 именно совместно с TypeScript — это еще один плюс к тому, чтобы использовать VS Code для удобной работы. Поскольку VS Code заточен под TypeScript, то в этом посте я расскажу именно о наборе плагинов, которые улучшат возможности написания кода Angular 4. В итоге мы получим отличный инструмент.

Расширения VS Code для Angular 4

Angular v4 TypeScript Snippets

Собственно, название говорит само за себя. Плагин содержит очень большую коллекцию сниппетов, для того чтобы ускорить процесс написания кода. Вы сможете как генерировать стандартные стартовые сниппеты для компонентов, сервисов, модулей так и использовать сниппеты шаблонов для генерации циклов ngFor или разворачивания ngModel.

Angular 4 and TypeScript/HTML VS Code Snippets

Это расширение похоже на предыдущее. Данный плагин содержит 16 сниппетов для скриптов и 12 бля шаблонов. Вы можете попробовать оба и решить какое подходит именно вам. Если судить по количеству скачиваний, то первое далеко впереди текущего. Но какое именно использовать решать вам. Но иметь под рукой набор сниппетов буде полезным.

Angular Files

Это расширение фактически выполняет те же функции, которые берет на себя Angular CLI. Кликнув правой кнопкой на директории проекта вы сможете выбрать для создания готовый набор файлов компонента, директивы, модуля, сервиса или пайпа. Все файлі генерируются согласно официального Angular Style Guide. Если вы используете CLI, то возможно оно вам не понадобиться, но знать, что оно есть не помешает.

Angular Language Service

Этот плагин расширяет возможности редактирования шаблонов Angular, как встроенных, так и внешних, включая:

  • списки автоподстановки;
  • диагностические сообщения;
  • быструю информацию;
  • переход к определению.

angular2-inline

Этот пакет является языковым расширением для Visual Studio Code. Он расширяет языки JavaScript и TypeScript, чтобы добавить специфические особенности Angular2 для встроенных шаблонов и таблиц стилей.

Когда вы определяете встроенный шаблон или встроенную таблицу стилей с использованием символа обратной кавычки (`), содержимое будет обработано этим расширением.

Функции, предоставляемые этим расширением:

  • подсветка синтаксиса встроенных html и css;
  • завершение кода, подсветка и информации для встроенного html при наведении.

angular2-switcher

Плагин позволяет быстро переключаться между файлами текущего компонента. Скажем, что вы находитесь в файле accordion.ts: с помощью простого ярлыка вы теперь можете переключиться на accordion.css или accordion.html. Весьма удобно, не правда ли?

NgBootstrap Snippets

Если вы используете Bootstrap и ng-bootstrap, когда пишите ваше приложение, то это расширение будет вам определенно полезно. Оно содержит более 20 сниппетов, чтобы в один момент развернуть самые популярные компоненты ng-bootstrap. Просто начните вводить ngb и смотрите, что получиться 🙂

Вспомогательные расширение

А здесь я хотел бы добавить несколько расширений, которое непосредственно не относятся к Angular, но будут полезны при написании качественное кода.

TSLint

Если вы еще не линтите ваш код — начните сейчас.

Если ві все-таки єто делаете, то видеть ошибки рядом с кодом намного удобнее, чем искать их в терминале. Это как раз то, что делает TSLint.

Он будет выделять код в том месте, где у вас есть проблема, и отображать список предупреждений и ошибок при зависании. Вы также можете просмотреть список всех обнаруженных проблем на панели «Проблемы».

TypeScript Hero

Замечательный плагин, который автоматически добавляет и организует импорты, по мере того как вы пишите ваш код. Собственно, больше сказать нечего, но и этим все сказано. Похожим функционалом также обладает плагин Auto Import. Можете попробовать оба и выбрать свой.

Path Intellisense

Это один из must-have плагинов. Он позволять автоматичиски дополнять именно файлов по мере ввода строки. Очень полезен при импортах, да и в целом. Возможно, вскоре этот функционал будет интегрирован в редактор, но пока плагин очень помогает.

Оставить комментарий

  • (не будет показан)