Что нового в WebStorm 2020.3

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

Теперь вы можете синхронизировать тему интерфейса WebStorm с настройками macOS и Windows. Для этого перейдите в Preferences / Settings | Appearance & Behavior | Appearance | Theme и выберите опцию Sync with OS. Нажмите иконку шестеренки рядом с Sync with OS, чтобы выбрать предпочтительную тему. Мы также планируем добавить аналогичную функциональность для пользователей Linux.

Работать со вкладками редактора стало еще удобнее. Теперь вы сможете делить область редактора на части, перетаскивая вкладки или пользуясь новым действием Open in Right Split. Закрепленные вкладки теперь помечаются специальной иконкой и отображаются в самом начале панели вкладок, поэтому вам не придется их долго искать.

WebStorm 2020.3 теперь поможет вам эффективнее работать с Tailwind CSS. IDE предложит автодополнение для классов Tailwind, покажет ожидаемый CSS при наведении указателя мыши на код, а также поможет в работе с пользовательскими настройками файлов tailwind.config.js.

Реализовали не все React-компоненты? Просто поставьте курсор на нужный компонент, нажмите Alt+Enter и выберите опцию Create class / function component — WebStorm создаст необходимую конструкцию кода за вас.

Мы добавили поддержку Mermaid.js, возможность форматировать код файлов .md, автоматическую прокрутку панели предпросмотра — эти и другие изменения позволят вам существенно оптимизировать работу с Markdown-файлами.

Мы интегрировали TypeScript language service с окном Problems и убрали окно TypeScript. Это значит, что вы можете просматривать все ошибки в одном месте. Действия, которые ранее были доступны в окне TypeScript, теперь можно найти в отдельном виджете для строки состояния.

Новая версия WebStorm поддерживает форматирование для многострочных блоков CSS и HTML с фрагментами JavaScript. IDE сама расставит отступы при добавлении сложных шаблонных литералов и переформатировании кода.

Используйте интерактивные подсказки и отслеживайте значения переменных. Кликнув на подсказку, вы увидите все данные переменной. Здесь же вы можете задать ей другое значение и добавить новый watch.

WebStorm 2020.3 поддерживает Code With Me (EAP) — наш новый инструмент для совместной удаленной разработки и парного программирования. С помощью него вы и ваша команда можете совместно работать над проектами в реальном времени. Чтобы попробовать Code With Me, установите соответствующий плагин в Preferences / Settings | Plugins.

Чтобы помочь вам привыкнуть к базовой функциональности WebStorm, мы разработали интерактивный обучающий курс. С помощью него вы научитесь выполнять основные повседневные операции, такие как рефакторинг, навигация по проекту и пр. Перейти к курсу можно открыв вкладку Learn WebStorm на начальном экране либо через Help | IDE Features Trainer в главном меню.

Экспортировать HTTP-запрос в cURL теперь можно из редактора HTTP-запросов: нажмите Alt+Enter и выберите опцию Convert to cURL and copy to clipboard.

Исправлять ошибки теперь можно еще быстрее: наведите курсор на ошибку — во всплывающем окне вы увидите объяснение и вариант исправления. Также мы поддержали больше языков и улучшили качество проверки грамматики.

Теперь вы можете добавлять файлы на стейджинг прямо из WebStorm. Для этого зайдите в Preferences / Settings | Version Control | Git и выберите опцию Enable staging area. Добавлять файлы можно из окна Commit, а также прямо из редактора, нажав на маркер изменений слева от строки или с помощью действия Show Diff.

Панель Navigation — это альтернатива окну Project, позволяющая быстро просматривать структуру проекта и открывать нужные файлы. Теперь из нее также можно переходить к различным элементам кода в файлах JavaScript и TypeScript.

Появилась возможность предварительного просмотра файлов, выбранных в окне Project. Чтобы включить эту функцию, нажмите на значок шестеренки на панели Project и активируйте опции Enable Preview Tab и Open Files with Single Click.

Мы расширили возможности окна Shift+Shift. Во-первых, вы можете использовать его для арифметических операций — ответы появятся в этом же окне. Во-вторых, Search Everywhere позволяет искать данные в Git, в том числе информацию о ветках и коммитах. Кроме того, результаты теперь группируются не по типу, а по релевантности поисковому запросу.