Поліпшення підтримки Vue.js

У новій версії WebStorm JetBrains покращили підтримку Vue.js. У template-частині .vue-файлу тепер є автодоповнення та навігація до визначення для props, властивостей у data-об'єктах, computed властивостей та імен методів, оголошених у script частині.
Закриваюча фігурна дужка в template тепер автоматично додається при друку дужки, що відкриває.
Також JetBrains додали новий шаблон файлу для створення Vue-компонента і спеціальну колекцію шаблонів коду (Live Templates) для Vue, зроблену на базі популярної колекції шаблонів .

JavaScript та TypeScript

Нові рефакторинги

Pull member up та Extract superclass

Якщо ви хочете перемістити метод поточного класу до його батьківського класу або інтерфейсу, тепер ви можете використовувати новий рефакторинг Pull member up замість copy-paste. Він працює для JavaScript- та TypeScript-класів.
Якщо батьківського класу ще немає і ви хочете його створити і перенести частину методів і полів до нього, використовуйте рефакторинг Extract superclass.

Extract type alias та Extract interface

Для TypeScript JetBrains додали новий рефакторинг Extract type alias, який, як можна здогадатися, створює type alias для типу та замінює всі його використання на нове ім'я. Аналогічно, можна оголосити новий інтерфейс за допомогою Extract interface.
Також можна перетворити type alias на interface, якщо це можливо, за допомогою дії Convert alias to interface, доступної натисканням Alt-Enter.
JetBrains також покращили рефакторинги Change signature та Extract parameter – вони тепер використовують default parameter синтаксис для опціональних параметрів і в цілому краще працюють із ECMAScript 2015+ кодом.

Імпорти при копіюванні та вставці з файлу

Якщо ви скопіюєте код з одного JavaScript- або TypeScript-файлу в проекті і вставте його в інший файл, всі необхідні імпорти тепер додадуться автоматично.

Документація та автодоповнення для JavaScript APIs

Зміни зачепили і саму основу підтримки JavaScript. Раніше для автодоповнення, інформації про параметри та документацію для стандартних об'єктів та методів JavaScript JetBrains використовували "під капотом" складені нами файли з визначеннями. Тепер JetBrains використовуємо TypeScript declaration-файли.
Завдяки цьому з'явилися документація, а також автодоповнення для деяких відсутні методів. Після натискання F1 на методі з'явиться документація з .d.ts-файлу або його короткий опис з MDN.
Також JetBrains додали всередину WebStorm попередньо збудовані індекси для цих визначень, що прискорило запуск нових проектів.

Інтеграція з ESLint та TSLint

Починаючи з версії 2017.1, WebStorm дозволяє застосувати правила форматування коду з файлів налаштувань ESLint і TSLint. Тепер це відбувається автоматично при відкритті нового проекту, в якому є tslint.json та простий .eslintrc-файл.
Якщо ESLint-конфігурація описана на YAML або JavaScript або використовує extends, то імпорт налаштувань форматування можна виконати за допомогою дії Apply ESLint code style rules у контекстному меню файлу. Тоді WebStorm запустить ESLint, передасть йому конфігурацію для конвертації в JSON і вже з отриманої відповіді застосує відомі правила, які мають аналог у налаштуваннях форматування WebStorm.

Тестування та налагодження

Нове в інтеграції з Jest

Тепер, якщо ви запустите Jest-тести в WebStorm і додайте в конфігурації в полі Jest options --watch, WebStorm безпосередньо використовуватиме watch mode самого Jest для швидкого перезапуску тестів. (До речі, для Mocha JetBrains теж підтримали інтеграцію з watch mode).
Якщо один із тестів не пройшов через невідповідність снепшота, ви можете перегенерувати снепшот для цього тесту, клікнувши за посиланням у вікні виконання тестів.
Ще одне нововведення - запуск Jest-тестів з перевіркою покриття коду тестами (Run with Coverage). У звіті, який з'явиться в окремому вікні в IDE, буде показано відсотки покриття коду тестами для директорій та файлів у проекті. Якщо ви перейдете зі звіту до конкретного файлу, то побачите в ньому ліворуч червоні та зелені позначки, що показують, чи покритий тестами конкретний рядок коду.

Новий REST-клієнт у редакторі

У WebStorm 2017.3 з'явився новий інструмент для тестування REST API (на додаток до вже існуючого клієнта, доступного через меню Tools — Test RESTful Web Services).
Тепер можна писати (з автодоповненням!) і виконувати запити прямо в редактор у файлі з розширенням .http. Відповідь можна побачити у вікні запуску запиту, а логи можна переглядати та порівнювати прямо у редакторі.

Налагодження в браузері без додаткової конфігурації

Тепер, щоб налагоджувати client-side-додаток у вбудованому налагоджувачі в WebStorm, досить просто створити та запустити JavaScript Debug конфігурацію – більше не потрібно додатково встановлювати розширення для Chrome. WebStorm запустить Chrome у режимі віддаленого налагодження, який дозволяє підключення сторонньому налагоджувачу, тобто WebStorm.
Якщо ви використовуєте функцію WebStorm Live Edit, то розширення для Chrome вам все-таки ще потрібне. Live Edit працює під час налагодження та оновлює HTML та CSS у браузері при зміні коду в редакторі. Увімкнути Live Edit можна у Preferences | Build, Execution, Deployment | Debugger | Live Edit — “Update application in Chrome”.

Коротко про інші покращення в WebStorm 2017.3

• JetBrains покращили автодоповнення для CSS – воно стало точнішим для багатьох властивостей та їх значень, крім того, з'явився додаток для значень властивостей transform, transition та pointer-events.
• Тепер при перемиканні між гілками системи контролю версій IDE запам'ятовує, які файли відкриті, де стоять брейкпонти, і яку конфігурацію вибрано. Коли ви повернетеся до цієї гілки, цей стан відновиться.
• У проектних налаштуваннях Node.js тепер можна вибрати посилання на системний node замість шляхи до конкретної версії. Це особливо зручно, якщо ви використовуєте nvm. Тепер при зміні системної версії node після перезапуску IDE всі ці конфігурації та інструменти, що використовують node, продовжать використовувати нову системну версію.
• TypeScript definition-файли дозволяють покращити доповнення коду для різних бібліотек у JavaScript-файлах. Тепер достатньо натиснути Alt-Enter на імпорт бібліотеки і вибрати Install TypeScript definitions for better type information, щоб WebStorm завантажив відповідний declaration-файл і автоматично налаштував його як JavaScript Library в налаштуваннях.

Інші новини