Что нового в WebStorm 2020.2

Фреймворки и технологии

Использование Prettier в качестве форматера по умолчанию

Форматирование кода с помощью Prettier стало еще удобнее. Просто отметьте галочкой новую опцию On code reformat в настройках, и WebStorm будет использовать Prettier вместо встроенного форматера. По умолчанию это работает только для файлов .js, .ts, .jsx и .tsx, но вы можете легко добавить другие типы файлов.

Поддержка Nuxt.js

WebStorm 2020.2 позволяет работать с Nuxt.js более продуктивно. В новой версии появилась помощь при написании кода в разделе шаблонов, поддержка файлов nuxt.config.js, правильное определение ссылок на Vuex store, быстрый просмотр документации для всех основных компонентов Nuxt и многое другое.

Быстрая настройка стиля кода Vue

Мы добавили отдельную группу настроек стиля кода Vue: можно выбрать, какой отступ должен быть у верхнеуровневых тегов, и указать, должен ли отступ быть одинаковым для всего файла Vue или зависеть от языковых настроек. Вы также можете изменить способ форматирования интерполяций.

Поддержка Git в WSL 2

Мы продолжаем расширять поддержку рабочих процессов, связанных с WSL, во всех наших IDE. Теперь при открытии проекта из WSL WebStorm автоматически переключится на Git в WSL и вы сможете использовать всю связанную функциональность.

Улучшенная обработка Vue-файлов в TypeScript-проектах

Мы улучшили работу языковой службы TypeScript с файлами .vue. Теперь они обрабатываются точно так же, как файлы .ts и .tsx. Импорты из Vue-файлов в другие файлы Vue или TypeScript больше не вызывают проблем.

JavaScript и TypeScript

Новые инспекции для экономии времени

Новые intention-действия (Alt+Enter) помогут вам быстрее выполнять некоторые операции, связанные с циклами, а также optional chaining и nullish coalescing. Например, можно быстро преобразовать цикл for с числовым индексом в перебирающий метод forEach.

Рендеринг комментариев JSDoc в редакторе

Из-за большого количества тегов читать комментарии JSDoc бывает непросто. Мы сделали рендеринг прямо в редакторе — теперь все более аккуратно.

Отладка из окон Run и Terminal

Теперь WebStorm позволяет запускать сеансы отладки из окон Run и Terminal. Так, если вы запустите скрипт, например npm start, и нажмете на http-ссылку в выводе скрипта, удерживая Ctrl+Shift, IDE начнет сеанс отладки JavaScript.

Подробная информация об объектах при отладке

Во время отладки вы заметите несколько улучшений предварительного просмотра элементов во встроенной консоли. Теперь WebStorm показывает больше полезной информации об объекте без необходимости его разворачивать.

HTML и языки стилей

Улучшенная поддержка правил @use и @forward

В прошлом году мы представили базовую поддержку правил @use и @forward, используемых в Sass и SCSS. Теперь мы ее расширили: автодополнение кода стало умнее, а импортированные символы определяются точнее.

Предварительный просмотр WebP-изображений в IDE

Теперь, наряду с файлами .jpeg и .png, можно просматривать изображения формата .webp прямо в WebStorm. Раньше этот формат не распознавался и для просмотра таких изображений приходилось переключаться в другие приложения.

Управление версиями

Расширенная поддержка пул-реквестов GitHub

В WebStorm 2020.2 мы расширили поддержку пул-реквестов GitHub и сделали работу с ними более удобной. Теперь можно просматривать и объединять все пул-реквесты, а также проверять код прямо из IDE.

Обновленные диалоги для работы с Git

Мы обновили дизайн диалогов Merge, Pull и Rebase — взаимодействовать с ними стало удобнее. Кроме того, добавлены новые параметры, например –rebase в диалоге Pull и –no-verify в диалоге Merge.

Объединение локальных коммитов на вкладке Log

Теперь вы можете выбрать несколько локальных коммитов на вкладке Log в окне Git и объединить их в один. Это делается в контекстном меню, которое вызывается правым кликом.

Редактирование кода

Быстрое обнаружение проблем в коде

С помощью нового виджета Inspections и окна Problems можно подробно узнать о количестве предупреждений, ошибок и других проблем в текущем файле, а также быстро перемещаться между ними.

Добавление нескольких курсоров в конец выбранных строк

Мы добавили новое действие (Alt+Shift+G) для работы с несколькими курсорами. С его помощью вы можете быстро добавить курсоры в конец каждой строки в выбранном фрагменте кода.