Від автора: у цій серії з двох уроків експерти по розробці google Jurgen Van de Moere і Todd Motto поділяться своїми улюбленими радами для продуктивної розробки в WebStorm Angular додатків.
У першій частині Jurgen розповість про свої ТОП-5 функцій WebStorm, які допомагають йому щодня підвищувати продуктивність:
Використовуйте Angular CLI з WebStorm
Шукайте як профі
Користуйтеся Angular Language Service
Автоматично форматуйте свій код
Оптимізуйте імпорти
Кожен рада може значно підвищити продуктивність розробки. Давайте розберемо кожен.
Порада 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:
Що дивно, WebStorm сам автоматично додає компонент в потрібний модуль Angular. У нашому випадку це AppModule.
Якщо у вашому додатку Angular багато модулів, натисніть правою кнопкою миші на модулі, в який необхідно додати функцію, і виберіть New | Angular CLI. WebStorm перевірить, щоб нові файли створилися в потрібному місці, а також що нова функція додалася в потрібний модуль Angular. Як круто!
Порада 2: шукайте як профі
Переміщайтеся до будь-якого оголошення в проекті за допомогою cmd-click і cmd-B. Якщо ви звикли робити все на клавіатурі, наведіть курсор на термін і натисніть cmd-B. Якщо ж звикли працювати мишею, затисніть cmd b, і всі терміни, на які ви наведете курсор, перетворяться у посилання оголошення.
WebStorm автоматично розпізнає компоненти і директиви Angular в HTML, посилання на стилі, посилання на шаблони, класи, інтерфейси і т. д.
Не потрібно відкривати файли вручну, просто перестрибніть на будь оголошення:
Якщо необхідно знайти файл, на який немає швидкої посилання, натисніть 2 рази клавішу shift, і відкриється діалогове вікно Search everywhere. Не потрібно вводити весь пошуковий запит. Якщо необхідно знайти AppComponent, просто введіть перші символи частин (ac), і WebStorm відразу ж покаже вам результат пошуку, щоб ви могли швидко відкрити запропоновані файли:
Ще одна корисна команда cmd-E, з допомогою якої можна відкрити список нещодавно відредагованих файлів для швидкого переміщення між ними.
Вміння швидко переміщатися на необхідний код заощадить вам масу часу кожен день.
Порада 3: користуйтеся Angular Language Service
За замовчуванням WebStorm надає допомогу при написанні Angular коду. При редагуванні скриптів WebStorm автоматично імпортує необхідні JS модулі, щоб вам не довелося робити це вручну.
Якщо відкрити панель TypeScript, WebStorm відразу повідомить вам про валідності коду, щоб ви могли швидко вирішити проблеми перед компіляцією проекту. Дивіться, як інтерфейс OnInit автоматично імпортується, і TypeScript відразу ж говорить вам про валідності/невалидности коду:
При редагуванні шаблону WebStorm надає розумний автокомплитер коду, який знає компоненти, директиви і навіть input і output властивості.
Можна піти ще далі і встановити 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 встановлюється автоматично.
Далі перейдіть у Preferences | Languages & Frameworks | TypeScript. Перевірте галку Use TypeScript Service, вона повинна бути встановлена. Натисніть Configure…
Відкриється модальний Service Options. Поставте галку Use Angular service і збережіть зміни:
З активним Angular Language Service WebStorm може поліпшити підстановку коду у виразах шаблонів:
… а також більш точно повідомляти про помилки в шаблоні прямо в редакторі.
Відлов без помилок компіляції проекту заощадить вам масу часу.
Порада 4: автоматично форматуйте свій код
Не замислюйтесь про ручне форматування коду. WebStorm прикриє вас. Якщо ви знаходитесь в шаблоні, скрипті, стилі або навіть в JSON файлі, натисніть cmd-option-L, і WebStorm автоматично відформатує весь код:
Якщо у вашому проекті є tslint.json, просто відкрийте його, і WebStorm запитає, чи потрібно використовувати стилі до коду з TSLint у вашому проекті:
Якщо вам не подобається автоформат коду, ви можете більш тонко налаштувати формат для кожного підтримуваного мови окремо в Webstorm | Preferences | Editor | Code Style.
Функція форматування коду в 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 автоматично видаляє невживані інтерфейси з импортов.
Можете більше не турбуватися про импортах. WebStorm досить розумний, щоб робити це за вас!
Висновок
Давайте згадаємо поради Jurgen для підвищення продуктивності розробки Angular в WebStorm:
Використовуйте Angular CLI в WebStorm для швидкої генерації нових проектів Angular і функцій
Переміщайтеся як профі для миттєвого переходу до оголошень коду і виявлення коду або файлів
Використовуйте Angular Language Service для поліпшення автокомплитера коду і перевірки на помилки без компіляції проекту Angular
Автоматично форматуйте код, щоб дозволити WebStorm форматувати весь код за налаштувань проекту
Оптимізуйте імпорти для видалення всіх невикористовуваних импортов і підтримки оптимального розміру пакету
У наступній частині Todd Motto поділиться своїми улюбленими радами, слідкуйте за оновленнями!
