Так как последние пару лет я активно работают над Angular-приложениями, то в этом посте я хотел бы поделиться дополнениями для VSCode, которыми я пользуюсь ежедневно. Некоторые из них касаются именно Angular’a, а другие будут полезным любым веб-разработчикам, вне зависимости от используемого фреймворка.

1.File Ext Switcher(Angular Companion)

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

2.Angular Files

По сути это дополнение является графической оболочкой над Angular CLI. Например, чтобы сгенерировать новый компонент, достаточно кликнуть по необходимой папке правой кнопкой мыши и выбрать New Angular Component из контекстного меню. Кроме самих компонентов дополнение позволяет генерировать модули, сервисы, пайпы и т.д.

Angular Files - быстрый доступ к Angular CLI из редактора

3.Angular Language Service

Одно из базовых дополнений для Angular-разработчиков. Позволяет использовать функцию авто-дополнение и подсказок в HTML-шаблонах и ts-файлах с компонентами.

Дополнение Angular Language Service

4.Prettier

С авто-форматированием кода лучше всех справляется prettier. На уровне проекта можно создать файл prettierrc с правилами и prettierignore с исключениями, остальные подробности в доках.

5.Линтинг

В зависимости от того на чем вы пишите (JS/TS) обязательными являются дополнения для линтинга кода. Для тайпскрипта это TSLint и для JavaScript - ESLint. Кстати, Prettier и дополнение для линтинга могут конфликтовать друг с другом, поэтому важно настроить их правильно.

6.Работа с Git

Редактор имеет встроенную поддержку Git, но для расширения его возможностей и улучшения интеграции Гита рекомендую установить такие дополнения как: Git Lens и Git History.

Подсветка строк с Git Lens

7.Размер импортов

Import cost добавляет информацию о размере импортированной библиотеки прямо на строке с импортом.

Import Cost - отображает размер импортов

8.Разное

  • Ident-Rainbow - подсветка отступов.
  • Bracket Pair Colorizer - подсвечивает парные скобки.
  • Color Highlight - подсветка цветовых кодов в CSS-файлах и не только.
  • Auto-Close-Tag - автоматически закрывает открытый тег.
  • Quokka - позволяет мгновенно выполнить код прямо из интерфейса редактора. Использую как альтернативу таких сервисов как JsFiddle, Codepen и т.п.
  • WakaTime - сервис для трекинга времени проведенного в редакторе над различными проектами.
  • Peacock - подсветка интерфейса редактора разными цветами на уровне проектов.
  • VSCode Github Trending - список популярных репозиториев на Github.

9.Темы и шрифты

Что касается настройки внешнего редактора, то для этого существует огромное количество тем, поэтому каждый сможет подобрать что-нибудь для себя. Я в последнее время использую тему Night Owl вместе с шрифтом Fira Code iScript.

VSCode с темой Night Owl
Опубликовано
Подробнее

ArtsLab

Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.

4gray artslab artslabinfo