WebStorm 2017.2 - які покращення для JavaScript-розробників
JetBrains випустила велике оновлення WebStorm. Які покращення чекають на JavaScript-розробників у WebStorm 2017.2 та інших IDE JetBrains версії 2017.2.
Поліпшення підтримки JavaScript та TypeScript
Move symbol
Новий рефакторинг Move symbol переносить класи, глобальні функції та змінні з одного JavaScript або TypeScript файлу до іншого. IDE автоматично додасть експорт і оновить ES6-імпорти у файлах, де використовується цей символ.
Щоб викликати цей рефакторинг, поставте курсор на символ ES6-модуля і натисніть F6.
Покращена підтримка JavaScript у проектах з webpack
Автодоповнення коду та навігація у JavaScript-файлах стали точнішими у проектах, що використовують webpack aliases і modules. WebStorm запускає webpack.config.js в корені проекту та використовує результати для побудови більше точну модель проекту. В результаті WebStorm правильно зрозуміє символи та шляхи в імпортах.
Параметри та виведені типи в TypeScript
У файлах TypeScript імена параметрів відображаються прямо в редакторі, щоб було простіше читати код. За промовчанням підказки відображаються лише для параметрів, що є literals або function expressions. Налаштувати відображення підказок можна у налаштуваннях: Editor | General | Appearance – Show parameter name hints.
Форматування коду
Імпорт стилів форматування з .eslintrc
Якщо ви використовуєте ESLint для перевірки стилю форматування JavaScript-коду, WebStorm запропонує застосувати правила, описані в .eslintrc або в полі eslintConfig у package.json< /em>, до проектних параметрів форматування JavaScript. Коли ви відкриєте JavaScript-файл у такому проекті, ви побачите нотифікацію “Apply code style from ESLint?”.
Ми знайшли відповідність між 37 правилами ESLint та налаштуваннями форматування в WebStorm. Наприклад: indent, curly або no-trailing-spaces. Варто мати на увазі, що WebStorm не завжди підтримує складні опції у правилах і не підтримує правила з плагінів та пресетів, доданих через поле extends.
Головна мета цієї інтеграції – зробити так , щоб переформатування коду за допомогою IDE не ламало правильно відформатований код з точки зору ESLint і допомагало писати новий код, що максимально відповідає правилам .eslintrc. Rearrange code
З новими налаштуваннями стилю Arrangement тепер можна налаштувати порядок блоків у JavaScript- та TypeScript-класах і застосувати їх за допомогою дії Rearrange code. Його можна викликати через Find action (Cmd/Ctrl-Shift-A) або виконувати під час переформатування коду. Для цього викличте розширений діалог форматування, натиснувши Alt-Shift-Cmd-L на macOS або Ctrl+Alt+Shift+L на Windows and Linux, та позначте галочкою Rearrange Code.
З новими налаштуваннями Code Style | Blank lines можна вказати необхідну кількість порожніх рядків після імпортів, класів, методів та функцій.
Форматування JSX
Якщо ви слідуєте стилю Airbnb для React, поставте значення When multiline для нових опцій New line before first attribute та New line after last attribute у налаштуваннях стилю форматування HTML (ці правила застосовуються до JSX-тегів).
Тестування коду
Запуск Karma-тестів
Karma-тести тепер можна запускати та налагоджувати по одному. Натисніть на іконку в редакторі ліворуч від тесту або тест-сьюту та виберіть Run або Debug. Після того, як тест виконається, значок покаже його статус.
Покриття коду тестами для Mocha
При тестуванні з Mocha тепер можна дізнатися, наскільки добре код покритий тестами.
Для цього потрібно спочатку встановити nyc (новий командний інтерфейс для Istanbul), а потім запустити < em>Mocha Run with coverage… за допомогою іконки запуску тестів у редакторі або через Mocha-конфігурацію.
Звіт з'явиться в окремому вікні в WebStorm і покаже скільки файлів покрито тестами та скільки відсотків рядків у їх покрито тестами. Зі звіту можна швидко перейти в самому файлі. Ліворуч у редакторі рядки, покриття тестами, будуть відмічені зеленим кольором, а непокриті рядки – червоним.
Stylesheets
Поліпшення в підтримці Sass та SCSS
Автодоповнення імен класів у HTML-файлах тепер працює для Sass- та SCSS-селекторів, створених через &.
Angular
Підтримка Angular Material
Angular Material
- це бібліотека UI-компонентів для Angular. Тепер WebStorm краще розуміє та підказує спеціальні атрибути з Angular Material у Angular-шаблонах.
Створення методу з Angular-шаблону
Якщо ви використовували новий метод в Angular-шаблоні, але ще не оголосили його в класі компонента, натисніть Alt-Enter на його імені та виберіть Create method, щоб його створити.
Нотифікація про npm install
При роботі з JavaScript-проектами часто доводиться встановлювати залежності через npm і легко забути, що потрібно оновити залежності при оновленні з Git або перемиканні на інший branch. WebStorm нагадає, що потрібно запустити npm install або npm update, коли ви відкрили проект або якщо package.json оновився.
Крім цього у WebStorm 2017.2 ви можете:
- Показувати файли з однаковими іменами, але різними розширеннями з однієї директорії згрупованими. Змінити правила угруповання можна через File nesting у налаштуваннях Project view (іконка з шестернею).
- Використовувати покращену підтримку React stateless-компонентів та автодоповнення props.
- Використовувати breadcrumbs внизу редактора у JavaScript- та TypeScript-файлах, щоб швидше навігати по файлу.
- Автоматично замінити module.exports на ES6-експорт: натисніть Alt-Enter на виразі та виберіть Convert to export або запустіть Run inspection by name — “module.export is used instead of export”, щоб внести зміни до кількох файлів проекту.
- Налаштувати та перевіряти формат повідомлення про коміті у налаштуваннях Version Control | Commit Dialog.
- Відкочувати коміт у Git та змінювати комміт-повідомлення через контекстне меню комміта в Logs у вікні Version Control.
