Что нового в WebStorm 2023.2

В WebStorm 2023.2 мы постарались улучшить способ представления ошибок типов в JavaScript и TypeScript. Благодаря новому форматированию информацию об ошибках и предупреждениях проще читать, а значит легче находить проблемы в коде. Новым способом отображаются все ошибки в TypeScript-коде и наиболее распространенные в JavaScript, а также локализованные ошибки.

Если применение intention-действия или быстрого исправления приводит к тому, что в файл не экспортируется неразрешенный элемент, WebStorm теперь может автоматически добавлять в файл уникальные импорты для этого элемента. В настройках каждого шаблона (Settings | Editor | Live Templates) есть опция, позволяющая автоматически добавлять уникальные импорты для элементов, которые в противном случае не были бы разрешены.

WebStorm 2023.2 now supports the CSS nesting module feature. Мы добавили поддержку синтаксиса и инспекцию для проверки того, что вложенный селектор не начинается с идентификатора или функциональной нотации.

Мы расширили поддержку преобразования цветов в CSS: теперь можно преобразовывать цвета в форматы lch и oklch. В WebStorm 2023.2 есть несколько действий, позволяющих быстро переключаться между rgb, hsl, lch, oklch и другими форматами цвета. Чтобы попробовать, нажмите Alt+Enter.

У нас отличные новости для пользователей Vue: в WebStorm появилась поддержка Vue Language Server (Volar), которая улучшает обнаружение ошибок и позволяет получать более точную информацию о типе во всплывающих окнах навигации и документации. По умолчанию для TypeScript 5.0 и более поздних версий используется VLS, а для более ранних — обертка над сервисом TypeScript. Вы можете включить интеграцию с VLS для всех версий TypeScript в разделе Settings | Languages & Frameworks | TypeScript | Vue.

В WebStorm 2023.2 вас ждет несколько улучшений для Vue. Во-первых, добавлена поддержка макроса defineModel, что упрощает работу с двусторонним связыванием. Макрос автоматически регистрирует prop и возвращает ref, который можно напрямую изменять. Еще мы добавили поддержку механизма provide/inject с автодополнением поля inject, а также возможность разрешать вставленные свойства и корректировать информацию о типе.

В Next.js 13.1 теперь есть плагин для TypeScript Language Service, специально разработанный для нового каталога app. Плагин дает подсказки по настройке страниц и макетов, а также полезные советы по использованию серверных и клиентских компонентов и включает в себя документацию, которую можно просматривать в WebStorm. Мы также избавились от ложных предупреждений о неиспользованных элементах в каталоге app.

Мы добавили новые шаблоны кода, или live templates, как они называются в WebStorm, для React-хуков. Их можно найти в разделе в разделе Settings | Editor | Live Templates > React hooks. Чтобы воспользоваться ими, введите в редакторе сокращение, связанное с шаблоном, и нажмите Tab, чтобы его развернуть.

В этой версии появилась интеграция со Svelte Language Server. Теперь все ошибки, о которых сообщает svelte-check, отображаются прямо в IDE, включая результаты проверки на null в разметке, проверки типов входных параметров и проверки типобезопасности, обеспечиваемые SvelteKit. Мы также поддержали случаи, когда псевдонимы путей определяются в конфигурационных файлах бандлеров, а не в tsconfig.json. WebStorm будет разрешать импорт с такими псевдонимами путей для Svelte, Vue и Astro.

В окне Run появилась кнопка Watch for Changes для Jest-тестов, которая позволяет включить режим наблюдения. Это избавляет от необходимости вручную настраивать опции --watch/--watchAll в конфигурации запуска.

Для SolidJS теперь доступен рефакторинг переименования геттера и сеттера функции createSignal. Мы также улучшили поддержку Emmet в Preact и SolidJS: теперь WebStorm использует информацию о типе из JSX.IntrinsicElements для корректного разворачивания Emmet. Наконец, WebStorm больше не показывает ложные ошибки в атрибутах классов, а навигация по информации о типах JSX работает корректно.

В прошлом году в WebStorm и других наших IDE мы представили новый, более минималистичный интерфейс. Мы доработали его с учетом ваших пожеланий и объявляем о завершении бета-тестирования. Вы можете переключиться на новый интерфейс, воспользовавшись кнопкой IDE and Project Settings в правом верхнем углу IDE. Далее рассказываем об основных изменениях интерфейса, вошедших в этот релиз.

В новом интерфейсе можно быстро добавлять действия на панель инструментов через специальное выпадающее меню. Кликните правой кнопкой мыши по любому виджету, выберите опцию Add to Main Toolbar, и вы увидите доступные варианты.

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

Мы усовершенствовали светлую тему, добавив альтернативный вариант Light with Light Header, отличающийся светлыми заголовками окон, всплывающими подсказками и уведомлениями.

В новом интерфейсе изменился дизайн меню на главной панели инструментов для Windows и Linux. Теперь элементы меню отображаются по горизонтали на панели инструментов. Также можно превратить это меню в отдельную панель инструментов с помощью опции View | Appearance | Main menu as a Separate Toolbar.

В полноэкранном режиме на macOS элементы управления окном теперь располагаются прямо на главной панели инструментов, а не на плавающей панели, как было раньше.

Чтобы вам было проще управлять несколькими конфигурациями запуска, самые часто используемые теперь можно закреплять в виджете Run. Чтобы закрепить конфигурацию, нажмите на три точки рядом с ее названием и в открывшемся меню выберите Pin. Если у вас несколько закрепленных конфигураций, можно легко менять их порядок, перетаскивая их по списку.

В WebStorm 2023.2 появилась начальная интеграция с GitLab. Это позволит оптимизировать ваш рабочий процесс за счет использования функции Merge Request прямо в IDE.

В WebStorm 2023.2 появилась долгожданная возможность выбирать для коммита только определенные фрагменты кода. Чтобы сделать частичный коммит, выберите строки внутри блока кода и вызовите действие Include Selected Lines into Commit из контекстного меню. Блок будет разделен на отдельные строки, а выбранные строки будут подсвечены.

В WebStorm теперь можно посмотреть превью содержимого слоев Docker-образов в окне Services. Кроме того, появилась возможность указать конфигурацию запуска в качестве задачи перед запуском (Before launch task). WebStorm не будет инициировать следующую конфигурацию запуска, пока текущий контейнер не достигнет состояния готовности. Подробнее

В WebStorm теперь можно посмотреть превью PDF- и HTML-файлов прямо в результатах запроса HTTP-клиента. Также появилась возможность совместного использования общего JavaScript-кода для обработчиков запросов HTTP-клиента через импортируемые модули. Подробнее

В EAP-сборках WebStorm 2023.2 мы представили предварительную версию плагина AI Assistant с интегрированным ИИ-чатом и генерацией сообщений коммитов. Плагин появился в ограниченном доступе на Marketplace. Мы планируем регулярно выпускать к нему обновления и расширять его функциональность. Подробности читайте в нашем блоге.

В WebStorm появилась интеграция с Qodana — платформой для контроля качества кода. Вы можете запускать статический анализ кода прямо в WebStorm, просматривать список проблем по всему проекту и настроить Qodana в вашей CI/CD-системе для установки критериев качества. После настройки вы сможете видеть результаты серверного анализа в своей IDE. Подробности читайте в нашем блоге.

Функция Search Everywhere (двойное нажатие Shift) теперь включает в себя возможности текстового поиска, аналогичные Find in Files. Результаты текстового поиска отображаются в тех случаях, когда по заданному запросу мало или вообще нет других результатов. По умолчанию текстовый поиск включен, но вы можете изменить настройки в разделе Settings | Advanced Settings > Search Everywhere.

В WebStorm 2023.2 появилось долгожданное упорядочивание файлов по времени изменения. Файлы автоматически пересортировываются при сохранении изменений в проекте. Чтобы включить эту функцию, нажмите на три точки на панели Project и выберите Tree Appearance | Sort by Modification Time.

Чтобы вам было проще настраивать WebStorm под ваши проекты и расширять функциональность IDE при помощи плагинов, мы переработали интерфейс раздела Settings | Plugins. Теперь вы найдете там список рекомендуемых плагинов, составленный с учетом особенностей вашего проекта.

Теперь можно разворачивать и сворачивать папки проекта на панели Project одним кликом с помощью опции Open Directories with Single Click. Вы найдете ее в выпадающем меню, если нажмете на три точки.

Мы реализовали LSP API для тех, кто хочет пользоваться умными возможностями редактирования при работе с технологиями, которые еще нативно не поддерживаются в IDE JetBrains. Подробнее