WebStorm 2023.2

JavaScript, TypeScript, and CSS

• Improved error formatting for JavaScript and TypeScript - Your errors and warnings will now be formatted in a more readable way, making it easier to spot problems in your code. This works for all TypeScript errors and some of the most common JavaScript errors. It also works with localized errors.
• Auto-import for quick-fixes and live templates - When you apply intentions or quick-fixes that result in an unresolved element not exported in the file, WebStorm is now able to automatically add unambiguous imports to the file for that element.
• CSS nesting support - Added support for the CSS nesting module feature. Syntax support and an inspection for checking that the nested selector does not start with an identifier or functional notation has been implemented.
• Ability to convert color to lch and oklch - Expanded support for CSS color modification to include conversion of lch and oklch. This release includes a number of color conversion actions to let you quickly change between rgb, hsl, lch, oklch, and other color functions.

Frameworks and Technologies

• Vue Language Server support - Vue Language Server (Volar) is now supported in WebStorm to provide more accurate error detection and better type information in the quick navigation and documentation popups. By default, VLS will be used for TypeScript v5.0 and higher, and the wrapper over the TypeScript service will be used for earlier TypeScript versions.
• Vue enhancements - Firstly, support has been added for the defineModel macro, simplifying work with two-way binding. The macro automatically registers a prop, and returns a ref that can be directly mutated. Support for the provide/inject mechanism with completion for the inject field, as well as the ability to resolve injected properties and correct type information has also been added.
• Better support for App Router in Next.js - Next.js 13.1 now includes a TypeScript Language Service plugin for the new app directory. The new plugin offers suggestions for configuring pages and layouts, provides hints for Server and Client Components, and comes with custom documentation. This documentation can now be viewed in WebStorm.
• New live templates for React hooks - Added a new set of code snippets - or live templates - for React hooks.
• Svelte improvements - Integrated the Svelte Language Server. This will bring all errors reported by svelte-check right to your IDE, including null checks inside markup, prop type checking, and the zero-effort type safety from SvelteKit. Support has also been added for the cases where path aliases are defined in the configuration files of the bundlers and not in tsconfig.json. WebStorm will resolve imports with such path aliases for Svelte, Vue, and Astro.
• Watch mode for Jest tests in the Run tool window - This release includes a Watch for Changes button for Jest tests in the Run tool window, which will let you enable watch mode. This will bypass the need for you to manually set up --watch/--watchAll Jest options in the run configuration.
• Improved support for SolidJS and Preact - For SolidJS, rename refactoring has been introduced for the getter and setter of the createSignal function. Emmet support has also been improved with Preact and SolidJS - WebStorm now uses type information from JSX.IntrinsicElements to provide proper unfolding of Emmet. Lastly, WebStorm will no longer show false errors for class attributes and will provide proper navigation for JSX type information.
• Angular improvements - Improved support for strictTemplates. The way WebStorm handles generics and directive inputs has been reworked. WebStorm interprets ngTemplateContextGuard methods and propagates type evaluation to the template variables. Libraries that heavily use mapped types, like NgRx, now work properly, too.
• Updates for Astro - Improved Astro support. Now, PostCSS works in the <style> tag of Astro components by default. Moreover, you can now use CSS preprocessors like Sass, Less, and Stylus in the <style> tag.

New UI

• New UI out of Beta - Last year a new, more minimalistic UI for WebStorm and other JetBrains IDEs was introduced. This is now ready to be brought out of Beta. You can enable the new UI using the IDE and Project Settings cog in the top right corner of the IDE.
• Improved main toolbar customization - Expanded the customization options for the new UI with a drop-down menu to quickly add actions to the toolbar.
• Colored project headers - This release introduces colored project headers to simplify navigation between several open projects. You can now assign a unique color and icon to each of your projects, making it easier to distinguish them in your workspace.
• Light theme with light header - Refined the user experience with the Light theme by introducing the alternate Light with Light Header option, which features matching light colors for window headers, tooltips, and notification balloons.
• Reworked hamburger menu - Redesigned the behavior of the hamburger menu in the main toolbar for Microsoft Windows and Linux. When you click on the menu icon, the elements now appear horizontally over the toolbar. There's also an option to turn this menu into a separate toolbar via View | Appearance | Main menu as a Separate Toolbar.
• Updated window controls on Apple macOS - When working on macOS in full screen mode using the new UI, the window controls are now displayed on the main toolbar rather than on the floating bar as before.
• Pin run configurations in the Run widget - To make managing multiple run configurations easier, the option to pin preferred configurations in the Run widget has been implemented.

Integrated Developer Tools

• GitLab integration - Introduced initial integration with GitLab in this release. This integration will allow you to streamline your development workflow by working with the Merge Request functionality right from the IDE.
• Option to commit specific lines of code - This release introduces a new feature that allows users to selectively commit specific parts of code chunks.
• Docker improvements - In this release, you can now access and preview the contents of Docker image layers in the Services view. The ability to designate a run configuration as a Before launch task has also been introduced. WebStorm will wait for the currently running container to reach a healthy state before initiating the next run configuration.
• New features for the HTTP Client - WebStorm can now display previews of PDF and HTML files right in the HTTP Client's request results. It's now also possible to share common JavaScript code for HTTP Client request handlers via imported modules.
• AI Assistant preview [Limited access] - Released a preview of the AI Assistant plugin in the EAP builds of WebStorm 2023.2 with an integrated AI chat and commit message generation. The AI Assistant plugin is available with limited access on the Marketplace.
• Qodana integration - In this release, WebStorm integrates the Qodana code quality platform. You can trigger a static code analysis right in WebStorm, view the list of problems across your entire project, and configure Qodana in your CI/CD system to establish quality gates. Once configured, you'll see the results of the server-side analysis in your IDE.

User Experience

• Text search in Search Everywhere - Search Everywhere (Double Shift) now includes text search capabilities similar to Find in Files. With this enhancement, text search results are displayed when there are few or no other search results available for a given query. The feature is enabled by default and can be managed in Settings | Advanced Settings > Search Everywhere.
• Project view file sorting by modification time - This release adds the option to arrange your files in the Project view based on their modification time. This new functionality automatically reorders the files whenever the changes in your project are saved.
• Suggested plugins in settings - To make it easier to configure WebStorm for your specific projects and extend its functionality with plugins, the UI for the Settings | Plugins section has been updated. It now includes a set of suggested plugins based on your project specifics.
• Single-click navigation between project directories - Added a new Open Directories with Single Click option to make expanding and collapsing the project folders in the Project view quicker and more responsive. The option is available from the drop-down menu once you click the three dots icon.

Plugin Development

• LSP support for plugin developers - Introduced the LSP API for plugin developers who want to use a specific LSP server to add code assistance for technologies not yet natively supported in JetBrains IDEs.