+38/044/257-2444
+38/067/502-3306
+38/050/370-3627
Новости

Большое обновление WebStorm. Что нового в WebStorm 2017.3

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

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

JavaScript и TypeScript

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

Pull member up и Extract superclass

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

Extract type alias и Extract interface

Для TypeScript JetBrains добавили новый рефакторинг Extract type alias, который, как можно догадаться, создает type alias для типа и заменяет все его использования на новое имя. Аналогично, можно объявить новый интерфейс с помощью Extract interface.
Также можно превратить type alias в interface, если это возможно, с помощью действия Convert alias to interface, доступного по нажатию Alt-Enter.
JetBrains также улучшили рефакторинги Change signature и Extract parameter – они теперь используют default parameter синтаксис для опциональных параметров и в целом лучше работают с ECMAScript 2015+ кодом.

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

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

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

Изменения коснулись и самой основы поддержки JavaScript. Раньше для автодополнения, информации о параметрах и документации для стандартных объектов и методов JavaScript JetBrains использовали “под капотом” составленные нами файлы с определениями. Теперь же JetBrains используем TypeScript declaration-файлы.
Благодаря этому появились документация, а также автодополнение для некоторых недостающих методов. По нажатию F1 на методе покажется документация из .d.ts-файла или его короткое описание из MDN.
Также JetBrains добавили внутрь 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 JetBrains тоже поддержали интеграцию с watch mode).
Если какой-то из тестов не прошел из-за несоответствия снэпшота, вы можете перегенерить снэпшот для этого теста, кликнув по ссылке в окне выполнения тестов.
Еще одно нововведение – запуск Jest-тестов с проверкой покрытия кода тестами (Run with Coverage). В отчете, который появится в отдельном окне в IDE, будут показаны проценты покрытия кода тестами для директорий и файлов в проекте. Если вы перейдете из отчета в конкретный файл, то увидите в нем слева красные и зеленые отметки, показывающие, покрыта ли тестами конкретная строка кода.

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

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

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

Теперь, чтобы отлаживать 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

  • JetBrains улучшили автодополнение для 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 в настройках.

Другие новости

Лучшая цена