company_banner

Что нового в WebStorm 2017.3

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

    Вы можете скачать WebStorm 2017.3 на нашем сайте.



    Улучшения в поддержке Vue.js


    В новой версии WebStorm мы улучшили поддержку Vue.js. В template-части .vue-файла теперь есть автодополнение и навигация к определению для props, свойств в data-объектах, computed свойств и имен методов, объявленных в script части.

    Улучшения в поддержке Vue.js

    Закрывающая фигурная скобка в template теперь автоматически добавляется при печати открывающей скобки.

    Также мы добавили новый шаблон файла для создания Vue-компонента и специальную коллекцию шаблонов кода (Live Templates) для Vue, сделанную на базе популярной коллекции шаблонов.

    Улучшения в поддержке Vue.js

    JavaScript и TypeScript


    Новые рефакторинги


    Pull member up и Extract superclass


    Если вы хотите переместить метод текущего класса в его родительский класс или интерфейс, теперь вы можете использовать новый рефакторинг Pull member up вместо copy-paste. Он работает для JavaScript- и TypeScript-классов.

    Если родительского класса еще нет и вы хотите его создать и перенести часть методов и полей в него, используйте рефакторинг Extract superclass.

    Pull member up рефакторинг

    Extract type alias и Extract interface


    Для TypeScript мы добавили новый рефакторинг Extract type alias, который, как можно догадаться, создает type alias для типа и заменяет все его использования на новое имя. Аналогично, можно объявить новый интерфейс с помощью Extract interface.

    Также можно превратить type alias в interface, если это возможно, с помощью действия Convert alias to interface, доступного по нажатию Alt-Enter.

    Extract type alias

    Мы также улучшили рефакторинги Change signature и Extract parameter – они теперь используют default parameter синтаксис для опциональных параметров и в целом лучше работают с ECMAScript 2015+ кодом.

    Импорты при копировании и вставке из файла


    Если вы скопируете код из одного JavaScript- или TypeScript-файла в проекте и вставите его в другой файл, то все необходимые импорты теперь добавятся автоматически.

    Авто-импорт при вставке

    Документация и автодополнение для JavaScript APIs


    Изменения коснулись и самой основы поддержки JavaScript. Раньше для автодополнения, информации о параметрах и документации для стандартных объектов и методов JavaScript мы использовали “под капотом” составленные нами файлы с определениями. Теперь же мы используем TypeScript declaration-файлы.

    Благодаря этому появились документация, а также автодополнение для некоторых недостающих методов. По нажатию F1 на методе покажется документация из .d.ts-файла или его короткое описание из MDN.

    Авто-импорт при вставке

    Также мы добавили внутрь WebStorm предварительно построенные индексы для этих определений, что ускорило запуск новых проектов.

    Интеграция с ESLint и TSLint


    Начиная с версии 2017.1 WebStorm позволяет применить правила форматирования кода из файлов настроек ESLint и TSLint. Теперь это происходит автоматически при открытии нового проекта, в котором есть tslint.json и простой .eslintrc-файл.

    Если ESLint-конфигурация описана на YAML или JavaScript или использует extends, то импорт настроек форматирования можно выполнить с помощью действия Apply ESLint code style rules в контекстном меню файла. Тогда WebStorm запустит ESLint, передаст ему конфигурацию для конвертации в JSON и уже из полученного ответа применит известные правила, имеющие аналог в настройках форматирования WebStorm.

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


    Новое в интеграции с Jest


    Теперь, если вы запустите Jest-тесты в WebStorm и добавите в конфигурации в поле Jest options --watch, WebStorm будет напрямую использовать watch mode самого Jest для быстрого перезапуска тестов. (Кстати, для Mocha мы тоже поддержали интеграцию с watch mode).

    Jest watch mode

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

    Jest update snapshot

    Еще одно нововведение – запуск Jest-тестов с проверкой покрытия кода тестами (Run with Coverage). В отчете, который появится в отдельном окне в IDE, будут показаны проценты покрытия кода тестами для директорий и файлов в проекте. Если вы перейдете из отчета в конкретный файл, то увидите в нем слева красные и зеленые отметки, показывающие, покрыта ли тестами конкретная строка кода.

    Jest coverage report

    Новый REST-клиент в редакторе


    В WebStorm 2017.3 появился новый инструмент для тестирования REST API (в дополнение к уже давно существующему клиенту, доступному через меню Tools — Test RESTful Web Services).

    Новый Rest-клиент

    Теперь можно писать (с автодополнением!) и выполнять запросы прямо в редакторе в файле с расширением .http. Ответ можно увидеть в окне запуска запроса, а логи можно просматривать и сравнивать прямо в редакторе. Подробнее о новом REST-клиенте в этом посте.

    Отладка в браузере без дополнительной конфигурации


    Теперь, чтобы отлаживать client-side-приложение во встроенном отладчике в WebStorm, достаточно просто создать и запустить JavaScript Debug конфигурацию – больше не нужно дополнительно устанавливать расширения для Chrome. WebStorm запустит Chrome в режиме удаленной отладки, который разрешает подключение стороннему отладчику, то есть WebStorm.

    Если вы используете функцию WebStorm Live Edit, то расширение для Chrome вам все-таки еще нужно. Live Edit работает во время отладки и обновляет HTML и CSS в браузере при изменении кода в редакторе. Включить Live Edit можно в Preferences | Build, Execution, Deployment | Debugger | Live Edit — “Update application in Chrome”.

    Коротко о других улучшениях в WebStorm 2017.3


    • Мы улучшили автодополнение для CSS – оно стало точнее для многих свойств и их значений, кроме того, появилось дополнение для значений свойств transform, transition и pointer-events.
    • Теперь при переключении между ветками системы контроля версий IDE запоминает, какие файлы открыты, где стоят брейкпонты, и какая конфигурация сейчас выбрана. Когда вы снова вернетесь к этой ветке, это состояние восстановится.
    • В проектных настройках Node.js теперь можно выбрать ссылку на системный node вместо пути к конкретной версии. Это особенно удобно, если вы используете nvm. Теперь при изменении системной версии node, после перезапуска IDE все эти конфигурации и инструменты, использующие node, продолжат использовать новую системную версию.
    • TypeScript definition-файлы позволяют улучшить дополнение кода для разных библиотек в JavaScript-файлах. Теперь достаточно нажать Alt-Enter на импорте библиотеки и выбрать Install TypeScript definitions for better type information, чтобы WebStorm скачал соответствующий declaration-файл и автоматически сконфигурировал его как JavaScript Library в настройках.

    Если у вас возникли проблемы с WebStorm, пожалуйста, сообщите об этом на нашем issue tracker.
    JetBrains 389,28
    Компания
    Поделиться публикацией
    Комментарии 21
    • 0
      Чтобы продлить подписку через PayPal, а не через навязываемый платёж через банковскую карту и Яндекс, пришлось виртуально переехать в Афганистан. Весело у вас все устроено с оплатой.
      • +5
        К сожалению, сейчас платежи от физических лиц в России принимаются только через Яндекс.Кассу. Мы вынуждены были переключиться на нового платежного провайдера в начале этого года. В противном случае пришлось бы начислять НДС российским пользователям («налог на Гугл»), что привело бы к значительному увеличению стоимости подписки.
      • 0
        После обновления пропали автодополнения на css-классы по проекту и подключенным из node_modules плагинам, в частности к классам бутстрапа.
        • 0
          Бывает… попробуйте инвалидировать кеш и перезапустить IDE. Если не помогло, переподключите NodeJS в настройках. Иногда, после обновления Web и PHP Storm забывают про папку node_modules. Если и это не помогло, пишите issue. У меня эти проблемы решались именно так
          • 0
            У некоторых автодополнение CSS стало занимать очень много времени, попробуйте 2017.3.1 EAP. Если проблема в этом, то должно исправиться
          • +1
            Хороший релиз, в частности порадовало улучшение поддержки Vue.js. Спасибо!
            • 0
              Автодополнение стало немного странно работать — в списке (см. скриншот) почему-то «relative» аж на 4-ом месте, хотя в 2017.2 и ранее все было нормально.
              Заголовок спойлера
              image

              И «сломался» плагин для CMS Битрикс (будь они оба не ладны), но тут уж не ваша вина скорее всего.
              • 0
                SCSS посмотрим.
                А который из них сломался и как именно?
                • 0
                  Заголовок спойлера
                  image
                  • 0
                    Этот assert был добавлен в последней версии и предназначен для отлавливания странных проблем связанных с инспекциями имеющими одинаковое имя. Судя по всему это действительно их проблема, они используют имя, совпадающее со стандартной Php инспекцией
              • 0
                А вы не заглядывались на Ember.js, как никак он в пятёрке самых популярных? Очень бы хотелось «из коробки» получить автодополнение и ряд других фишек.
                • +1
                  В данный момент не рассматриваем такую возможность. Для него кажется весьма неплохой плагин и мы немного помогаем автору в его разработке
                  • +1
                    Спасибо, тогда, видимо имеет смысл напрямую к авторам плагина за хотелками обратиться)

                    п.с. Странно, чем так не понравился мой коммент карма-маньякам)
                • +2
                  Это конечно очень всё круто и красиво выглядит. Но я вчера, обновясь, понял, что невозможно работать. Он слишком долго анализирует код и синтаксис. Чисто для эксперемента решил оставить его анализироваться вдоволь и анализировал он файл в 100 строк минут 40…
                  Я использую Flow и ESlint, и в 2017.2 оно работает достаточно шустро (в том же проекте), но вот третья версия жутко тормозит, пришлось устанавливать предыдущую.
                  После отключения Flow из проекта (в настройках) анализировать быстрее не начал…
                  • 0
                    Нам бы очень помогло, если бы вы смогли снять CPU snapshot
                  • 0
                    Я так к сожалению не разобрался как запустить code coverage с jest. Пробовал и с --coverage, и настройки в package.json засунул и ничего не помогло. Показывает что ничего не покрыто (в колонке с % пусто)
                    • 0
                      Никаких дополнительных пакетов и настроек (в том числе флага --coverage в run configuration) не нужно. Должно быть достаточно или запустить тесты из редактора (Run with coverage), или создать простую Jest конфигурацию и запустить ее, нажав иконку Run with coverage вместо обычного Run. Если не сработало, напишите, пожалуйста, какую версию Jest вы используете.
                      • 0
                        JEST: 21.2.1

                        Настройки в package.json:
                        «jest»: {
                        «setupFiles»: [
                        «jest-localstorage-mock»
                        ],
                        «modulePaths»: [
                        "/src/"
                        ],
                        «moduleFileExtensions»: [
                        «js»
                        ],
                        «moduleDirectories»: [
                        «node_modules»
                        ],
                        «moduleNameMapper»: {
                        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": «identity-obj-proxy»,
                        "\\.(css|styl)$": «identity-obj-proxy»,
                        "\\.(html)$": «identity-obj-proxy»
                        }

                        }

                        WebStorm:
                        WebStorm 2017.3
                        Build #WS-173.3727.108, built on November 25, 2017
                        JRE: 1.8.0_152-release-1024-b6 amd64
                        JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
                        Windows 10 10.0
                        • 0
                          К сожалению, не смогла воспроизвести. Попробуйсте добавить --no-cache в Jest options в Run configuration и перезапустить тесты. Вы можете написать нашей тех поддержке и рассказать поднобней о конфигурации проекта и тестовых файлах. Кстати, правильно ли показывается coverage, если вы запускаете его в терминале?
                    • +2
                      До сих пор осталось в css widows перед width(при вводе 'wid'). Очень часто автоматом автодополняю до widows. Почему он выше чем width? :(
                      • –2
                        Сортировка сначала алфавитная, после того, как вы несколько раз выберете width, оно продвинется выше по списку. Делать специальный хак для поднятия width в самый верх списка не планируем, извините.

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

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