company_banner

WebStorm 2017.2 – что нового в поддержке JavaScript, TypeScript, Angular и Sass и работе с ESLint, Karma и Mocha

    На этой неделе вышло большое обновление WebStorm. В этом посте мы расскажем подробнее о том, какие улучшения ждут JavaScript-разработчиков в WebStorm 2017.2 и других IDE JetBrains версии 2017.2.

    Вы можете прочитать подробнее о WebStorm 2017.2 и скачать его на нашем сайте.

    Улучшения в поддержке JavaScript и TypeScript


    Move symbol


    Новый рефакторинг Move symbol переносит классы, глобальные функции и переменные из одного JavaScript или TypeScript файла в другой. IDE автоматически добавит экспорт и обновит ES6-импорты в файлах, где используется этот символ.

    Чтобы вызвать этот рефакторинг, поставьте курсор на символ в ES6-модуле и нажмите F6.



    Улучшенная поддержка JavaScript в проектах с webpack


    Автодополнение кода и навигация в JavaScript-файлах стали точнее в проектах, использующих webpack aliases и modules. WebStorm запускает webpack.config.js в корне проекта и использует результаты для построения более точной модели проекта. В результате WebStorm правильно поймет символы и пути в импортах.



    Кстати, ES6-импорты в JavaScript-файлах теперь добавляются автоматически при автодополнении символов, объявленных и явно заэкспортированных в вашем проекте.

    Параметры и выведенные типы в TypeScript


    В TypeScript-файлах имена параметров отображаются прямо в редакторе, чтобы было проще читать код. По умолчанию, подсказки отображаются только для параметров, являющихся literals или function expressions. Настроить отображение подсказок можно в настройках: Editor | General | Appearance – Show parameter name hints.



    Нажмите cmd или Ctrl и наведите на символ в TypeScript-коде, и WebStorm покажет информацию о его типе с учетом текущего контекста. Это помогает быстрее находить проблемы, связанные с использованием типов.

    Форматирование кода


    Импорт стилей форматирования из .eslintrc


    Если вы используете ESLint для проверки стиля форматирования JavaScript-кода, WebStorm предложит применить правила, описанные в .eslintrc или в поле eslintConfig в package.json, к проектным настройкам форматирования JavaScript. Когда вы откроете JavaScript-файл в таком проекте, вы увидите нотификацию “Apply code style from ESLint?”.

    Мы нашли соответствие между 37 правилами ESLint и настройками форматирования в WebStorm. Например: indent, curly или no-trailing-spaces. Стоит иметь в виду, что WebStorm не всегда поддерживает сложные опции в правилах и не поддерживает правила из плагинов и пресетов, добавленных через поле extends.

    Главная цель этой интеграции – сделать так, чтобы переформатирование кода с помощью IDE не ломало верно отформатированный код с точки зрения ESLint и помогало писать новый код, максимально соответствующий правилам из .eslintrc.

    Rearrange code


    С новыми настройками стиля Arrangement теперь можно настроить порядок блоков в JavaScript- и TypeScript-классах и применить их с помощью действия Rearrange code. Его можно вызвать через Find action (Cmd/Ctrl-Shift-A) или выполнять при переформатировании кода. Для этого вызовите расширенный диалог форматирования, нажав Alt-Shift-Cmd-L на macOS или Ctrl+Alt+Shift+L на Windows and Linux, и отметьте галочкой Rearrange Code.



    С новыми настройками Code Style | Blank lines можно указать необходимое число пустых строк после импортов, классов, методов и функций.

    Форматирование JSX


    Если вы следуете стилю Airbnb для React, поставьте значение When multiline для новых опций New line before first attribute и New line after last attribute в настройках стиля форматирования HTML (эти правила применяются к JSX-тегам).

    Тестирование кода


    Запуск Karma-тестов


    Karma-тесты теперь можно запускать и отлаживать по одному. Нажмите на иконку в редакторе слева от теста или тест-сьюта и выберите Run или Debug. После того, как тест выполнится, иконка покажет его статус.



    Далее вы можете запускать сохраненную или автоматически созданную Karma-конфигурацию через попап Run… (Ctrl-Alt-R на macOS или Alt+Shift+F10 на Windows и Linux).

    Покрытие кода тестами для Mocha


    При тестировании с Mocha теперь можно узнать, насколько хорошо код покрыт тестами.

    Для этого нужно сперва установить nyc (новый командный интерфейс для Istanbul), а потом запустить Mocha Run with coverage… с помощью иконки запуска тестов в редакторе или через Mocha-конфигурацию.

    Отчет появится в отдельном окне в WebStorm и покажет сколько файлов покрыто тестами и сколько процентов строк в них покрыто тестами. Из отчета можно быстро перейти в самому файлу. Слева в редакторе строки, покрытие тестами, будут отмечены зеленым цветом, а непокрытые строки – красным.



    Stylesheets


    Улучшения в поддержке Sass и SCSS


    Автодополнение имен классов в HTML-файлах теперь работает для Sass- и SCSS-селекторов, созданных через &.



    К таким селекторам, а также к nested-селекторам, можно быстро перейти из HTML-файла с помощью Cmd-click/Ctrl+click.

    Angular


    Поддержка Angular Material


    Angular Material – это библиотека UI-компонентов для Angular. Теперь WebStorm лучше понимает и подсказывает специальные атрибуты из Angular Material в Angular-шаблонах.



    Создание метода из Angular-шаблона


    Если вы использовали новый метод в Angular-шаблоне, но еще не объявили его в классе компонента, нажмите Alt-Enter на его имени и выберите Create method, чтобы его создать.

    Нотификация о npm install


    При работе с JavaScript-проектами часто приходится устанавливать зависимости через npm и легко забыть, что нужно обновить зависимости при обновлении из Git или переключении на другой branch. WebStorm напомнит, что нужно запустить npm install или npm update, когда вы открыли проект или если package.json обновился.

    Помимо этого в WebStorm 2017.2 вы можете:

    • Показывать файлы с одинаковыми именами, но разными расширениями из одной директории сгруппированными. Изменить правила группировки можно через File nesting в настройках Project view (иконка с шестеренкой).
    • Использовать улучшенную поддержку React stateless-компонентов и автодополнение props.
    • Использовать breadcrumbs внизу редактора в JavaScript- и TypeScript-файлах, чтобы быстрее навигировать по файлу.
    • Автоматически заменить module.exports на ES6-экспорт: нажмите Alt-Enter на выражении и выберите Convert to export или запустите Run inspection by name — “module.export is used instead of export”, чтобы внести изменения в нескольких файлах проекта.
    • Настроить и проверять формат сообщения о коммите в настройках Version Control | Commit Dialog.
    • Откатывать коммит в Git и изменять коммит-сообщение через контекстное меню коммита в Logs в окне Version Control.

    Скачать WebStorm 2017.2 можно на сайте JetBrains.

    Если у вас возникли проблемы с WebStorm, пожалуйста, сообщите об этом на нашем issue tracker.
    Метки:
    JetBrains 263,36
    Компания
    Поделиться публикацией
    Комментарии 49
    • 0
      А вы планируете добавлять Database Tools в WebStorm? А то странно получается, что прям на главной странице в описании вы WebStorm позиционируете как инструмент для разработки на node.js, а фунционал работы с базой добавлять не спешите. Хотя в других модификациях IntelliJ IDEA это давно есть…
      • 0
        Есть инструмент для работы с БД в репозитории плагинов от JetBrains Database Navigator
        • +3
          В данный момент Database Tools не поддерживают noSQL баз данных, так что полезность этого плагина для Node.js разработчиков несколько ограничена и нам не хочется нагружать интерфейс для тех, кто пишет frontend или не использует SQL.
          Так же хотелось бы избежать конфликтов, связанных с ценообразованием продуктов DataGrip и WebStorm.
          Вероятно, в будущем Database Tools будет доступен как платный плагин, но пока никаких четких сроков для этого нет.
          • 0

            И вовсе Node.js не означает noSQL.


            И, по-моему, интерфейс это не нагрузит. К тому же плагин можно отключить. В других IDE у вас при первом запуске предлагается выбрать, с чем работать, например.


            В вопросе ценообразования, конечно, вам виднее.
            Хотя, если проблема в том, что WebStorm с этим плагином будет уметь всё то же, что и DataGrip, а стоит он меньше, так сделайте DataGrip дешевле для избежания конфликтов :) Этот плагин ведь есть в, скажем, PHPStorm, а стоит он столько же, сколько и DataGrip.

            • 0
              В данном плагине нет, но есть отдельный инструмент так же в репозитории jetBrains Mongo plugin
          • 0

            А поддержка CSS-модулей почему в список не попала? В What's new на сайте есть, а в статье ни слова.

            • +1
              Да, поддержка CSS Modules есть. Очень много всего нового, не все упомянули тут. :)
              • 0
                Она работает как то странно, только с *.css файлами а у меня в проекте везде sass и вот тут облом
                • 0
                  --del
                • +1
                  Нужно больше полезных гифок!
                  Я так 2 года пользовался и не знал, что есть такая комбинация как cmd+alt+← и cmd+alt+→
                  • +1
                    Рекомендую посмотреть вебинар loftbog возможно еще что-то узнаете )))
                  • 0
                    Поддержку styled-components планируте?
                    • 0
                      Планируем посмотреть к следующему релизу. Вы используете именно styled-components или что-то ещё из CSS in JS?
                      • 0
                        Именно styled-components. Ну и раз пошла такая пьянка, было прекрасно еще Prettier интегрировать)
                        • 0
                          Prettier можно использовать и сейчас через external tool. Или хочется чего-то более специфичного?
                          • 0
                            Да, я настроил, но хочется чтоб было менее… костыльно что-ли. Для форматирования при сохранении можно записать макрос и переопределить хоткей, но тогда это будет всегда работать, а он нужен не всегда.
                            Идеально как в Атоме или ВСКоде.
                            • +1

                              Поддержу! Автоформат при сохранении/наборе был бы крайне полезен. В трекере вроде даже тикет заведен, но там аргументы из серии "autoformat — это то, что должно происходить при нажатии комбинации ctrl+alt+l" — так себе...

                              • 0
                                По мне так автоформатирование нужно когда человек сам захочет отформатировать все под стиль. Кучу раз были моменты, когда пишешь код, а он прыгает в лево-право. Это ужасно бесит, поэтому лучше чтобы было хоткеем (контроль за ситуацией)
                                • 0

                                  Лучше не то или другое (по мне так те же visual studio и vscode прекрасно справляются с форматированием при наборе), а возможность выбрать в настройках.


                                  А вообще, на то оно и автоформатирование. А вот хоткей — команда форматировать

                      • 0
                        Тоже очень не хватает поддержки Styled Components, хотя бы подсветки. Был плагин, но он сломался с последними версиями WebStorm…
                      • 0

                        Спасибо что добавили возможность запускать Karma-тесты по одному. Очень не хватало этого.

                        • +1
                          Ни разу слово «производительность» не встретил в статье, хотя очень ждал.
                          Скажите, вы планируете заняться производительностью? Оно жрёт неприличное количество памяти и даже при этом иногда намертво зависает на несколько секунд переваривая что-то своё (я подозреваю путается в анализе кода проекта). Это на системе с SSD и 16 оперативки.
                          Однажды мне удалось написать javascript который намертво вешал Webstorm при включенной валидации кода. Но при попытке выделить это баг уходил. Можно вообще валидацию отдельным процессом запускать?
                          • 0
                            Хоть этого и нету в посте, но производительностью мы занимаемся регулярно.
                            Было бы здорово, если бы Вы смогли немного рассказать о проекте: используется ли какой-нибудь автоматический ребилд при изменении исходников? Если да, то куда генерируется вывод этого процесса? Так же было бы здорово, если бы Вы смогли снять снэпшот или прислать логи после зависания
                            • 0
                              Еще есть вопрос про производительность.
                              При включении галочки Code highlighting and built-in inspections (для Flow) ну очень сильно падает производительность. Я понимаю, что меня там предупреждают, но тормозить начинает так сильно, что даже свежеоткрытый файл раскрашивает по строчке в секунду(
                              image
                              • 0
                                К сожалению тут две проблемы: Flow server довольно медленно отвечает на соответствующие запросы, а мы в свою очередь посылаем их очень много и сносно это работает только на небольших проектах и файлах. Пока планы команды Flow по улучшению протокола не позволяют обещать, что в ближайшем времени будет лучше.
                              • 0
                                Окей, буду собирать детали и информацию на будущее.
                            • 0
                              А будет пост об изменениях в новой версии scala плагина?
                              • 0
                                Вроде солидная IDE, а светлая тема для синтаксиса по умолчанию просто ужасная. Большинство символов жирные, некоторые цвета теряются на основном фоне. Не пойму почему всё так плохо.
                                • 0
                                  Ах! Если бы он умел открывать .php нормально, цены бы ему небыло! Зпасибо за описание)
                                  • 0
                                    Есть же PhpStorm. И цена у них тоже есть)
                                  • 0

                                    PhpStorm же есть. (опоздал немножко)

                                  • 0
                                    Насколько продукты JetBrains отличаются друг от друга? Идея включает в себя все, что есть в отдельных продуктах?
                                    То есть, если у меня куплена лицензия Идеи и я эксперементирую с Ангуларом, то даст ли мне что-то новое WebStorm или Идея эквивалентна ему?
                                    • 0
                                      В IntelliJ IDEA доступны все плагины, входящие в состав WebStorm, некоторые из них установлены по умолчанию, некоторые можно добавить через Настройки — Плагины. Как только Angular-плагин включен, поддержка будет такая же как и в WebStorm. Если вам нужна и поддержка Java, и JavaScript, и других языков, советуем использовать IntelliJ IDEA.
                                      • 0
                                        И, кстати, в IDEA 2017.2 Angular плагин включён по-умолчанию
                                        • 0
                                          Спасибо. Я так и надеялся, что все дело только в плагинах.
                                          А как тогда выглядит ситуация для пользователей WebStorm? Они не могут установить плагины, необходимые для разработки на чем-то другом?
                                      • 0
                                        Обновил IDE на ubuntu, шрифт релактора кода стал вытянутым. Кто сталкивался? Как нормализовать?
                                        • 0
                                          Всё супер, но зачем вы сломали горячие клавиши начиная с версии, кажется, 2017.1.2?

                                          Комментирование кода по Cmd + / при переключении на русскую раскладку превращается в сворачивание блока кода. Очень неудобно, почему бы не сделать новое поведение опциональным?
                                          • 0
                                            Под линуксом полет нормальный. Ничего не менялось. Сворачивание кода на '.' (en) или 'ю' (ru). Может вы промазали?
                                            • 0
                                              Можно выключить: https://intellij-support.jetbrains.com/hc/en-us/articles/115000616724-MacOS-The-shortcuts-work-unexpectedly-after-2017-1-update
                                            • 0
                                              Когда появится поддержка touchbar на macbook?
                                              И можно ли выбрать yarn вместо npm для последней фичи из поста?
                                              • 0
                                                Сейчас в приоритете починка main menu на High Sierra :)
                                                Да, нужно только указать yarn в настройках node интерпретатора (Settings | Languages & Frameworks | Node.js & NPM |… рядом с интерпретатором)
                                              • 0
                                                Поддержка propTypes в react сломалась. CSS модули не работают с sass. Переход к определению класса тоже сломали (cmd+click). Лучше на 16.2 останусь
                                                • 0
                                                  propTypes исправили, будет в 2017.2.1, EAP версия на этой неделе. Sass сделали, пока не могу сказать в какую версию попадёт. Не могли бы вы добавить подробностей про навигацию к определению класса?
                                                  • 0
                                                    у меня каждый реакт компонент это директория вида
                                                    image
                                                    где в index.js просто переэкспортируется сам компонент (такая структура досталась), дак вот в 2017.1 переход с места создания происходит нормально и открывается основной файл, а 2017.2 — просто в index.js
                                              • 0
                                                То есть навигация от <Price /> не попадает в Price.jsx? Можно попросить короткий гист с примером?

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

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