The Toolbox App is the easiest way to get the EAP builds and keep both your stable and EAP versions up to date. You can also manually download the EAP builds from our website.

DOWNLOAD WEBSTORM 2023.2 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Below are the most interesting improvements available in WebStorm 2023.2 EAP #5. Please try them out and share your feedback in the comments below or by using our issue tracker.

Svelte LSP support

Continuing our effort around Language Servers, we’ve integrated the Svelte Language Server. It’s in early development, and we’re still ironing out some of the bugs, but that said, we’d greatly appreciate any feedback we can get, so please try it out and use the issue WEB-58397 to let us know about any issues you have. The update brings all errors reported by svelte-check right to your IDE, including, for example, null checks inside markup, prop type checking, and the recently introduced zero-effort type safety from SvelteKit (for now only in .svelte files). The underlying code is also shared by the Vue counterpart, which will help us provide a consistently good experience no matter which technology you use.

Watch mode for Jest tests in Run tool window

WebStorm 2023.2 sees the reintroduction of the Watch for Changes icon for Jest tests in the tool window. Now when you run Jest tests, you’ll get a new toggle button in the toolbar, which will let you easily enable watch mode. This will bypass the need for you to manually set up --watch/--watchAll Jest options in the run configuration.

Improved Preact and Solid.js support

We have good news for Preact and Solid.js users. WebStorm 2023.2 includes numerous fixes to improve our support for Preact and Solid.js, including a fix for the resolution mechanism for Solid and Preact projects. WebStorm will no longer show false errors for class attributes and will provide proper navigation for JSX type information. We’ve also fixed the issue causing Fragment to be reported as unused when shorter syntax is used ( <></>).

Support for aliases defined in bundlers

We’ve implemented support for frameworks with Typescript, where path aliases are defined in the configuration files of the bundlers and not in tsconfig.json. WebStorm will take these path aliases into account and provide auto-import in TypeScript frameworks where the component syntax is a superset of HTML, namely Vue, Svelte, and Astro.

File sorting by modification time in the Project view

WebStorm 2023.2 EAP 5 brings the long-awaited 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. To enable this feature, open the kebab menu (three dots) in the Project view and then select Tree Appearance | Sort by Modification Time.

Pin run configurations in the Run widget

To make managing multiple run configurations easier, we’ve implemented the option to pin preferred configurations in the Run widget. To add a run configuration to the Pinned section, open the kebab menu (three dots) next to its name and select Pin. If you have multiple pinned configurations, you can easily rearrange them by dragging and dropping them within the list.

Other notable changes

• We’ve fixed the issue causing WebStorm to incorrectly mark a TypeScript import as unused when a function has a generic parameter with the same identifier (WEB-61385).
• We’ve fixed the issue causing the Tailwind CSS configuration page to not show in Settings in 2023.2 EAP (WEB-61269).
• We’ve fixed the issue preventing WebStorm from reporting “cannot resolve directory” issues with HTTP/data URLs in CSS (WEB-56089).

That’s all for today! For a full list of the latest enhancements available in WebStorm 2023.2 EAP #5, check out the release notes.

Your feedback about the new features is very important to us, so please try them out and let us know what you think in the comments section below or on Twitter. If you encounter a bug, submit a report in our issue tracker.

The WebStorm team

The Toolbox App is the easiest way to get the EAP builds and keep both your stable and EAP versions up to date. You can also manually download the EAP builds from our website.

DOWNLOAD WEBSTORM 2023.2 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Below are the most interesting improvements available in WebStorm 2023.2 EAP #4. Please try them out and share your feedback in the comments below or by using our issue tracker.

Updates to the new UI

Light theme with light header

For v2023.2, we’ve 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.

Single-click navigation between project directories

In the Project view, a new Open Directories with Single Click option makes expanding and collapsing the project folders quicker and more responsive. The option is available from the drop-down menu once you click the three dots icon.

Improved main toolbar customization

We’ve expanded the customization options for the new UI’s main toolbar. You can now use a drop-down menu to quickly add actions to the toolbar. To do so, right-click on any widget, select Add to Main Toolbar, and explore the available options.

Auto-import modules for quick fixes

We’ve added a quality-of-life improvement to take care of janitorial work using quick-fixes in your code. Now when you apply an intention or quick fix that results in an unresolved element that is not exported in the file, WebStorm will automatically add the import for the element to the file.

Note: WebStorm adds this import only if there is one import for the element. If there are two or more imports for the element, WebStorm won’t add the import.

Auto-import modules for Live Templates

WebStorm 2023.2 also includes the option to automatically import elements when using Live Templates. Now when you add a Live Template that would result in unresolved elements, WebStorm will automatically add the import for the element to the file. You can enable this feature under Settings | Editor | Live Templates and select Add unambiguous imports in the options. This will work when there is only one unambiguous import for the element. If there are two or more possible elements, the import will not be added automatically.

New Live Templates for React hooks

We’ve added a set of new Live Templates for React hooks. You can find the Live Templates we’ve added under Settings | Editor | Live Templates | React hooks.

Option to enable/disable automatic interpolation of string literals

In WebStorm 2023.2, you can configure whether the interpolation of string literals is done for you automatically under Settings | Editor | General | Smart Keys | JavaScript and enabling or disabling the option Automatically replace string literal with template string on typing ‘${‘.

Suggested plugins in Settings

To make it easier to configure WebStorm for your specific projects and extend its functionality with plugins, we have updated the UI for the Settings | Plugins section. It now includes a set of suggested plugins based on your project specifics.

Other notable changes

• We’ve added syntax support for using declarations from the TC39 Explicit Resource Management proposal. A using declaration is a new block-scoped variable form that allows for the declaration of a disposable resource. You can read more about it here (WEB-60243).

That’s all for today! For a full list of the latest enhancements available in WebStorm 2023.2 EAP #4, check out the release notes.

Your feedback about the new features is very important to us, so please try them out and let us know what you think in the comments section below or on Twitter. If you encounter a bug, submit a report in our issue tracker.

The WebStorm team

The Toolbox App is the easiest way to get the EAP builds and keep both your stable and EAP versions up to date. You can also manually download the EAP builds from our website.

DOWNLOAD WEBSTORM 2023.2 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Below you can find the most interesting improvements available in WebStorm 2023.2 EAP #3. Please try them out and share your feedback in the comments below or by using our issue tracker.

GitLab integration

We’ve got some great news for our GitLab users, we’ve introduced initial integration with GitLab in WebStorm 2023.2 EAP 3. This integration will allow you to streamline your development workflow by working with the Merge Request functionality right from the IDE.

Angular improvements

For a long time, the way we were dealing with generics and directive inputs deviated from Angular’s one. With this update, we’ve completely reworked it, so that now when you use strictTemplates there should be no more surprises. WebStorm will precisely interpret ngTemplateContextGuard methods and propagate type evaluation to the template variables. Libraries that heavily use mapped types, like NgRx, should properly work now. That’s part of our continued effort to align with strictTemplates, and combined with previously added support for strict null checks and type narrowing, we hope it will make your Angular experience much better!

We have also fixed a couple of issues related to Jest and Angular in this EAP. These include a fix for the issue causing some Jest tests to fail to run in the directory of Angular projects and a fix for the issue with detecting sub-projects correctly when running all the tests in the directory.

Text search in Search Everywhere

The Search Everywhere (Double ⇧ / Double Shift) functionality, primarily utilized for searching through files, classes, methods, actions, and settings, 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.

Syntax coloring in inspection descriptions

In Settings | Editor | Inspections, we’ve implemented syntax color for code samples, which will help you with comprehension of the inspection and its purpose.

Rename refactoring for createSignal in Solid.js

In WebStorm 2023.2, we have introduced rename refactoring for the getter and setter of the createSignal function. Similar to the refactoring capability already available for useState, this allows you to conveniently rename the getter and setter functions associated with the createSignal function so you can efficiently update the names of these functions to better reflect their purpose or adhere to coding conventions.

Other notable changes

• We’ve fixed the issue causing Volar errors to jump around when editing code (WEB-61072).
• We’ve fixed the issue causing Jest tests to fail to recognize single parametric tests when each argument is not explicitly provided (WEB-60806).
• We’ve fixed the issue causing const type parameters with trailing commas in arrow functions in TSX files to be parsed incorrectly (WEB-60304).
• We’ve fixed the issue causing the syntax highlighting of some keywords to not work when JavaScript was embedded inside HTML (WEB-61013).

For the full list of enhancements available in WebStorm 2023.2 EAP #3, check out the release notes.

The WebStorm team

The Toolbox App is the easiest way to get the EAP builds and keep both your stable and EAP versions up to date. You can also manually download the EAP builds from our website.

DOWNLOAD WEBSTORM 2023.2 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Below you can find the most interesting improvements available in WebStorm 2023.2 EAP #2. Please try them out and share your feedback in the comments below or by using our issue tracker.

Volar support for Vue

We have some great news for all of you using Vue in WebStorm. We’ve implemented Volar support for Vue to support the changes in TypeScript 5.0. This should provide more accurate error detection aligned with the Vue compiler. The new integration is still in early development and we would really appreciate it if you could give it a try and provide us with any feedback you have.

You can set the Vue service to use Volar integration on all TypeScript versions, under Settings | Languages & Frameworks | TypeScript | Vue. By default, Volar will be used for TypeScript versions 5.0 and higher, and our own implementation will be used for TypeScript versions earlier than this.

In the future, we’ll consider enabling the Volar integration by default instead of our own implementation used for Vue and TypeScript.

Updates to the new UI

We’re hoping to move the new UI out of Beta in this release and will continue to make changes based on your feedback.

Reworked hamburger menu in the main toolbar on Windows and Linux

We’ve refined the behavior of the hamburger menu in the new UI, which is located in the main toolbar for 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. To do so, go to View | Appearance | Main menu as a Separate Toolbar.

Updated window controls on 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.

Other notable changes

• We’ve fixed the issue causing incorrect error highlighting from the Deno LSP server when a file or folder was moved or renamed (WEB-60915).
• We’ve fixed the issue causing the Tailwind CSS autocompletion to stop working after renaming a JSX file (WEB-60851).
• We’ve fixed the issue causing WebStorm to wrongly suggest @memberOf instead of @memberof on JSDoc (WEB-60399).
• We’ve fixed the issue causing join lines to remove braces in functions (WEB-54537).
• We’ve fixed the issue with the severity of the code inspections not being respected. This was achieved by separating the unresolved reference inspection in TypeScript into two separate inspections: Unresolved reference on an element with some type and Unresolved reference on an element with any type (WEB-60667).

For the full list of enhancements available in WebStorm 2023.2 EAP #2, check out the release notes.

The WebStorm team

You can update to v2023.1.2 by using the Toolbox App, installing it right from the IDE, or downloading it from our website.

Improved documentation for Angular-related symbols

We now provide more documentation for pipes, properties, and directives. You can see the documentation when you hover over symbols or invoke show documentation in completion (F1 / Ctrl+Q). The documentation will show you information not only for the property but also for the directive itself.

Improved pipe reference resolution

We’ve fixed the issue causing incorrect type evaluation for pipes with transform property with an indirect function instead of a method.

Fixed comment action in Astro

We’re continuing our work on improving the Astro support in WebStorm. This build fixes the issue that was causing the IDE to add comments incorrectly in the Astro template part when invoking the comment action.

Fixed indent settings in Vue template

We’ve fixed the issue causing Vue template indent settings to be ignored on reformatting. This regression prevented the correct code formatting as set in the indent preferences Settings | Editor | Code Style | Vue template.

Other notable improvements

Here are some of the other notable fixes in v2023.1.2:

• We’ve fixed the issue causing incorrect type definition for the Vue is attribute, which was throwing type mismatch errors when using component ref as :is prop (WEB-60534).
• We’ve fixed the issue causing whitespace to be marked as an incorrect value in CSS Custom Properties (WEB-20700).
• We’ve fixed the regression causing usages of components imported with barrel import to not be found in show usages (WEB-60152).
• We’ve updated the Prisma plugin previewFeatures to include jsonProtocol (WEB-60716).
• We’ve fixed the issue with the long inlay hints. Now long objects and union types will be collapsed by default (WEB-59322).

That’s all for today! For the full list of issues addressed in WebStorm 2023.1.2, please see the release notes.

The WebStorm team

Please note that WebStorm EAP builds are not fully tested and might be unstable.

The Toolbox App is the easiest way to get the EAP builds and keep both your stable and EAP versions up to date. You can also manually download the EAP builds from our website.

DOWNLOAD WEBSTORM 2023.2 EAP

Below you can find the most interesting improvements available in WebStorm 2023.2 EAP #1. Please try them out and share your feedback using our issue tracker or in the comments below.

CSS: Convert color to lch and oklch

In WebStorm 2022.3, we added support for the new CSS color modification functions. This provided WebStorm users with a number of color conversion actions. For instance, you can change rgb to hsl and vice versa. We are expanding this support in WebStorm 2023.2 to include conversion of lch and oklch with other color functions.

Next.js custom documentation support

Next.js 13.1 now includes a plugin for the TypeScript Language Service specifically for the new app directory. This plugin offers suggestions for configuring pages and layouts, as well as helpful hints for using both Server and Client Components. It also comes with custom documentation, which means that it adds extra information to the output of the TypeScript Language Service. It’s now possible to view this custom documentation in WebStorm.

Other notable changes

• We’ve added a new “in code generated by IDE” option to replace the confusing “new code” option in the JavaScript and TypeScript code formatter options. This should make it easier to understand that the option applies to code generated by the IDE, such as refactorings and new imports (WEB-60584).
• We’ve fixed the issue that was causing Live Templates to be present in string literals (WEB-59728).
• We’ve fixed the issue in Jest that was causing the No matching tests found message when the test name includes a template string (WEB-60122).
• We’ve fixed the issue that was causing the flickering terminal window when debugging Node.js apps on a Windows operating system (WEB-60364).

For the full list of the latest enhancements available in WebStorm 2023.2 EAP #1, check out the release notes.

The WebStorm team

You can update to v2023.1.1 by using the Toolbox App, installing it right from the IDE, or downloading it from our website.

Vue support improvements

We have good news for our Vue users – this bug-fix update includes a large number of Vue-related improvements that didn’t make it into the release on time. Here are the biggest ones.

Better New Vue Component action

We’ve improved the New Vue Component action, which now allows you to choose the style of the component API – Options API, Composition API, and Class API – depending on the Vue version and the presence of the library for Class API. The component file will be scaffolded with TypeScript if tsconfig.json is present in any parent folder. It will also use the CSS preprocessor most used across the Vue files in the project.

Support namespaced components in script setup syntax

We’ve added support for Namespaced Components. Components used in <template> tags are now correctly resolved and the navigation works as expected.

Other fixes for Vue

• We’ve fixed the issue causing WebStorm to falsely mark Vue lifecycle event methods as unused (WEB-38671 and WEB-36212).
• We’ve fixed the issue causing component props and methods defined in separate files to not be recognized (WEB-52495).

Angular fixes

We’ve made several minor fixes for Angular in this bug-fix update, including:

• We’ve fixed the type mismatch errors for the Angular Material datepicker that were happening in Angular templates (WEB-56339).
• We’ve fixed the issue causing deprecated Angular components to not be displayed as “struck out” (WEB-43558).
• We’ve fixed the issue causing the highlighting in Angular HTML templates to stop working when editing code while debugging (WEB-60374).

Astro fixes

We introduced Astro support in WebStorm 2023.1 through our new plugin. This support is still quite basic, so we’ll be working on improving it. Thank you to everyone who has tried this out and filed issues and feedback on this feature. Please continue sharing any issues you run into in our issue tracker – we really appreciate it!

Here are the fixes that made it into this bug-fix update:

• We’ve fixed the issue causing Fragment to be marked as unknown in Astro components (WEB-59858).
• We’ve fixed the issues causing completion to not work on tags and to not show up after < in HTML (WEB-58792 and WEB-59265).
• We’ve fixed the TypeScript support in Astro client-side scripts, which was causing the false error “Types are not supported by current JavaScript version” (WEB-60003).

Tailwind CSS fixes

This bug-fix release includes several improvements to the Tailwind CSS support.

• We’ve added support for ESM-based config files and you will now get completion suggestions (WEB-60296).
• We’ve fixed the issue causing Tailwind CSS autocompletion not to work when a folder name contains brackets (WEB-58635).
• We’ve fixed the issue causing the autocompletion not to work properly in some instances (WEB-56637).

Other notable improvements

Here are some of the other notable fixes in v2023.1.1:

• We’ve fixed the issues causing screen flickering when using the IDE (JBR-5417 and JBR-4939).
• We’ve fixed the issue in our SvelteKit support path mapping, which was causing errors such as “Corresponding file is not included in tsconfig.json” (WEB-59399).

That’s all for today! For the full list of issues addressed in WebStorm 2023.1.1, please see the release notes.

The WebStorm team

Today, we’ll give you a sneak peek into what we have planned for the next release of WebStorm, with our usual disclaimer that these plans are subject to change.

• Stable new UI. Getting the new UI out of Beta will be one of our priorities in this release. Thank you to everyone who has reported and upvoted the existing issues throughout our iterations. The end goal is to provide you with a UI you enjoy working in. If you have feedback, please continue to let us know.
• CSS Nesting support. With WebStorm 2023.2, we’ll be adding support for the CSS Nesting feature (WEB-57875). It provides the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets.
• Vue.js improvements. We’ve worked on our Vue support and fixed a lot of issues over the last year, including the addition of an improved New Component action (WEB-56464), which will become available in the upcoming WebStorm 2023.1.1 bug-fix update. We’re planning to continue improving our Vue.js support specifically by adding support for properties provided by the dependency injection functions provide and inject.
• Ability to auto-run Jest tests in watch mode. We’re going to add a watch mode for Jest tests that can be quickly turned on and off from the tool window (WEB-50559).
• Solid.js and Preact support improvements. We’re implementing several enhancements to our Solid.js and Preact support and how they are resolved, so you can expect better code completion and accurate type info. Keep an eye on WEB-60239, WEB-59748, and WEB-60240 for details. Additionally, we’ll add some extra love for Solid.js with a Rename refactoring for getters and setters for createSignal (WEB-60159).
• Custom documentation support. Next.js 13.1 now includes a plugin for the TypeScript Language Service specifically for the new app directory. This plugin offers suggestions for configuring pages and layouts, as well as helpful hints for using both Server and Client Components. It also comes with custom documentation, which means that it adds extra information to the output of the TypeScript Language Service. We plan to make it possible to view this custom documentation in the IDE (WEB-58598).

That’s all for now! These are the most notable improvements we’ve planned for this release, though we are also planning to implement various bug fixes, including ones for Astro and Svelte. We are also looking into new ways we can present type errors in the IDE. Stay tuned for information about the upcoming bug-fix update for WebStorm 2023.1 and the start of the next round of the Early Access Program!

The WebStorm team

WebStorm 2022.2.5 brings the following fixes:

• We’ve added fixes to cover new cases with the screen flickering in full-screen mode on macOS Ventura (JBR-4959).
• We’ve fixed the issue causing blank popup windows appearing in the IDE (JBR-5258).

For more information, please see the release notes.

If you experience any issues, please report them to our issue tracker.

The WebStorm team

DOWNLOAD WEBSTORM 2023.1

If you only have a few minutes to explore what’s new in WebStorm 2023.1, check out this video in which our Developer Advocate, Paul Everitt, reviews the most notable changes. If you want to dive deeper, please keep reading!

The key new features and improvements in v2023.1 include:

• Frameworks and Technologies: Astro support, Vue improvements, component imports added on copy-paste, parameter info for React props, auto-import of global and exported symbols into Angular templates, Svelte bug fixes, and more.
• JavaScript and TypeScript: automatic conversion of strings to template literals, better prioritization of imported libraries for auto-import, aligned import behavior between TypeScript and JavaScript, and more.
• Markup Languages and CSS: Tailwind CSS configuration, an option to configure HTML code completion, the ability to reformat tables in Markdown files, and more.
• New UI: vertical split for tool windows, Compact Mode, project tabs on macOS, redesigned Run widget, and more.
• User Experience: full IDE zoom, a new Remember size for each tool window setting, a setting to configure Actions on Save for new projects, scanning files to index in smart mode, and more.
• Version Control: improved code review workflow for GitHub, VCS status color hints in the Structure tool window, improved Branches popup, and more.

Frameworks and Technologies

Astro support

Astro support has landed, with a new plugin available in WebStorm 2023.1! You can download the Astro plugin from JetBrains Marketplace, or you can install it directly from the IDE by going to Preferences / Settings | Plugins and searching for “Astro”.

The plugin provides functionality such as syntax highlighting, code completion with automatic imports, refactorings, navigation, intentions, code folding, Emmet support, and correct formatting.

Vue improvements

We’ve added TypeScript support in Vue templates when you set the lang attribute in a script tag to ts. Previously, JavaScript was used regardless of the lang attribute in the script tag. WebStorm will now provide support for inline casting, improved type narrowing, and correct information about inferred types in quick documentation in templates of Vue Single-File Components.

You can also benefit from code completion of your custom component events in a Vue template. This completion is available as you type and works identically in both JavaScript and TypeScript.

Component imports added on copy-paste

When you copy and paste code from one file to another, WebStorm would add all the required imports for plain JavaScript, TypeScript languages, and React templates. In WebStorm 2023.1, all the required imports will now be automatically added for Vue, Svelte, Astro, and Angular templates, too.

Parameter info for React props

WebStorm 2023.1 includes a new way to show the expected type for a component prop. Now when you press ⌘P / Ctrl+P when passing the props to a component, you’ll get an info popup with type information. This information was only available before via hover, so this will improve the developer experience for keyboard-centric users.

Auto-import of global and exported symbols into Angular templates

We’ve added a new feature for Angular in WebStorm 2023.1. Now, when working with global and exported symbols in the Angular template, WebStorm will automatically add an import for them into your component on code completion or when you use a quick fix.

Support for the Angular `NgOptimizedImage` directive

The IDE also supports the Angular 15 NgoptimizedImage directive by providing an inspection that suggests using ngSrc instead of src for img.

Ability to run Jest tests in folders

In WebStorm 2023.1, you can run all the tests in a specific folder through the right-click context menu. This feature worked for Vitest, and now we’ve also implemented it for Jest.

Svelte bug fixes

We’ve been improving the Svelte support available through the dedicated plugin. We’ve reworked the way WebStorm evaluates $types in SvelteKit apps and fixed the issue with TypeScript-specific keywords in svelte files.

Docker improvements

The Dashboard tab of the Docker-compose node now pulls the container logs together and displays them all in one place. Additionally, you can now connect to the Azure Container Registry. See this blog post for more information.

JavaScript and TypeScript

Automatic conversion of strings to template literals

In WebStorm 2023.1, your single- or double-quoted strings will be automatically transformed into template literals whenever you type ${. This works for raw strings as well as for JSX properties.

Better prioritization of imported libraries for auto-import

We’ve improved the IDE’s behavior when adding auto-imports from different libraries with the same exported element name.

A popup with import options is no longer shown if the project already has an import for an element. Auto-imports are now added based on the existing import in the project.

If you need to add an import for an element from another library, the import statement must be added manually. The IDE will then provide a popup with options to make it work as it did in previous versions.

Aligned import behavior between TypeScript and JavaScript

We’ve made small improvements to align the behavior for imports in TypeScript and JavaScript. Now in TypeScript, you’ll be shown the import options in the context actions as you would in JavaScript. You can open the context actions by right-clicking and selecting Show Context Actions or using the shortcut ⌥ ⏎ / Alt+Enter. The unified settings can be found under Preferences / Settings | Editor | General | Auto Import, where you’ll find all the import options.

Support for TypeScript features

WebStorm includes support for major features from the upcoming TypeScript 5.0. It also now provides full support for multiple config inheritance, the const modifier for type parameters, and the allowImportingTsExtensions flag. We’ve also added support for instantiation expressions and unlisted property narrowing with the in operator.

Universal approach to handling file references

We’ve improved the way WebStorm handles references in JavaScript, TypeScript, HTML, CSS, and various frameworks in v2023.1. References are now handled in a more generic way across your projects. For instance, resolving images, CSS, or HTML files now works with path aliases.

Markup Languages and CSS

Tailwind CSS configuration

WebStorm 2023.1 includes highly anticipated support for Tailwind CSS. We’ve added support for all configuration options, such as configuring custom class name completions under the classAttributes option, or even an experimental one like tailwindCSS.experimental.configFile.

You can find and set up these configuration options under Preferences / Settings | Languages & Frameworks | Style Sheets | Tailwind CSS.

Option to configure HTML code completion

WebStorm 2021.3 introduced completion for HTML that would show you tag names or abbreviations as you typed. This behavior can be distracting when entering plain text in HTML, so we’ve added an option to disable it. You can find the new option in Preferences / Settings | Editor | General | Code Completion.

New intention action to reformat tables in Markdown files

A new intention action allows you to correct the formatting of tables in Markdown files. You can access the quick-fix via the Context actions shortcut (⌥ ⏎ / Alt+Enter) or by pressing the bulb icon and selecting Reformat table from the list.

New Fill Paragraph action for Markdown files

The Fill Paragraph editor action is now supported for Markdown files, making it easy to break long texts into several lines of equal width. To do this, set the caret inside the paragraph you want to edit and call the action from the Edit menu or search for the Fill Paragraph command using Find Action (⇧⌘A / Ctrl+Shift+A) and execute it.

Option to choose line comment style in PostCSS

We’ve added an option to Preferences / Settings | Editor | Code Style | Style Sheets | CSS that allows you to define which line comment style is used in your PostCSS files. You can comment out lines using ⌘/ on macOS or Ctrl+/ on Windows and Linux, and it will be done using the line comment style you’ve chosen.

New UI

Last year we introduced a new, more minimalistic UI for WebStorm and other JetBrains IDEs. We’ve been refining the new UI further based on your feedback and invite you to give it another try. You can do so in Preferences / Settings | Appearance & Behavior | New UI. Read on to learn about the key UI changes that have landed in this release.

New UI: Vertical split for tool windows

We’ve introduced an option in the new UI that lets you split the area of the tool windows and arrange them so you can see two at once.

To add a tool window to this area and place it in the lower part, drag its icon along the sidebar and drop it under the separator. Alternatively, you can right-click on the icon and assign the new placement for the tool window using the Move to action.

New UI: Compact Mode

To improve the user experience with the new UI on smaller screens, we’ve introduced Compact Mode. It provides a more consolidated look with a leaner toolbar and tool window header, scaled-down spacings and paddings, and smaller icons and buttons.

To turn Compact Mode on, go to the View menu and select Appearance | Compact Mode.

New UI: Project tabs on macOS

We’ve implemented one of the most popular feature requests for the new UI – project tabs for macOS users. When you have several projects open, you can now easily switch between them using the project tabs displayed under the main toolbar.

New UI: Redesigned Run widget

We’ve redesigned the Run widget that you see at the top of the IDE window. With the icons now colored green – rather than the area around them being blocked out in color – the appearance is subtler and easier on the eyes.

New UI: Popular features reimplemented

We’ve added some popular features people were missing in the new UI. For example, the Show Hidden Tabs selector is back along with the Fetch action in the Branches popup. Also, we’ve made improvements to Distraction Free and Zen modes by hiding the main toolbar elements and displaying the name of the file in scope.

New UI: Dark editor color scheme

We’ve reviewed the default editor color scheme and came up with the new Dark option that automatically activates when you enable the new UI. If you want to switch to the color scheme that was previously used as a default one, go to Preferences / Settings | Editor | Color Scheme and select Darcula from the list.

User Experience

Full IDE zoom

It’s now possible to zoom into and out of WebStorm, increasing or decreasing the size of all UI elements at once. From the main menu, select View | Appearance | Switch Zoom IDE. You can also press ⌃` / Ctrl+` and adjust the IDE’s scaling via Zoom.

New Remember size for each tool window setting

We’ve introduced a new layout option that allows you to unify the width of the side tool windows or retain the ability to freely adjust their sizes as you customize your layout. The new Remember size for each tool window checkbox is available in Preferences / Settings | Appearance | Appearance & Behavior | Tool Windows.

Setting to configure Actions on Save for new projects

WebStorm 2023.1 adds an option to predefine the behavior of Actions on Save for new projects. For this, go to File | New Projects Setup | Preferences / Settings For New Projects | Tools | Actions on Save and select which actions you want to be triggered when saving changes in your future projects.

ML-powered search for classes in Search Everywhere

To provide you with more relevant and accurate search results, we continue our efforts to integrate machine-learning ranking into the Search Everywhere (Double ⇧ / Double Shift) functionality.

The sorting algorithm in the Classes tab is now also powered by machine learning by default, along with the results in the Actions and Files tabs.

Option to restore the old copy/cut/paste behavior

We’ve added an option to restore the copy/cut/paste behavior to how it was in earlier versions of WebStorm. This will allow you to paste clipboard contents at the caret, rather than pasting them on the preceding line. You can find the available options under the dropdown menu next to When pasting a line copied with no selection: in Preferences / Settings | Advanced Settings | Editor.

Scanning files to index in smart mode

We’ve improved the IDE startup experience by performing the Scanning files to index… process in smart mode, which makes the startup process much quicker. When opening a project, WebStorm will use the project’s existing caches from the previous session and look for any new files to index. If no changes are found after scanning, the IDE will be ready to work. This significantly reduces the delays caused by waiting for indexing on startup.

Reconfigure Microsoft Defender settings from the IDE

WebStorm 2023.1 includes a new notification that is triggered when Microsoft Defender with Real-Time Protection is running. Given that these antivirus checks can significantly decrease the IDE speed, WebStorm suggests adding certain folders to Defender’s list of exclusions. The notification provides the option to either reconfigure these settings automatically or check the Defender configuration instructions and do it manually.

Option to save multiple tool window layouts

In WebStorm 2023.1, you can save several different tool window layouts and switch between them as needed.

To save a new layout, arrange the tool windows as desired and go to Window | Layouts | Save Current Layout as New. Once you’ve adjusted the arrangement, you can update the current setup using the Save Changes in Current Layout option or save the changes as a new custom layout. You can find the saved layouts in the list under Window | Layouts.

Option to show whitespaces in highlighted code

There’s a new Selection checkbox in Preferences / Settings | Editor | General | Appearance | Show whitespaces that makes whitespaces show up as small dots when you select code.

Custom regexp-based search and replace inspections

You can now use regular expressions to create your own search and replace inspections. These inspections can be especially useful for highlighting style-based or formatting-based problems.

Go to Preferences / Settings | Editor | Inspections and press the + icon. Select Add RegExp Search Inspection from the list, and you’ll be directed to a dialog where you can set up your new inspection. Select the language, use hints on the left to build a regexp, and designate the required replacement for the selected pieces of code. You can also configure the way you want the IDE to highlight them in the project.

Version Control

Improved code review workflow for GitHub

To simplify the process of reviewing code inside the IDE, we’ve reworked the Pull Request tool window. It now features a dedicated tab for each pull request you open. The tab instantly displays the list of changed files, and there’s a dedicated button to execute the most relevant action according to the pull request’s current state.

VCS status color hints in the Structure tool window

To make tracking changes to files more convenient, we’ve added color hints to the Structure tool window. The names of modified objects now turn blue, whereas the names of the newly added objects appear in the tool window in green.

Improved Branches popup

We’ve improved the usability of the Branches popup. Navigating between branches is now easier, as they are grouped and stored in expandable lists.

Auto-completion in the Create New Branch popup

With WebStorm 2023.1, we’ve implemented auto-completion in the Create New Branch popup. Once you start typing a name for your new branch, the IDE will suggest relevant prefixes based on the names of existing local branches.

Background pre-commit checks

We’ve reworked the behavior of Git and Mercurial pre-commit checks to speed up the overall commit process. Checks are now performed in the background after you commit, but before you push.

This has been a good release to start the year on with lots of new features and enhancements to the IDE. If you’d like a list of everything included in WebStorm 2023.1, please see the release notes. We hope you enjoy this release, and as ever, please share your feedback with us and report any issues you find to our issue tracker.

The WebStorm team

DOWNLOAD WEBSTORM 2023.1 RC2

Please note that, unlike our previous EAP builds, you must have an active WebStorm license to use it. Otherwise, you’ll need to sign up for a 30-day free trial to install and run this build.

This is the final build before the major release, so your feedback is very welcome! Please report any issues to our issue tracker, and stay tuned for the upcoming release announcement.

Check out the release notes for a complete list of all the changes.

The WebStorm team

DOWNLOAD WEBSTORM 2023.1 RC

Let’s take a brief look at some of the most interesting improvements in v2023.1:

• Astro support: Long-awaited Astro support has landed in WebStorm with our new plugin. The plugin provides basic functionality, including syntax highlighting, code completion with automatic imports, refactorings, navigation, and correct formatting.
• TypeScript support in Vue templates: We’ve added TypeScript support in Vue templates. It is enabled when you set the lang attribute in a script tag to ts.
• Component imports on copy-paste for more frameworks: WebStorm now automatically adds all the required imports for Vue, Svelte, Astro, and Angular templates when you copy and paste code from one file to another.
• Add global and exported symbols into components in Angular: WebStorm will automatically add an import for global and exported symbols into your components on code completion when working in Angular templates.
• Convert strings to template literals automatically: WebStorm will now automatically transform your single- or double-quoted strings into template literals whenever you type ${.
• Tailwind CSS configuration: We’ve added support for configuration options, such as custom class name completion under the classAttributes option or experimental ones like tailwindCSS.experimental.configFile.
• Improvements to the new UI: We’ve been refining the new UI further based on your feedback. The changes include a redesigned run widget, Show Hidden Tabs, vertical split for tool windows, Compact Mode, and project tabs on macOS.
• Full IDE zoom: It’s now possible to zoom into and out of WebStorm, increasing or decreasing the size of all UI elements at once.
• Setting to configure Actions on Save for new projects: WebStorm 2023.1 adds an option to predefine the behavior of Actions on Save for new projects.
• Improved code review workflow for GitHub: To simplify the process of reviewing code inside the IDE, we’ve reworked the Pull Request tool window. It now features a dedicated tab for each pull request you open.

To find out what else we’ve implemented in WebStorm 2023.1, check out our previous EAP blog posts.

Please report any issues to our issue tracker, and stay tuned for the upcoming release announcement.

The WebStorm team