- PVSM.RU - https://www.pvsm.ru -
На прошлой неделе вышло большое обновление WebStorm. Мы хотим рассказать о том, какие улучшения ждут JavaScript-разработчиков в WebStorm 2017.3 и в других IDE от JetBrains с поддержкой JavaScript.
Вы можете скачать WebStorm 2017.3 на нашем сайте [1].
В новой версии WebStorm мы улучшили поддержку Vue.js. В template-части .vue-файла теперь есть автодополнение и навигация к определению для props, свойств в data-объектах, computed свойств и имен методов, объявленных в script части.
Закрывающая фигурная скобка в template теперь автоматически добавляется при печати открывающей скобки.
Также мы добавили новый шаблон файла для создания Vue-компонента и специальную коллекцию шаблонов кода (Live Templates) для Vue, сделанную на базе популярной коллекции шаблонов [2].
Если вы хотите переместить метод текущего класса в его родительский класс или интерфейс, теперь вы можете использовать новый рефакторинг Pull member up вместо copy-paste. Он работает для JavaScript- и TypeScript-классов.
Если родительского класса еще нет и вы хотите его создать и перенести часть методов и полей в него, используйте рефакторинг Extract superclass.
Для TypeScript мы добавили новый рефакторинг Extract type alias, который, как можно догадаться, создает type alias для типа и заменяет все его использования на новое имя. Аналогично, можно объявить новый интерфейс с помощью Extract interface.
Также можно превратить type alias в interface, если это возможно, с помощью действия Convert alias to interface, доступного по нажатию Alt-Enter.
Мы также улучшили рефакторинги Change signature и Extract parameter – они теперь используют default parameter синтаксис для опциональных параметров и в целом лучше работают с ECMAScript 2015+ кодом.
Если вы скопируете код из одного JavaScript- или TypeScript-файла в проекте и вставите его в другой файл, то все необходимые импорты теперь добавятся автоматически.
Изменения коснулись и самой основы поддержки JavaScript. Раньше для автодополнения, информации о параметрах и документации для стандартных объектов и методов JavaScript мы использовали “под капотом” составленные нами файлы с определениями. Теперь же мы используем TypeScript declaration-файлы.
Благодаря этому появились документация, а также автодополнение для некоторых недостающих методов. По нажатию F1 на методе покажется документация из .d.ts-файла или его короткое описание из MDN.
Также мы добавили внутрь WebStorm предварительно построенные индексы для этих определений, что ускорило запуск новых проектов.
Начиная с версии 2017.1 WebStorm позволяет применить правила форматирования кода из файлов настроек ESLint и TSLint. Теперь это происходит автоматически при открытии нового проекта, в котором есть tslint.json и простой .eslintrc-файл.
Если ESLint-конфигурация описана на YAML или JavaScript или использует extends, то импорт настроек форматирования можно выполнить с помощью действия Apply ESLint code style rules в контекстном меню файла. Тогда WebStorm запустит ESLint, передаст ему конфигурацию для конвертации в JSON и уже из полученного ответа применит известные правила, имеющие аналог в настройках форматирования WebStorm.
Теперь, если вы запустите Jest-тесты в WebStorm и добавите в конфигурации в поле Jest options --watch, WebStorm будет напрямую использовать watch mode самого Jest для быстрого перезапуска тестов. (Кстати, для Mocha мы тоже поддержали интеграцию с watch mode).
Если какой-то из тестов не прошел из-за несоответствия снэпшота, вы можете перегенерить снэпшот для этого теста, кликнув по ссылке в окне выполнения тестов.
Еще одно нововведение – запуск Jest-тестов с проверкой покрытия кода тестами (Run with Coverage). В отчете, который появится в отдельном окне в IDE, будут показаны проценты покрытия кода тестами для директорий и файлов в проекте. Если вы перейдете из отчета в конкретный файл, то увидите в нем слева красные и зеленые отметки, показывающие, покрыта ли тестами конкретная строка кода.
В WebStorm 2017.3 появился новый инструмент для тестирования REST API (в дополнение к уже давно существующему клиенту, доступному через меню Tools — Test RESTful Web Services).
Теперь можно писать (с автодополнением!) и выполнять запросы прямо в редакторе в файле с расширением .http. Ответ можно увидеть в окне запуска запроса, а логи можно просматривать и сравнивать прямо в редакторе. Подробнее о новом REST-клиенте в этом посте [3].
Теперь, чтобы отлаживать 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, пожалуйста, сообщите об этом на нашем issue tracker [4].
Автор: prigara
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/270051
Ссылки в тексте:
[1] нашем сайте: https://www.jetbrains.com/webstorm/whatsnew
[2] коллекции шаблонов: https://github.com/sdras/vue-vscode-snippets
[3] этом посте: https://blog.jetbrains.com/phpstorm/2017/09/editor-based-rest-client/
[4] issue tracker: https://youtrack.jetbrains.com/issues/WEB
[5] Источник: https://habrahabr.ru/post/344050/
Нажмите здесь для печати.