VS Code потрясающий: это действительно быстрый зверь, он отлично работает с TypeScript и, кроме того, бесплатный. Безумно!
Тем не менее ... это может быть лучше. Основная идея здесь заключается в том, что сам редактор довольно ограничен в функциональности, поэтому мы можем настроить его в соответствии с нашими потребностями с помощью богатой галереи расширений, в зависимости от того, какую технологию - языки, фреймворки - мы используя это для.
Вот список расширений, которые я нашел наиболее полезными при работе с приложениями Angular:
Работа с TypeScript в целом
1. TSLint
ext install tslint
Если вы еще не выполняете линтинг кода, начните сейчас.
Если да, то видеть эти ошибки вместе с кодом линтером гораздо удобнее, чем искать их в своем терминале. Это то, что позволяет расширение TSLint.
Он будет рисовать волнистые линии под кодом, где у вас есть проблема, и отображать список предупреждений и ошибок при наведении курсора. Вы также можете увидеть список всех обнаруженных проблем в… ну, на панели Проблемы .
2. Автоимпорт
ext install autoimport
Мы больше не живем в глобальном мире… ну, что касается наших сценариев. В настоящее время все необходимо импортировать. При работе с Angular вы часто будете писать несколько таких import { Something } from './somewhere'. Этот парень сделает это автоматически.
Генерация углового кода
3. Angular 2 фрагмента кода TypeScript
ext install Angular2
Сколько раз вы писали код для компонента или, скажем, даже таких вещей, как код для получения данных с URL-адреса и сопоставления ответа с объектом JSON?
return this.http.get('http://someurl')
.map((response: Response) => response.json());
Если вы чувствуете, что у вас есть больше развлечений, вы правы. Вот почему хорошо иметь под рукой несколько фрагментов кода Angular. Angular 2 TypeScript Snippets содержит несколько фрагментов кода, которые охватывают типичные сценарии:
- В области TypeScript вы сможете выбрать одну из 10 вещей для создания, например, компонент, сервис или подписку.
- В HTML есть еще 7, например ngFor или ngModel.
На самом деле это самое популярное расширение VS Code, связанное с Angular, и, вероятно, не повредило то, что оно написано Джоном Папой.
4. Angular 2 TypeScript / HTML фрагменты
ext install angular2-snippets
История, аналогичная предыдущему инструменту. Он создан Dan Wahlin, еще одним известным именем в сообществе Angular, и имеет немного больше фрагментов (14 в TypeScript и 12 в HTML). У меня установлены оба этих расширения, и я еще не решил, какое из них использовать.
5. Файлы Angular2
ext install vscode-angular2-files
Этот маленький помощник по сути похож на команду ng generate … Angular-CLI. При создании нового файла вы можете выбрать компонент, директиву, канал и т. Д. (Даже маршрут!), И вновь созданный файл уже будет иметь шаблонный код.
Изменить: теперь он использует конфигурацию, которая у вас есть в angular-cli.json так например нет необходимости настраивать расширения файлов таблиц стилей отдельно :)
Другой
6. angular2-inline
Если вы напишете HTML-код в template параметре вашего компонента или CSS в его styles части, Visual Studio Code не поймет его иначе, как строку. У вас не будет специальной раскраски кода или автозаполнения.
Это расширение позволяет VS Code понимать эти встроенные блоки кода.
7. angular2-Switcher
ext install angular2-switcher
Переключатель позволяет быстро переключаться между файлами данного компонента. Предположим, вы находитесь в файле accordion.ts: теперь с помощью простого ярлыка вы можете переключиться на accordion.css или accordion.html. Довольно изящно!
Бонус!
8. Фрагменты NgBootstrap
ext install ng-bootstrap-snippets
Пишете приложение с помощью Bootstrap? Тогда вы, вероятно, используете ng-bootstrap. В таком случае этот NgBootstrap Snippets с более чем 20 фрагментами может значительно сэкономить время. Просто установите его и введите ngb и посмотрите, что произойдет :)
А как насчет вашей настройки? Есть ли у вас что-нибудь, что вы могли бы добавить к этому списку?
Если вам понравился этот список, нажмите 💚 ниже, чтобы другие люди увидели его здесь, на Medium.
