Plugin Highlights Plugins Tips & Tricks

The Best Plugins for WebStorm

Read this post in other languages:

Note: This post was updated in October 2023.

In this blog post, we’ll look at some of the best plugins you can install for WebStorm. All of them are compatible with other JetBrains IDEs, such as PhpStorm, PyCharm, and IntelliJ IDEA Ultimate. You can install the plugins from your IDE using Settings | Plugins.

With WebStorm, you can get straight to work without installing any additional plugins – all the core functionality will work out of the box. But what if you want your coding tool to feel a bit more personal or need some extra functionality? Here are some of our team’s favorites.

Plugins to customize the UI

Theme plugins

Looking for something a little more you than the default IDE themes? There’s a huge choice of custom themes to choose from. Our favorites include One Dark, Gradianto, and Dark Purple. You can always create your own if you can’t find the perfect theme on JetBrains Marketplace.

Theme plugins gif showing going through the list of themes and how they look in the IDE.

Once installed, the themes are available in the Theme dropdown menu under Settings | Appearance & Behavior | Appearance. Another alternative is to use the shortcut ^` (macOS) or Ctrl+` (Windows, Linux) to bring up the Switch… popup and choose Theme from there.

Nyan Progress Bar

Want to make your progress bar more fun to look at? The Nyan Progress Bar plugin can help you with that.

tab-labels

If you don’t like Nyan Cat but do like the idea of customizing the progress bar, there are other alternatives available, such as the Mario, Pokemon, and Duck Progress Bar plugins.

Atom Material Icons

Want to brighten up your IDE with more colorful icons? The Atom Material Icons plugin is just what you need.

Atom Material Icons plugin installed shows the new icon set in the IDE.

As an alternative, you can also try the Extra Icons plugin.

Plugins to learn or teach

Key Promoter X

Want to learn new shortcut combinations and become more keyboard-centric? The Key Promoter X plugin helps make this process a lot less daunting. With it installed, any time you use the mouse on a button inside the IDE, it’ll show you the keyboard shortcut you could’ve used instead.

Key Promoter X plugin installed and showing the shortcut that could be used instead of using the mouse.

Presentation Assistant

Need to present a demo, record screencasts, or do pair programming? Install the Presentation Assistant plugin, which displays the shortcuts you’re using and makes it easier for the audience to follow along with your actions.

tab-labels

Plugins for the editor

Rainbow Brackets

This plugin color codes each pair of brackets, which can help you if you’re struggling to identify where each code block starts and ends.

Rainbow Bracket plugin installed showing different colored bracket sets in the editor.

With default colors, the plugin works better in combination with dark themes. If you’re using a light theme or want to experiment with the defaults, you can create your own color scheme. You can do so in Settings | Editor | Color Scheme | Rainbow Brackets.

Indent Rainbow

This plugin is like Rainbow Brackets but for indents. Its main goal is to make indentation more readable. If the wrong indentation is used, the plugin will highlight the line in red, helping you find indent problems faster.

Indent Rainbow screenshot showing the different colored indents in the editor.

Like Rainbow Brackets, the default colors work better with dark themes. You can play around with the opacity of the indent colors in Settings | Other Settings | Indent Rainbow and make it more suitable for light themes or your specific needs.

Keymap plugins

You may want to use the corresponding keymap plugin if you’re migrating to WebStorm from another editor. This will help you get coding quickly as you can then use the keyboard shortcuts you are already familiar with. Some available options include Eclipse, VS Code, and Sublime Text.

Image of the Keymaps available under Settings | Keymaps with the option to add further keymap plugins.

IdeaVim

Do you want a keyboard-centric editor with the support of an IDE? The IdeaVim plugin extends the JetBrains IDEs with the power of Vim, which can help you edit your code even more effectively.

IdeaVim screen recording showing deom of the key movements.

String Manipulation

If you need support for advanced text manipulation actions like switching from camelCase to kebab-lowercase, the String Manipulation plugin is what you’re looking for. You can find more information on the supported actions here.

A screen recording showing the String Manipulation plugin converting a lorem ipsum text to all caps

AceJump

If you like experimenting with navigation features, try out the AceJump plugin. It lets you jump to any symbol in the editor with just a few keystrokes. To learn more about how this plugin works, explore the detailed usage instructions available here.

AceJump plugin screen recording

Randomness

If you’re always getting stuck coming up with random data for your project, this is the plugin for you. It allows you to insert random numbers, strings, and UUIDs.

Randomness plugin screenshot

To insert random data, press Alt+R on Windows / Linux or ⌥R on macOS and choose the type of data you want to insert. A different value will be inserted each time you use the action.

Plugins for added functionality

AI Assistant

AI Assistant was introduced to the JetBrains family of IDEs during the 2023.2 release. It is developed and maintained by JetBrains, with regular updates. It provides you with powerful AI-powered features for software development, such as code generation, context-aware smart chat, and project-aware actions.

AI Assistant plugin showing a content aware response to a question.

GitToolBox

This plugin extends WebStorm’s built-in Git functionality with inline blame annotation status display, auto fetch, behind notifications, and a whole bunch of other useful features.

GitToolBox plugin screenshot

WebStorm has a built-in Search with Google action that you can invoke from the context menu. You can extend the search options by installing the Smart Search plugin. It adds search options like Stack Overflow and Google Translate to the context menu.

Smart Search plugin screenshot

CodeGlance Pro

You can add a minimap feature to your IDE by installing the CodeGlance Pro plugin. The plugin displays a zoomed-out overview in the editor pane, allowing you to quickly scroll and jump straight to sections of code you are interested in.

CodeGlance Pro plugin screen recording

That’s it from us today. To explore the complete list of plugins that are available for WebStorm, visit our JetBrains Marketplace plugin repository.

Do you have any favorite plugins we’ve missed? Share them in the comments below!

The WebStorm team

image description