WebStorm : The JavaScript and TypeScript IDE | The JetBrains Blog

WebStorm 2025.1 Beta Is Here With AI Enhancements, Framework Improvements, and a Better User Experience

Vladislav Minaev — Fri, 14 Mar 2025 11:18:11 +0000

The EAP cycle for WebStorm 2025.1 is over, and we’re excited to share what’s included in the Beta builds.

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

DOWNLOAD WEBSTORM 2025.1 BETA

Important! WebStorm Beta builds are not fully tested and might be unstable. Please try the latest build and share your feedback with us. You can do so using our issue tracker or by leaving a comment on this blog post.

Key improvements

AI Assistant

Сlaude and local LLMs

JetBrains AI Assistant is advancing its line of models! We’ve added support for Claude 3.5 Sonnet and Claude 3.5 Haiku, now provisioned in Amazon Bedrock. This means you’ll benefit from sharper responses, faster insights, and an even smoother experience. AI Assistant’s lineup of OpenAI models now includes o1, o1-mini, and o3-mini.

Update: A new version of the JetBrains AI Assistant plugin has been released, bringing support for even more models, including:
• Claude 3.7 Sonnet
• OpenAI GPT-4.5
• Gemini 2.0 Flash

In addition to cloud-based models, you can now connect the AI chat to local models available through Ollama and LM Studio! You can set up local providers via Settings | Tools | AI Assistant | Custom Models:

Improved AI completion for web frameworks

For the 2025.1 release we have focused on improving AI-based completion in the context of web framework components. These changes affect local full line code completion as well as cloud-based completion suggestions:

Enhanced AI test generation

AI-powered test generation now offers more careful framework detection, especially for cases when multiple frameworks are present. Additionally, generated tests respect naming conventions:

TypeScript

Service-powered type engine

The engine previously known as WebStorm@next or the Use types from server option now has an official name – the service-powered type engine! We’re currently polishing it, with a focus on performance. A dedicated icon in the status bar displays the engine’s status, and you can granularly enable or disable it for supported frameworks or for TypeScript in general within the current project:

If you notice any degradations when the new engine is enabled, please use the Submit a bug report link.

Angular improvements

WebStorm now supports code completion for host binding attributes based on directive selectors. Quick-fixes for creating fields are also available within binding expressions. Moreover, refactoring is supported across different locations and is even available for CSS classes:

The long-awaited support for Reactive Forms is here. This update includes code completion, syntax highlighting, validation, refactoring, and quick-fixes for Reactive Forms. Both declaration styles – constructor-based and builder-based – are fully supported.

There is also a new intention to extract or inline component templates. Invoke Show Context Actions (⌥⏎ (macOS) / Alt+Enter (Windows/Linux)) to use the action:

This release brings many other improvements and bug fixes for Angular beyond the features mentioned above.

Next.js improvements

WebStorm 2025.1 Beta introduces automatic run configuration creation for Next.js applications. Now, you can easily initiate debug sessions for both the client and server components of your Next.js application using the Run widget.

Vue improvements

The New Project wizard now gives you the option to generate a new Nuxt project using the Nuxt CLI (nuxi):

We’ve also implemented several bug fixes, including:

WEB-59818 – Vue custom global properties added by augmenting vue are now resolved.
WEB-69114 – Auto-completion and auto-imports now work for packaged components declared with __VLS_WithTemplateSlots.

User experience

Floating toolbar

In WebStorm 2025.1 Beta, invoking Show Context Actions (⌥⏎ (macOS) / Alt+Enter (Windows/Linux)) now opens the floating toolbar with different action groups. The toolbar also appears when you select code in the editor:

The floating toolbar contains the following actions and action groups:

Context actions
AI Assistant context actions (if the AI Assistant plugin is installed)
Refactor
Show usages
Surround with tag
Reformat code

You can customize the contents of the toolbar by opening the kebab menu (three vertical dots) and selecting the Customize Toolbar… option

New file creation in the Project tool window

Creating new files is now easier in the Project tool window. You can simply use the + icon located directly in the window’s toolbar:

GraphQL and Prisma

WebStorm 2025.1 Beta introduces the following improvements for Prisma:

ULID support (WEB-71197)
Multi-line comment syntax (WEB-70929)
gql(query) syntax support (WEB-71611)

Prettier integration improvements

WebStorm now automatically detects and applies the nearest in the directory tree Prettier configuration when formatting files, ensuring the code style is consistent across subprojects. The Indentation status bar widget shows whether Prettier has modified the code style. The new dropdown menu offers the following options:

Open Configuration File (or use default Prettier settings if none exists)
Open Prettier Settings
Disable Prettier Code Style Modifications

Code style changes made by Prettier are visible in the Code Style tab under Settings, where you can also disable automatic modifications.

A new setting controls whether WebStorm should use Prettier to auto-format code styles. This option is enabled by default. In case if .editorconfig is present, Prettier takes precedence for files it handles, but if certain options aren’t specified in Prettier, EditorConfig settings still apply.

Monorepo support

We are consistently working to improve reliability and performance in mono-repo setups. Here are some of the most noticable fixes in this build for long-standing issues:

WEB-71210 – Auto-import and syntax highlighting now work as expected for sibling packages in monorepo.
WEB-70868 – IntelliSense fixed in large nx TypeScript monorepos.
WEB-69642 – Array values in package.json export fields are now processed properly.
WEB-64647 – Path aliases defined in package.json exports are now used by auto-import in monorepos.

That’s it for today. For the full list of improvements introduced throughout the latest 2025.1 EAPs, check out the release notes.

The WebStorm team

The Angular Language Server: Understanding IDE Integration Approaches

Jan-Niklas Wortmann — Thu, 06 Mar 2025 18:26:00 +0000

The Language Server Protocol (LSP) has been a fundamental part of the code editor landscape for years, providing a consistent development experience across different editors. The Angular Language Server leverages this protocol to provide Angular-specific features to compatible editors. However, not all IDEs take the same approach to delivering these capabilities. Let’s look at the major differences between VS Code, NeoVim, and WebStorm and finally answer the age-old question, “Why does WebStorm not just use the Angular Language Server?!”

What is a language server, and how does the LSP work?

Modern code editors need to understand your code to provide features like autocompletion, go to definition, or error detection. Traditionally, each editor needed to implement this understanding for every programming language, leading to duplicated effort and inconsistent experiences across editors.

The Language Server Protocol (LSP) solves this by standardizing how editors communicate with language-specific analysis tools. Here’s how it works:

Your editor (the client) sends information about your code (typically the file that is currently open in your editor) to a language server.
The language server analyzes the code and responds with insights.
Your editor displays these insights as squiggly error lines, autocompletion popups, or other UI elements.

// When you type this in your editor
@Component({
  template: `
    
      {{ item.property }}
    
  `
})
class MyComponent { }

Your editor sends the file content to the language server. The server analyzes it and might respond with:

{
  "diagnostics": [{
    "message": "Property 'property' does not exist on type 'any'",
    "range": {
      "start": {"line": 3, "character": 12},
      "end": {"line": 3, "character": 20}
    }
  }]
}
// Your editor then shows the error underline

This standardization means that:

Developers of editors and IDEs can add support for new languages just by implementing the LSP client once.
Language tool developers can support all LSP-compatible editors with a single server and very small client implementations (JetBrains IDE plugin or VS Code plugin).
Developers get consistent features across different editors.

The Angular Language Server specifically provides Angular-aware code analysis, offering features like template type checking, component property completion, and Angular-specific refactorings to any editor that supports LSP.

Benefits of the Language Server Protocol

The LSP has established itself as the standard for providing editor intelligence across different development environments. It enables consistent features like type checking, code completion, and navigation across any LSP-compatible editor:

@Component({
  template: `
    
      {{ item?.deeply?.nested?.property }}
    
  `
})
class WhyTypeCheckingMatters { }

While the Angular compiler would catch these template errors during build time, the language server provides immediate feedback in your editor. This means you can spot and fix type errors as you write your code, without waiting for the compilation step.

VS Code: LSP’s golden child

VS Code’s integration with the Angular Language Server is seamless and intuitive. Here are some of the features that you’ll be able to use after installing the necessary plugin:

Template type checking: Because nobody likes finding out about undefined properties in production.
Go To Definition: Jump straight to your TypeScript references.
Autocompletion: For when you can’t remember the syntax of *ngFor or @switch.
Real-time error detection: Catch those typos before they catch you out.

The best part? It’s all standardized. The same language server that powers VS Code can power any editor that speaks LSP.

Neovim: for when Vim users want nice things, too

Remember when Vim users had to type out every import statement manually? Pepperidge Farm remembers. Now, thanks to LSP, you get:

-- Neovim config that actually gives you IDE features
require'lspconfig'.angularls.setup{
  -- Look ma, real autocomplete!
}

Neovim users now enjoy the same powerful features as VS Code users while keeping their beloved modal editing. It’s the best of both worlds – modern IDE features with an outstanding editing experience.

The caveats of language servers

Language servers are great – they provide a consistent developer experience and guarantee correctness. However, the fact that language servers adhere to a standardized protocol means that they do have some limitations. For instance, even though most languages and frameworks have some kind of test support, the LSP is not aware of this concept, and, therefore, tests must be configured manually within the editor. This is also the case when working with debuggers, too.

Additionally, language servers generally look at the codebase on a “file by file” basis, and, more specifically, at the current cursor position. Generally speaking, this works great until it doesn’t… Implementing a multi-file refactoring, for instance, can be difficult (though not impossible). For this reason, extracting some HTML code into a new Angular component is not as straightforward as it might first sound. On top of that, language servers can usually only process one language at a time; therefore, refactoring a CSS class across languages can quickly become very cumbersome in a language server implementation. The Angular Language Server has a very clever trick for handling HTML and TypeScript, but more on that in the next section. CSS, on the other hand, doesn’t enjoy the same level of support.

What’s more, adding further support for parts that don’t have dedicated compiler functionality is difficult to accomplish. One such example would be IntelliSense for the host property of the component decorator.

WebStorm: a slightly different approach

Now, here’s where things get interesting. WebStorm and other JetBrains IDEs take a different approach, and it’s not just about being contrarian. For the last few years, the Angular plugin has been pre-installed with WebStorm. As of now, this plugin does not utilize the Angular Language Server, but a custom-type engine. As part of our new Service-powered type engine (more about this in the future), we made some major changes to our Angular integration. Instead of using the entire Angular Language Server, WebStorm adopted Angular’s TCB (type-check block) engine, an integral part of the Angular Language Server. For more details, you can check out this talk at NG DE, but in short, the Angular Language Server converts the HTML code into TypeScript code and uses the generated TypeScript code to map errors and IntelliSense features back to the cursor position in the original HTML file. The screenshot below visualizes this concept.

See how this.counter is used in the template, which gets converted to the function _tcb1 on the right side, but isn’t properly declared in TestComponent.

You might now be asking, why doesn’t WebStorm just use the Angular Language Server? Well, it turns out template type checking is just one piece of the IDE puzzle. WebStorm’s architecture already handles most of what the Angular Language Server provides:

Navigation
Code completion
Quick-fixes

Furthermore, it offers parts of functionality that our users appreciate and that are not offered by the language server:

Unit and E2E test integration for Jasmine, Jest, Vitest, Cypress, and Playwright.
Debugging integration.
Semantic highlighting of signals (fun fact: the Angular LSP does not provide syntax highlighting, which is part of the VS Code plugin).
Special refactoring and quick-fix capabilities (e.g. extract Angular Component, create a signal ‘property’, etc.).
IntelliSense without compiler support, like the host property mentioned above.
Enhanced search capabilities (e.g. Find Usages for components).

The real-world implications

So what does this mean for you, the developer, just trying to get work done?

VS Code and Neovim users

Standardized experience across editors
Regular updates with Angular releases
Built-in type correctness

WebStorm users

Built-in integration of broader IDE tools (debugger, test runner, run configurations, etc.)
Direct TCB integration for template type checking
Additional navigation, refactoring features, and consistent development experiences across different languages (HTML, CSS, and TypeScript)

Looking forward

The Angular Language Server continues to evolve, making developers’ lives easier. Meanwhile, WebStorm’s specialized approach shows that there’s more than one way to achieve excellent Angular support.

WebStorm 2024.3: Built-In Database Tools and SQL Support, Better AI-driven Code Completion, and More

David Watson — Tue, 12 Nov 2024 16:05:08 +0000

Our third major release of 2024 is here! In this version, you’ll find built-in database tools and SQL support, various quality enhancements, better code completion with AI Assistant, and a whole lot more.

DOWNLOAD WEBSTORM 2024.3

If you only have a few minutes to explore the highlights of WebStorm 2024.3, check out our quick review video above for the top highlights. If you want to dive deeper into what you can expect in the release, just carry on reading!

The new features and improvements in v2024.3 include:

Key Highlights: Improved framework component navigation and renaming, built-in support for database tools and SQL, better code completion with AI Assistant.
Frameworks and Technologies: Color preview for Tailwind CSS classes, improvements for Angular, and more.
User Experience: Optimized placement for the Rename action, cleaner search results for directories, highlighting for occurrences of selected text, and more.
Integrated Developer Tools: Option to disable background pre-commit checks, new Docker Compose build attributes, and more.

Key Highlights

Improved framework component navigation and renaming

WebStorm 2024.3 now supports the Show component usages action for Vue, Svelte, and Astro and detects component usages both in imports and templates. You can also use this functionality by invoking the Find Usages action on the component file in the Project view:

The Rename refactoring has also been enhanced to include component usages renaming. When renaming a component file or explicitly defined name, the associated usages in templates will also be updated! This behavior can be disabled by toggling the Search for component usages option during the renaming process and in the Find dialog.

Built-in support for database tools and SQL

The Database Tools and SQL plugin, which was previously only available via a separate paid subscription, is now bundled with WebStorm at no extra cost. You can query, create, and manage databases directly in the IDE. This extends WebStorm’s capabilities for backend and full-stack development. It also makes switching between JetBrains IDEs easier, as most of them include this functionality.

Better code completion with AI Assistant

WebStorm 2024.3 has significantly improved AI-driven code completion for JavaScript and TypeScript. The new approach combines fast, local full-line completion with powerful cloud-based suggestions powered by JetBrains’ in-house LLMs. This hybrid approach enhances speed, accuracy, and usability while reducing the frequency of lengthy and irrelevant suggestions.

Here are some of the key improvements:

Highlighting is now applied to the suggested code, which previously was just plain gray text.
Partial acceptance allows you to apply suggestions granularly, giving you more control over changes to your code:
Accept suggestions word by word – ⌥ → / Alt+Right.
Accept suggestions line by line – ⌘ → / Ctrl+Right.
As before, you can explicitly call completion with ⇧ ⌥ / / Shift+Alt.
Context collection has been enhanced using RAG strategies.

Completion suggestions are now provided in more locations, and are now triggered during typing, not only on Enter keystrokes. Support for AI-based code completion has also been extended to HTML and CSS (including .css, .less, .scss, .sass, .pcss). Please refer to this blog post for more insights.

Frameworks and Technologies

Color preview for Tailwind CSS classes

In WebStorm 2024.3, color previews for Tailwind CSS classes are now shown inline in the editor. We’ve added support for the textDocument/documentColor method of the Language Server Protocol (LSP), so all LSP-based plugins now support this functionality out of the box.

Improvements for Angular

For projects with Angular 19, WebStorm now defaults to standalone mode for components, directives, and pipes. Quick-fixes have been added to help convert between standalone and non-standalone components. Unused standalone imports can be automatically removed during code reformatting or via a new inspection. Support for the @let syntax has also been improved.

Correct handling of `.prettierignore` in subfolders

WebStorm 2024.3 now properly handles .prettierignore files in subfolders with a package.json, ensuring ignored files aren’t formatted. A new option also lets you specify custom ignore files in Settings | Languages & Frameworks | JavaScript | Prettier.

Bundled Vue Language Server

The Vue Language Server is now bundled with WebStorm to enhance reliability and prevent issues with loading on WSL. We may do the same for Svelte, Astro, and other technologies in the future.

Improvements for Svelte

WebStorm 2024.3 provides support for the