company_banner

Новый 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.
    Мы продолжаем работать над улучшениями, так что будем рады pеквестам в 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!
    JetBrains 132,87
    Компания
    Поделиться публикацией
    Комментарии 48
    • +1
      Отличная новость! Планируется ли поддержка D3.js? Если да, то когда и в каком объеме?
      • +3
        Наличие файла библиотеки в проекте или стабов D3 (добавленных через Preferences | Languages & Frameworks | JavaScript | Libraries — Download — TypeScript community stubs) должно обеспечить автодополнение для всех методов из библиотеки. Есть какие-то особые пожелания по поддержке? Можно добавить комментарием в этом реквесте на трекере.

        image
      • 0
        Ем… вот у меня есть глупый вопрос. Я пользуюсь IDEA, есть ли отличия от вебсторма, или их можно компенсировать установкой дополнительных плагинов?
        • +3
          Все функции WebStorm или сразу доступны в IntelliJ IDEA, или добавляются плагинами (например, поддержка Node.js), все собирается из одного codebase. Хотя WebStorm все-таки чуть лучше позволяет сфокусироваться именно на front-end и Node.js разработке за счет того, что фич меньше чем в IJ.
          • +1
            Но плагины можно жеж отключить))
            Спасибо )
          • +1
            в вебсторм нельзя прикрутить поддержку php даже через плагины.
            • +1
              Для PHP предлагает PhpStorm, в нем также доступен весь функционал WebStorm.
              • +1
                так, подождите, значит, если я разрабатываю и на php, и на js (в разных проектах), то мне будет достаточно только PhpStorm? Это я тогда зря покупал WebStorm, а на PhpStorm денег зажилил?..
                • +3
                  Да, PhpStorm должно быть достаточно. Стараемся на сайте говорить о том, что все фичи WebStorm доступны, но надо, наверно, заметнее… Если решите приобрести PhpStorm, напишите в sales support, могут предоставить скидку.
                  • 0
                    WebStorm 9 brings a completely new feature called Scratch Files. Scratch Files help you experiment and prototype right in the editor — without creating any new project files — and still enjoy top-level coding assistance.

                    А в PhpStorm есть Scratchs?
                    • 0
                      Есть сторонний плагин с очень похожим функционалом (только scratch-файлы не исчезают в небытие при закрытии).
                      • 0
                        В PhpStorm 8 есть.
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  Поддержка Gulp есть в IntelliJ IDEA 14, это часть предустановленного JavaScript support плагина. Tool window со списком tasks появляется, если в проекте есть gulpfile.js
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • НЛО прилетело и опубликовало эту надпись здесь
                  • –1
                    Webstorm обрезанная IDEA с набором плагинов как и PhpStorm и другие проекты, все можно поставить через плагины
                  • 0
                    Можно ли обновить лицензию ВебСторма до ПХПСторма? Или надо покупать отдельно?
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • +4
                        Стоит написать в отдел продаж. Они помогут. (Я представитель компании)
                        • +1
                          Если техподдержка и отдел продаж не отвечают на вопросы больше недели то ответ можно уже не ждать?
                          • 0
                            Напишите, пожалуйста, номер обращения из zendesk, завтра же разберемся в чем дело. Спасибо!
                      • 0
                        Няшно.
                        Я та понял все это можно доустановить в PhpStorm?
                        • +4
                          Да, верно. Есть незначительное расхождение из-за дат релизов, но в PhpStorm 8.0.2, который вот-вот выйдет (сейчас доступен PhpStorm 8.0.2 RC), будет полностью все доступно из WebStorm 9.
                        • +1
                          Может кто-нибудь сказать почему WebStorm при срабатывании точки останова в node.js иногда очень долго вычисляет переменные? Иногда процесс вычисления затягивается «навсегда».
                          Например, я заметил, что переменные в которых лежит Buffer с большой вероятностью очень долго «раскрываются».
                          • +1
                            В WebStorm 9 это было исправлено. Или такое наблюдается и в новой версии?
                            • +1
                              В 9-й версии пока не заметил. Действительно стало лучше.
                          • +1
                            Очень хочется более продвинутой поддержки JSDoc. Конкретно эта проблема youtrack.jetbrains.com/issue/WEB-10956 сильно мешает жить. А так все замечательно, спасибо за отличный инструмент!
                            • +2
                              Постараемся улучшить к WebStorm 10 или раньше. Спасибо!
                              • +1
                                Да очень хочется магии, где динамический язык как javascript будет автодополняться как C# в VS. Более продвинутая поддержка jsdoc и улучшенная валидация/автодополнение на его основе была бы очень очень кстати. Спасибо.

                                И поздравляем с новым релизом и спасибо команде за старания. Вчера на meteorday.com/ все были очень рады поддержке метеора в WS!
                                • 0
                                  Спасибо за поздравление и отдельное спасибо за репорты и реквесты.
                                  Про Meteor Day очень здорово, очень рады!
                            • +6
                              За поддержку Meteor огромное спасибо! Первая IDE, которая его поддерживает. Покупаем лицензии на весь тим. ;)
                              • +1
                                Спасибо, очень приятно! Ждем пожелания по улучшению, если есть, на YouTrack.
                              • 0
                                Неплохо бы в список исключений деплоя по умолчанию добавить node_modules и .sass-cache
                              • 0
                                Если поменять встроенные шаблоны для файлов, добавив в них переменные, то WebStorm не запросит их значения при создании. Это баг или, так сказать, фича?
                                • 0
                                  Встроенные шаблоны имеют свои визарды создания нового файла, в которых нельзя добавить возможность ввести значения переменных. Переменные работают только для кастомных шаблонов.
                              • +2
                                Я оставил самый первый комментарий к этому реквесту JSX и наблюдал всю волну энтузиазма за последние полгода в почте.

                                И очень приятно, что все это привело к отличным результатам, йее!
                                • 0
                                  Да, это был, наверно, наш самый быстрорастущий по количеству голосов реквест, не могли проигнорировать, хотя изначально не планировали поддержку JSX в WebStorm 9.
                                  Теперь ждем с нетерпением фидбек.
                                • 0
                                  Горячую замену React/jsx компонентов не поддерживаете? Для webpack есть react-hot-loader, позволяющий налету заменять компоненты без перезагрузки страницы:
                                  • 0
                                    Нет, не поддреживаем. На webpack планируем внимательней посмотреть в скором будущем, посмотрим, что можно сделать для поддержки.
                                  • 0
                                    Жаль нет поддержки swig/twig/django/jinja и подобных шаблонов. Даже базовая подсветка очень помогла бы.
                                    • 0
                                      Для Twig, Slim и Jade есть официальные плагины, для прочего, думаю, тоже есть от сообщества.
                                      • 0
                                        Посмотрел в плагинах, twig не ставится на webstorm, по крайней мере на мой 9.01. Slim и Jade немного не то.
                                        • 0
                                          Twig поддерживается только в PhpStorm и IntelliJ IDEA.
                                    • –1
                                      Спасибо за релиз :)
                                      Планируете ли поддержку coffeecscript для jsx? github.com/jsdf/coffee-react-transform

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

                                    Самое читаемое