Предыстория

Решил мигрировать с WebStorm на VS Code, но обнаружил, что нет поддержки автоимпорта Angular-компонентов. В WebStorm это работало из коробки — начинаешь писать <app-, IDE сразу подсказывает компоненты и автоматически добавляет импорт. В VS Code такого не было.

На первый взгляд задача выглядела несложной — пару регулярок накидать и можно сделать своё решение.

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

Что отличает этот плагин от официального решения

Массовый автоимпорт из шаблона — как в WebStorm

Главная фича — автоимпорт всех зависимостей из шаблона одной командой. В WebStorm, когда копируешь код из одного места в другой компонент, он иногда автоматически подтягивает импорты, что очень удобно.

Когда переносишь большой шаблон или рефакторишь компонент, в нём могут быть десятки неимпортированных директив и компонентов. В текущем официальном Angular Language Server приходится импортировать их по одному — наводишь курсор, жмёшь Quick Fix, выбираешь импорт. Повторяешь это n-ое количество раз.

С плагином — одна команда Fix All, и готово.

Как использовать:

1. Откройте файл компонента с неимпортированными зависимостями

2. Нажмите Ctrl+Shift+P (или Cmd+Shift+P на Mac)

3. Введите Angular Auto Import: Fix all missing imports

4. Готово

Демонстрация работы

Переход к декларации

В WebStorm можно навести на любой компонент в шаблоне и нажать Ctrl+B — IDE откроет декларацию, даже если компонент ещё не импортирован. Крутая фича для быстрого изучения API перед использованием.

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

Как использовать:

• Наведите курсор на имя компонента/директивы в шаблоне

• Нажмите F12 (Go to Definition) или Ctrl+Click (или Cmd+Click на Mac)

• VS Code откроет файл с декларацией

Работает и для Alt+F12 — откроется превью кода прямо в текущем файле, как в WebStorm.

Улучшенная диагностика

Ещё из отличий — лучше реализована подсветка ошибок, особенно для директив. В WebStorm IDE сразу понимает, что *ngIf — это директива, а <app-button> — компонент, и предлагает правильные варианты импорта.

Официальный плагин иногда не справляется, особенно с атрибутными директивами. В моём плагине это работает точнее.

Особенности работы

Standalone-first подход

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

Поддержка импорта legacy NgModules тоже есть, но только если сам компонент, куда будет импортироваться зависимость, является standalone.

Монорепозитории из коробки

В WebStorm монорепы работают из коробки — IDE понимает структуру проекта, path aliases и предлагает компоненты из всех библиотек workspace.

Плагин тестировался в основном на NX, так что поддержка монорепозиториев работает аналогично.

Гибкость настроек

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

Установка

Плагин доступен в VS Code Marketplace.

Итого

Плагин решает конкретные боли при миграции с WebStorm на VS Code и дополняет официальное решение там, где его не хватает:

• Fix All — массовый импорт, как в WebStorm

• Go to Definition для неимпортированных сущностей — как Ctrl+B в WebStorm

• Улучшенная диагностика — особенно для директив

• Монорепо из коробки — как в WebStorm

Делает работу с Angular в VS Code комфортнее и ближе к опыту WebStorm.

Прошу любить и жаловать, открыт для предложений. Сообщения об ошибках приветствуются в репозитории проекта.