Информационный портал по безопасности » Программирование » Веб-разработка » Встречайте WebStorm 8: поддержка AngularJS, spy-js, интеграция Grunt и многое другое

 

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

Автор: admin от 28-03-2014, 13:55, посмотрело: 768

Вот и настало время весеннего обновления WebStorm, нашей IDE для front-end разработки и Node.js.
В новом WebStorm 8 появились поддержка фреймворка AngularJS, javascript-трейсер spy-js, долгожданные множественные курсоры в редакторе, интеграция Grunt и Bower и еще много интересных нововведений и улучшений.
Теперь обо всем по порядку.
Встречайте WebStorm 8: поддержка AngularJS, spy-js, интеграция Grunt и многое другое

Поддержка AngularJS


Опытные пользователи WebStorm и поклонники AngularJS, наверное, знают о том, что и раньше в WebStorm был доступен плагин для этого фреймворка. Видя всё растущий интерес к AngularJS, мы решили сами взяться за его поддержку.

Теперь в проектах с AngularJS в HTML-файлах добавилось автодополнение для директив AngularJS, имен объявленных контроллеров и приложений, а также для data bindings внутри фигурных скобок.

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

При этом WebStorm проверит, корректно ли использование директивы в этом теге в соответствии с документацией AngularJS.

Между прочим, к документации AngularJS можно легко обратиться, не покидая WebStorm, с помощью Quick Documentation Lookup (ctrl-J на Mac, Ctrl+Q на Windows и Linux) или, наоборот, перейдя на сайт AngularJS по комбинации Shift+F1.

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

Навигация по именам контроллеров работает как из 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 и увидеть в окне редактора подсвеченный путь в коде, указывающий, как именно был выполнен этот сценарий.

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

Для работы 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-файлах проекта. По двойному клику можно запустить любую задачу или группу задач.

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

Интеграция Bower


Интеграция Bower — менеджера зависимостей для веб-проектов — позволяет искать и устанавливать новые пакеты прямо в IDE, автоматически обновляя проектный файл bower.json. Bower доступен в Setting | javascript.

Обновленная консоль в отладчике


Консоль в javascript и Node.js отладчике теперь работает аналогично консоли в браузере, теперь в ней можно исполнять код на javascript.

BDD тестирование с CucumberJS


Еще одно нововведение в WebStorm 8: поддержка CucumberJS — утилиты для BDD тестирования. WebStorm понимает язык Gherkin и позволяет легко создавать новые шаги для реализации задуманного функционала (step definitions). Результаты тестирования будут представлены в удобном формате в окне IDE.

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

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 года.
Мы будем рады ответить на ваши вопросы в комментариях.
Замечания и предложения по новой версии мы ждем и в нашем баг-трекере.

Источник: Хабрахабр

Категория: Программирование / Веб-разработка

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent