Что нового в WebStorm 2020.1

В WebStorm 2020.1 вас ждет обновленный внешний вид и поведение, поддержка Vuex и Vue Composition API, возможность запускать Prettier при сохранении файлов и несколько улучшений для JavaScript и TypeScript.

Интерфейс и поведение

JetBrains Mono

Новый шрифт по умолчанию в редакторе

В прошлом году мы разрабатывали шрифт, который позволил бы снизить нагрузку на глаза, когда вы пишете код. Представляем JetBrains Mono — новый шрифт с открытым исходным кодом, созданный специально для разработчиков. В WebStorm 2020.1 он установлен по умолчанию.

Режим погружения Zen

Режим погружения

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

Просмотр документации по наведению курсора

Просмотр документации по наведению курсора

Больше не нужно специально вызывать окно документации: достаточно навести указатель мыши на символ, информацию о котором вы хотите посмотреть. Если в коде есть проблема, в появившемся всплывающем окне IDE также предложит быстрое исправление.

Быстрое редактирование отдельного файла

Хотели бы быстро отредактировать один файл в IDE? В новом режиме LightEdit вы можете открыть отдельный файл в текстовом редакторе, не загружая весь проект.

Настройка строки состояния

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

Фреймворки

Автодополнение для Composition API

Работа с Composition API

WebStorm 2020.1 поддерживает компоненты, определенные через Composition API из Vue 3. В шаблоне компонента IDE правильно разрешит и автоматически подставит символы, возвращаемые функцией setup(), включая реактивные свойства, вычисляемые свойства и ссылки.

Автодополнение для Vuex

Помощь при написании кода для Vuex

Если вы работаете с библиотекой Vuex, теперь при редактировании компонентов Vue можете воспользоваться автодополнением для символов из хранилища Vuex. Кроме того, WebStorm позволяет переходить к определению геттеров, мутаций и действий.

Полная поддержка Angular 9

Мы добавили в WebStorm 2020.1 полную поддержку Ivy и других возможностей Angular 9. Можете использовать автодополнение кода и автоматический импорт в TypeScript и файлах шаблонов — ничего настраивать не нужно.

Улучшенная поддержка React

Чтобы добавить операторы импорта для компонентов, определенных через React.memo, поместите курсор на компонент и нажмите Alt+Enter. А если вы используете в проекте компоненты Material-UI, WebStorm теперь будет предлагать варианты автодополнения при создании стилей.

JavaScript и TypeScript

Новые действия и инспекции

Новые действия и инспекции (Alt+Enter) сэкономят ваше время. Например, можно быстро преобразовать код в optional chaining и/или nullish coalescing — синтаксис, появившийся в последних версиях JavaScript и TypeScript.

Просмотр документации TypeScript по наведению курсора

Полезные данные в документации

Документация для JavaScript и TypeScript теперь содержит информацию о типе и видимости символа, а также о том, где этот символ определен.

Обновленный рефакторинг Introduce Field

В обновленном рефакторинге Introduce Field доступен предварительный просмотр изменений в контексте кода, над которым вы работаете. Кроме того, теперь нужно меньше кликов, чтобы применить этот рефакторинг.

Поддержка TypeScript 3.8

WebStorm 2020.1 полностью поддерживает новые возможности TypeScript 3.8, такие как импорт/экспорт только по типу, приватные поля и await верхнего уровня.

Инструменты

Запуск Prettier при сохранении файлов

Запуск Prettier при сохранении файлов

Новая опция Run on save for files позволяет применять форматирование Prettier ко всем файлам, указанным в настройках IDE и отредактированным в проекте, как только вы их сохраните. Для этого больше не требуются сторонние плагины и File Watchers.

Параллельное отображение сеансов терминала

Параллельное отображение сеансов терминала

WebStorm теперь позволяет запускать несколько сеансов терминала одновременно, разделив окно терминала по вертикали и горизонтали. Следите за выводом сразу нескольких используемых инструментов, не переключаясь между вкладками.

Встроенная проверка правописания

Встроенная проверка правописания

Версия 2020.1 включает в себя Grazie — умный инструмент для проверки орфографии, грамматики и стиля письма. Он поможет избежать ошибок в комментариях, сообщениях коммитов и языковых конструкциях JavaScript.

Гибкий совместный доступ к конфигурациям запуска

Коллегам по команде нужно поработать над вашим проектом? Поделитесь с ними своей конфигурацией запуска. В WebStorm 2020.1 это стало еще удобнее: можно хранить конфигурации запуска в любой папке проекта.

Использование Yarn 2 в TypeScript-проектах

Мы расширили начальную поддержку Yarn 2, которую представили в WebStorm 2019.3. Теперь в проектах TypeScript все символы правильно разрешаются и для них работает автодополнение, если зависимости установлены с помощью Yarn 2 в режиме Plug'n’Play.

Система контроля версий

Обновленный диалог перебазирования коммитов

Обновленный диалог перебазирования

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

Окно коммита

Новый способ сделать коммит

Чтобы упростить процесс выполнения коммитов, мы добавили новое окно Commit для обработки любых задач, связанных с коммитами. Для новых пользователей оно включено по умолчанию. Остальным IDE предложит переключиться на новый вид в модальном диалоге коммита.