Так как последние пару лет я активно работаю над Angular-приложениями, то в этом посте я хотел бы поделиться дополнениями для VSCode, которыми я пользуюсь ежедневно. Некоторые из них касаются именно Angular’a, а другие будут полезным любым веб-разработчикам, вне зависимости от используемого фреймворка.
1.File Ext Switcher(Angular Companion)
Как правило, в рамках ангуляра один компонент состоит из четырех файлов - логика компонента в ts-файле, шаблон HTML, файл со стилем и spec-файл с тестами. Данное дополнение я использую для переключения между этими 4 файлами. Особенно удобно в режиме Split Screen с двумя открытыми файлами в разных вкладках. Таким образом, с помощью горячих клавиш, можно быстро открывать разные части (файлы) компонента в соседних вкладках редактора.
По сути это дополнение является графической оболочкой над Angular CLI. Например, чтобы сгенерировать новый компонент, достаточно кликнуть по необходимой папке правой кнопкой мыши и выбрать New Angular Component из контекстного меню. Кроме самих компонентов дополнение позволяет генерировать модули, сервисы, пайпы и т.д.
Одно из базовых дополнений для Angular-разработчиков. Позволяет использовать функцию авто-дополнение и подсказок в HTML-шаблонах и ts-файлах с компонентами.
4.Prettier
С авто-форматированием кода лучше всех справляется prettier. На уровне проекта можно создать файл prettierrc с правилами и prettierignore с исключениями, остальные подробности в доках.
5.Линтинг
В зависимости от того на чем вы пишите (JS/TS) обязательными являются дополнения для линтинга кода. Для тайпскрипта это TSLint и для JavaScript - ESLint. Кстати, Prettier и дополнение для линтинга могут конфликтовать друг с другом, поэтому важно настроить их правильно.
6.Работа с Git
Редактор имеет встроенную поддержку Git, но для расширения его возможностей и улучшения интеграции Гита рекомендую установить такие дополнения как: Git Lens и Git History.
7.Размер импортов
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.