Зустрічайте WebStorm 8: підтримка AngularJS, spy-js, інтеграція Grunt і багато іншого

  Ось і настав час весняного оновлення WebStorm, нашої IDE для front-end розробки та Node.js.
У новому WebStorm 8 з'явилися підтримка фреймворка AngularJS , JavaScript-трейсер spy-js , довгоочікувані множинні курсори в редакторі, інтеграція Grunt і Bower і ще багато цікавих нововведень і поліпшень.
Тепер про все по порядку.
 image
 
 

Підтримка AngularJS

Досвідчені користувачі WebStorm і шанувальники AngularJS, напевно, знають про те, що й раніше в WebStorm був доступний плагін для цього фреймворку. Бачачи все зростаючий інтерес до AngularJS, ми вирішили самі взятися за його підтримку.
 
Тепер в проектах з AngularJS в HTML-файлах додалося автодоповнення для директив AngularJS, імен оголошених контролерів і додатків, а також для data bindings всередині фігурних дужок.
 
 
 
При цьому WebStorm перевірить, чи коректно використання директиви в цьому тегу відповідно з документацією AngularJS.
 
Між іншим, до документації AngularJS можна легко звернутися, не покидаючи WebStorm, за допомогою Quick Documentation Lookup (ctrl-J на Mac, Ctrl + Q на Windows і Linux) або, навпаки, перейшовши на сайт AngularJS по комбінації Shift + F1 .
 
 image
 
Навігація по іменах контролерів працює як з HTML-файлу, так і через Search everywhere (рядок пошуку доступна по подвійному натисненню Shift) і Go to symbol (alt-cmd-O на Mac або Ctrl + Alt + Shift + N на Windows і Linux). Для ngView і $ routeProvider працює навігація до файлу темплейт.
 
Вихідний код плагіна для AngularJS доступний на GitHub . Ми сподіваємося, що він може послужити прикладом для створення нових полігонів для підтримки інших фреймворків.
 
 

Spy-js

 Spy-js — це потужний інструмент для трасування і профілювання JavaScript.
 Spy-js придасться для кращого розуміння виконання коду, виявлення помилок, а також фрагментів коду, виконання яких зайняло особливо багато часу.
 
Запустивши spy-js run-конфігурацію, в вікні ви зможете переглядати повний список подій, що відбуваються на сайті, відкритому в будь-якому браузері на комп'ютері (або навіть на мобільному пристрої ). Для списку подій доступні фільтри по імені події або по імені файлу.
 
Для кожної події можна переглянути повний event call stack і побачити у вікні редактора підсвічений шлях в коді, який вказує, як саме був виконаний цей сценарій.
 
 
 
Для роботи spy-js необхідно налаштувати системне проксі на комп'ютері, але spy-js може зробити це автоматично . Побачити spy-js у дії можна в цьому відео-демо .
 
 

Множинні курсори і множинне виділення

У WebStorm 8 з'явилася можливість редагування коду за допомогою множинних курсорів , а також функція множинного виділення .
 
Працює це так (є невеликі відмінності в шоткатах від IntelliJ IDEA):
 - Розставляння курсорів: Alt + Click ;
 - Додати наступне збіг у виділення: Alt + J для Windows і Ctrl — G для Mac;
 - Видалити збіг з виділення: Alt + Shift + J для Windows і Ctrl — Shift — G для Mac;
 - Видалити всі виділення і курсори: Esc ;
 - Клонувати курсор вище / нижче (гарячі клавіші ще не призначені).
 
 

Інтеграція Grunt

Інтеграцію систем збірки JavaScript проектів ми вирішили почати з підтримки Grunt .
У спеціальній консоле ви можете бачити список всіх завдань, оголошених в grunt -файлах проекту. По подвійному кліку можна запустити будь-яку задачу або групу завдань.
 
 
 
 

Інтеграція Bower

Інтеграція Bower — менеджера залежностей для веб-проектів — дозволяє шукати і встановлювати нові пакети прямо в IDE, автоматично оновлюючи проектний файл bower.json . Bower доступний в Setting | JavaScript .
 
 

Оновлена ​​консоль в відладчик

Консоль в JavaScript і Node.js відладчик тепер працює аналогічно консолі в браузері, тепер у ній можна виконувати код на JavaScript.
 
 

BDD тестування з CucumberJS

Ще одне нововведення в WebStorm 8: підтримка CucumberJS — утиліти для BDD тестування. WebStorm розуміє мову Gherkin і дозволяє легко створювати нові кроки для реалізації задуманого функціоналу (step definitions ). Результати тестування будуть представлені в зручному форматі у вікні IDE.
 
 
 
 

JavaScript

У цьому оновленні ми постаралися поліпшити підтримку технологій для роботи з модульною структурою JavaScript: RequireJS, AMD і EcmaScript 6 Harmony modules , додавши навігацію в пов'язані файли.
 
 

LESS і Sass

У цьому оновленні ми підтримали всі нововведення і зміни в LESS , включаючи саму нову версію 1.7, що вийшла недавно.
З версії Sass 3.3 в WebStorm 8 зараз вже підтримуються: директива @ at-root , @ each по декількох колекціям і прапор ! Global для змінних. Повна підтримка Sass 3.3 буде в найближчому оновленні WebStorm.
 
 

Що далі?

Дізнатися детальніше про нову версію і завантажити безкоштовну 30-денну пробну версію WebStorm 8, а так само подивитися відео про нові функції можна на сторінці продукту .
Оновлення до версії 8 безкоштовно для всіх, хто придбав ліцензію після 26 березня 2013 року.
Ми будемо раді відповісти на ваші запитання в коментарях.
Зауваження та пропозиції щодо нової версії ми чекаємо і в нашому баг-трекері .
  
Джерело: Хабрахабр

0 коментарів

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