ТОП-12 продуктивных советов для WebStorm и Angular – часть 1

ТОП-12 продуктивных советов для WebStorm и Angular

От автора: в этой серии из двух уроков эксперты по разработке google Jurgen Van de Moere и Todd Motto поделятся своими любимыми советами для продуктивной разработки в WebStorm Angular приложений.

В первой части Jurgen расскажет про свои ТОП-5 функций WebStorm, которые помогают ему ежедневно повышать продуктивность:

Используйте Angular CLI из WebStorm

Ищите как профи

Пользуйтесь Angular Language Service

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Автоматически форматируйте свой код

Оптимизируйте импорты

Каждый совет может значительно повысить продуктивность разработки. Давайте разберем каждый.

Совет 1: используйте Angular CLI из WebStorm

Angular CLI – интерфейс командной строки, написанный и поддерживаемый командой Angular и помогающий автоматизировать рабочий процесс. С его помощью можно быстро создавать новые проекты Angular и добавлять новые функции, такие как компоненты, сервисы и директивы в существующие проекты.

Интеграция WebStorm и Angular CLI переносит все эти преимущества прямо в IDE без необходимости использовать терминал.

Чтобы создать новый проект Angular, выберите File | New | Project и далее Angular CLI.

Введите папку проекта и нажмите create. WebStorm использует Angular CLI для создания нового проекта Angular и установки зависимостей.

Когда создастся приложение в него с легкостью можно добавить новые функции Angular. Щелкните правой кнопкой мыши на src/app и выберите New | Angular CLI для выбора типа добавляемой функции.

После выбора необходимо указать имя и необязательные параметры точно так же, как в Angular CLI:

ТОП-12 продуктивных советов для WebStorm и Angular

Что удивительно, WebStorm сам автоматически добавляет компонент в нужный модуль Angular. В нашем случае это AppModule.

Если в вашем приложении Angular много модулей, кликните правой кнопкой мыши на модули, в который необходимо добавить функцию, и выберите New | Angular CLI. WebStorm проверит, чтобы новые файлы создались в нужном месте, а также что новая функция добавилась в нужный модуль Angular. Как круто!

Совет 2: ищите как профи

Перемещайтесь к любому объявлению в проекте с помощью cmd-click и cmd-B. Если вы привыкли делать все на клавиатуре, наведите курсор на термин и нажмите cmd-B. Если же привыкли работать мышью, зажмите cmd b, и все термины, на которые вы наведете курсор, превратятся в ссылки на объявления.

WebStorm автоматически распознает компоненты и директивы Angular в HTML, ссылках на стили, ссылках на шаблоны, классах, интерфейсах и т.д.

Не нужно открывать файлы вручную, просто перепрыгните на любое объявление:

ТОП-12 продуктивных советов для WebStorm и Angular

Если необходимо найти файл, на который нет быстрой ссылки, нажмите 2 раза клавишу shift, и откроется диалоговое окно Search everywhere. Не нужно вводить весь поисковой запрос. Если необходимо найти AppComponent, просто введите первые символы частей (ac), и WebStorm сразу же покажет вам результат поиска, чтобы вы могли быстро открыть предложенные файлы:

ТОП-12 продуктивных советов для WebStorm и Angular

Еще одна полезная команда cmd-E, с помощью которой можно открыть список недавно отредактированных файлов для быстрого перемещения между ними.

ТОП-12 продуктивных советов для WebStorm и Angular

Умение быстро перемещаться на необходимый код сэкономит вам массу времени каждый день.

Совет 3: пользуйтесь Angular Language Service

По умолчанию WebStorm предоставляет помощь при написании Angular кода. При редактировании скриптов WebStorm автоматически импортирует необходимые JS модули, чтобы вам не пришлось делать это вручную.

Если открыть панель TypeScript, WebStorm сразу сообщит вам о валидности кода, чтобы вы могли быстро решить проблемы перед компиляцией проекта. Смотрите, как интерфейс OnInit автоматически импортируется, и TypeScript сразу же говорит вам о валидности/невалидности кода:

ТОП-12 продуктивных советов для WebStorm и Angular

При редактировании шаблона WebStorm предоставляет умный автокомплитер кода, который знает компоненты, директивы и даже input и output свойства.

ТОП-12 продуктивных советов для WebStorm и Angular

Можно пойти еще дальше и установить Angular Language Service. Это сервис, спроектированный командой Angular, добавляющий в IDE проверку на ошибки и автокомплитер ввода внутри шаблонов Angular.

WebStorm интегрируется с Angular Language Service, чтобы лучше понимать ваш код. Чтобы включить Angular Language Service, сначала проверьте его установку:

npm install @angular/language-service --save-dev 

Если вы генерируете приложение с помощью Angular CLI, то Angular Language Service устанавливается автоматически.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Далее перейдите в Preferences | Languages & Frameworks | TypeScript. Проверьте галку Use TypeScript Service, она должна быть установлена. И кликните Configure…

ТОП-12 продуктивных советов для WebStorm и Angular

Откроется модальное окно Service Options. Поставьте галку Use Angular service и сохраните изменения:

ТОП-12 продуктивных советов для WebStorm и Angular

С активным Angular Language Service WebStorm может улучшить подстановку кода в выражениях шаблонов:

ТОП-12 продуктивных советов для WebStorm и Angular

… а также более точно сообщать об ошибках в шаблоне прямо в редакторе.

ТОП-12 продуктивных советов для WebStorm и Angular

Отлов ошибок без компиляции проекта сэкономит вам массу времени.

Совет 4: автоматически форматируйте свой код

Не задумывайтесь о ручном форматировании кода. WebStorm прикроет вас. Если вы находитесь в шаблоне, скрипте, стиле или даже в JSON файле, нажмите cmd-option-L, и WebStorm автоматически отформатирует весь код:

ТОП-12 продуктивных советов для WebStorm и Angular

Если в вашем проекте есть tslint.json, просто откройте его, и WebStorm спросит, нужно ли использовать стили к коду из TSLint в вашем проекте:

ТОП-12 продуктивных советов для WebStorm и Angular

Если вам не нравится автоформатирование кода, вы можете более тонко настроить формат для каждого поддерживаемого языка отдельно в Webstorm | Preferences | Editor | Code Style.

ТОП-12 продуктивных советов для WebStorm и Angular

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

Совет 5: оптимизируйте импорты

При работе со скриптом Angular вы можете заметить, что определенные импорты больше не используются. Если их не удалить, размер бандла может превысить ожидаемый. Удалять импорты довольно нудно, но не с WebStorm!

Нажмите ctrl-alt-O для мгновенной оптимизации импортов. Или можно нажать cmd-shift-A и открыть панель Find actions, ввести optim, найти Optimize imports и нажать клавишу enter для запуска действия.

При оптимизации импортов WebStorm выполняет следующее:

Сливает импорты из одного модуля в одно выражение

Удаляет неиспользуемые импорты

Меняет формат выражений, чтобы они помещались в необходимую длину

В примере ниже Optimize imports запущена дважды. Первый раз команда сливает воедино все импорты из @angular/core. Затем удаляются интерфейсы OnInit, OnChanges и AfterViewInit, и снова нажимается ctrl-alt-O. На этот раз Optimize imports автоматически удаляет неиспользуемые интерфейсы из импортов.

ТОП-12 продуктивных советов для WebStorm и Angular

Можете больше не беспокоиться об импортах. WebStorm достаточно умен, чтобы делать это за вас!

Заключение

Давайте вспомним советы Jurgen для повышения продуктивности разработки Angular в WebStorm:

Используйте Angular CLI в WebStorm для быстрой генерации новых проектов Angular и функций

Перемещайтесь как профи для мгновенного перехода к объявлениям кода и обнаружения кода или файлов

Используйте Angular Language Service для улучшения автокомплитера кода и проверки на ошибки без компиляции проекта Angular

Автоматически форматируйте код, чтобы позволить WebStorm форматировать весь код по настройкам проекта

Оптимизируйте импорты для удаления всех неиспользуемых импортов и поддержания оптимального размера бандла

В следующей части Todd Motto поделится своими любимыми советами, следите за обновлениями!

Автор: Jurgen Van de Moere

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree