Новий WebStorm 9: просто краще. Підтримка Meteor, React і JSX, інтеграція з Gulp, PhoneGap і багато іншого

2 тижні тому ми повністю оновили WebStorm — нашу IDE для front-end-розробки і Node.js. Ми вже анонсували деякі поліпшення в WebStorm 9, в тому числі підтримку нових фреймворків та інструментів. З тих пір було зроблено ще чимало роботи, результати якої можна побачити в WebStorm 9. У цьому пості ми докладно розповімо про це новому функціоналі і коротко нагадаємо про всім іншому.

image


Підтримка React і JSX

Менше ніж за 6 місяців, що пройшли з релізу WebStorm 8 і планування нами поліпшень для WebStorm 9, реквест про підтримку синтаксису JSX став найпопулярнішим в нашому трекері, зібравши більше 200 голосів користувачів. В блогах та твітері всі навперебій хвалили нову бібліотеку, колеги front-end-розробники почали використовувати React, і ми зрозуміли, що потрібно терміново починати роботу над її підтримкою.

Так в WebStorm 9 з'явилися підсвічування та завершення JSX-тегів і JavaScript виразів всередині JSX, а також навігація до оголошення React-компонента і рефакторинг Rename для них. Вбудовані інспекції WebStorm працюють для JSX коду, але ми з нетерпінням чекаємо підтримку JSX в JSHint і ESLint.



Радимо подивитися запис вебінару, в якому John Lindquist розповідає про розробку з React в WebStorm.
Ми продовжуємо працювати над поліпшеннями, так що будемо раді реквестам YouTrack.

Нові можливості spy-js: підтримка Node.js і ES6, доповнення коду і Magnifier

У минулому релізі WebStorm ми додали spy-js — інструмент для трасування і профілювання JavaScript-коду. З оновленням WebStorm spy-js тепер дозволяє профілювати не тільки client-side-код, але і Node.js (про що можна почитати в нашому блозі), а також підтримує EcmaScript 6.
Результати трасування тепер можна зберігати у файлі та повторно відкривати за допомогою пунктів Save/Load trace в меню spy-js.

Коли spy-js сесія запущена, інструмент не тільки збирає всю доступну інформацію про виконання коду, але і створює у кожної виконаної функції свого роду зворотний зв'язок з IDE. Артем Говорів, розробник spy-js, придумав цей зв'язок для автодоповнення коду і виконання довільного коду в контексті виконаних функцій. Це і було реалізовано в WebStorm 9!



Отже, для початку потрібно переконатися, що в меню spy-js стоїть галочка у Enable spy-js autocomplete and magnifier. Після цього запускаємо spy-js, відкриваємо наше додаток в браузері (або просто запускаємо, якщо працюємо з Node.js) і починаємо редагувати його код в WebStorm. Для вже виконаного фрагмента коду, при його редагуванні списку автодоповнення ми можемо бачити іконку spy-js і браузера. Це означає, що цей варіант був запропонований spy-js за результатами його реального виконання.



На відміну від статичного аналізу коду, який виконує WebStorm для звичайного автодоповнення, spy-js знає точно, які методи і властивості доступні в даний момент.



За допомогою функції Magnifier від spy-js можна бачити інформацію про значеннях об'єктів за результатами виконання коду, аналогічну Evaluate expression при дебаге, але без брейкпоинтов. Інформація з'являється при наведенні курсору на будь-який об'єкт, а не тільки на параметри і значення, що повертаються, на виконаному client-side і Node.js коді при запущеному spy-js.



Детальніше про це можна почитати в нашому блозі (англійською).

ESLint і JSCS

Список підтримуваних WebStorm інструментів для перевірки якості і стилю коду (у додатку до вбудованим інспекціям самої IDE) поповнився інтеграцією c ESLint.

ESLint багато в чому схожий на JSHint, головна відмінність у тому, що набір перевірок можна розширювати за рахунок підключаються правил. У WebStorm перевірка коду з допомогою ESLint здійснюється нальоту. На жаль, це працює не так швидко, як JSHint, але це вже особливість самого інструменту. ESLint потрібно попередньо встановити через npm.

Ми також додали інтеграцію з JSCS, інструментом для перевірки стилю коду (докладніше про який можна почитати на хабре). У налаштуваннях WebStorm можна включити перевірку з допомогою JSCS і вибрати конфігураційний файл або один з існуючих пресетів. Помилки форматування будуть відображатися в редакторі. Сподіваємося, що Code styles всередині WebStorm у вас налаштовані у відповідності з вашим командним стилем, і попередження від JSCS ви не будете зустрічати.



Форматування коду

Продовжимо про форматування коду. минулому пості про WebStorm 9 EAP ми говорили про те, що в WebStorm був доданий плагін EditorConfig, який дозволяє ділитися налаштуваннями стилю коду в проекті в різних редакторах. Всі правила описуються в проектному файлі .editorconfig. Зверніть увагу, що правила форматування .editorconfig мають пріоритет над налаштування в IDE. Вимкнути EditorConfig можна в налаштуваннях Editor | Code Style.



Інше нововведення у налаштуваннях форматування називається Detect and use existing file indents for editing (Editor | Code Style). Як можна здогадатися, з цією опцією редактор тепер буде визначати і переиспользовать поточні параметри форматування у файлі, пов'язані з відступами.

Scratch-файли

WebStorm 9 дозволяє створювати тимчасові файли у проекті, вони ж Scratch-файли. За шорткату Shift-Cmd-N на Mac / Ctrl+Alt+Shift+Insert на Windows або Linux ви можете створити тимчасовий файл, вибравши потрібний тип файлу. Всі можливості редактора, наприклад автодоповнення коду та інспекції, доступні в Scratch-файлах.



Коротко про інші оновлення

Для повноти картини пройдемося по іншим функціям в 9-й версії, про які ми докладніше писали минулому пості:

  • Підтримка фреймворку Meteor: WebStorm визначає Meteor проекти,
    надає автодоповнення коду Meteor API, що дозволяє налагоджувати як внутрішню, так і зовнішню частину Meteor-додатки;
  • Інтеграція з PhoneGap, Cordova і Ionic: додана можливість створювати нові проекти, а також виконувати команди run і emulate з допомогою Run configuration в WebStorm;
  • Оновлений Live Edit дозволяє автоматично перезапускати Node.js-програми при зміні коду;
  • Інтеграція системи збирання Gulp;
  • Postfix templates для JavaScript;
  • Покращена підтримка бібліотеки Polymer;
І, наостанок, ще кілька оновлень, про які ми б хотіли розповісти.

Інтеграція з pub serve для Dart-проектів

У WebStorm 9 була додана інтеграція з pub serve для Dart-проектів. Тепер, працюючи з Dart, при відкритті програми в браузері або налагодження, WebStorm автоматично запустить pub serve. Будь-які повідомлення в процесі роботи pub serve будуть відображатися у відповідному вікні в IDE. Крім цього, було внесено безліч поліпшень підтримки Dart, наприклад додано налагодження Dart isolates і можливість швидко відкрити Dart Observatory.

Покращена підтримка CSS3

Ми переробили підтримку CSS в WebStorm, додавши підтримку всіх останніх специфікацій CSS3. В результаті покращився автодоповнення властивостей і значень з CSS3, а також з'явилися нові інспекції для CSS.

Індексування node_modules по-новому

Сучасні проекти використовують все більше і більше різноманітних інструментів і залежностей на Node.js. Наприклад, шаблон проекту Web Starter Kit (який, до речі, додали в список шаблонів нових проектів) має 25 тільки прямих залежностей з npm.
Ми зробили так, що WebStorm тепер індексує тільки самі ці залежності, виключаючи з індексу їх внутрішні node modules. Повернутися до повної індексації можна в налаштуваннях Languages & Frameworks | Node.js and npm.

Значення при відладці прямо в редакторі

У WebStorm 9 була додана нова фіча відладчика: тепер при налагодженні значення об'єктів відображаються прямо в редакторі поруч з кодом.



Що далі?

Дізнатися детальніше про WebStorm 9, а також завантажити безкоштовну 30-денну пробну версію IDE можна на сторінці продукту.
Оновлення до версії 9 безкоштовно для всіх, хто придбав ліцензію після 22 жовтня 2013 року. Також нагадуємо про те, що всі IDE від JetBrains тепер безкоштовні для студентів.

Ми будемо раді відповісти на ваші питання в коментарях.
Зауваження та пропозиції щодо нової версії ми чекаємо і в нашому баг-трекері.

Develop with Pleasure!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.