Plugins for WebStorm You Need to Know About

Posted on by Ekaterina Ryabukha

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? Thanks to the wonderful folks from our community, we’ve got a bunch of plugins that can help with that!

In this blog post, we’ll take a look at some of the handiest plugins that have been developed for JetBrains IDEs. All of these plugins are compatible with other JetBrains IDEs, like PhpStorm and IntelliJ IDEA Ultimate, and can be installed from Preferences/Settings | Plugins. Of course, it’s not an exhaustive list of all the plugins available as there are hundreds of them in our repository. If there is a plugin you like that we haven’t mentioned here, let us know what it is in the comments.

Theme plugins

Looking for something a little more you than the default IDE themes? There’s a variety of custom themes that you can choose from. The most popular themes include Material Theme UI, One Dark, Gradianto, and Dark Purple. If none of the existing themes suit your needs, you could also create your own.

switching-themes

Once installed, the theme will be available in the Theme dropdown menu under Preferences/Settings | Appearance & Behavior | Appearance.

Key Promoter X

While becoming keyboard-centric can greatly increase your productivity, it’s never been easy to get used to all the new shortcut combinations. The Key Promoter X plugin helps make this process a lot less daunting. When you use the mouse on a button inside the IDE, it shows you the keyboard shortcut you could’ve used instead. For buttons that don’t have a shortcut, the plugin suggests assigning one. All this helps you rely on the mouse less and less so you can eventually code faster.

key-promoter-x

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-brackets

With default colors, the plugin works better in a 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 it in Preferences/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

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

Nyan Progress Bar

Want to make your progress bar look a little bit nicer? The Nyan Progress Bar plugin can help you with that.

nyan-progress-bar

If you don’t like Nyan Cat but still like the idea of customizing the progress bar, there are a couple of alternatives available, such as Hadouken and Duck Progress Bar plugins.

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.

string-manipulation

Quick File Preview

This plugin can help you speed up the process of browsing through the content of each file. Specifically, it allows you to preview project files in the editor whenever you select them in the Project view.

quick-file-preview

Atom Material Icons

Want to brighten up your theme with more colorful icons? The Atom Material Icons plugin is here to help.

atom-material-icons

As an alternative, you can also try the Extra Icons plugin out. However, bear in mind that it comes with support for fewer JavaScript-related icons.

Codota

If you feel like experimenting with AI-based code completion, the Codota plugin is a good place to start. It makes WebStorm’s completion suggestions even more relevant, further increasing your coding speed. If you’d like to learn more about how this plugin works, explore its dedicated page and Codota’s website.

codota-completion-suggestions

If you decide to give Codota a go, bear in mind that with the deep completion option enabled, you agree to send some additional information to the server. You can read more about it and decide whether you’re ok with this here.

AceJump

If you feel like experimenting with navigation features, you can try the AceJump plugin out. 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

IDEA Mind Map

Like organizing your ideas with mind maps? Then you may find the IDEA Mind Map plugin useful as it lets you create and edit mind maps represented by MMD files.

mind-map-idea-plugin

Randomness

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

randomness-plugin

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

Presentation Assistant

Need to present at company events, 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.

string-manipulation

That’s it from us today. What are your favorite WebStorm plugins? Share your thoughts in the comments below!

The WebStorm team

Comments below can no longer be edited.

11 Responses to Plugins for WebStorm You Need to Know About

  1. K3N says:

    May 22, 2020

    Thanks Ekaterina. Nice write-up and lots of good stuff in here.

    • Ekaterina Ryabukha says:

      May 22, 2020

      Thank you! I’m happy to hear that you find it helpful 🙂

  2. Lucas Dimas says:

    May 24, 2020

    Very nice post! Found a lot of new and cool plugins that I didn’t even think about searching for, haha, thank you Ekaterina!

    • Ekaterina Ryabukha says:

      May 25, 2020

      Thank you! When I was working on this blog post, I was surprised to find out about some of them too 🙂

  3. john says:

    May 25, 2020

    Not forgetting Code Glance plugin (https://plugins.jetbrains.com/plugin/7275-codeglance) which display bird-eye view of code.

    Since Microsoft Visual line of IDE have this as standard feature (
    https://code.visualstudio.com/updates/v1_10#_preview-minimap
    https://docs.microsoft.com/en-us/visualstudio/ide/how-to-track-your-code-by-customizing-the-scrollbar?view=vs-2019) , wonder if this can be part of standard feature of JetBrains IDEs as well ?

    • Ekaterina Ryabukha says:

      May 26, 2020

      Hi John,
      I thought about mentioning CodeGlance, however, it hasn’t been updated for a while by the author and had some controversial reviews, so I decided not to mention it in this blog post.
      If you want to have the minimap feature in our IDEs, please vote for this issue: https://youtrack.jetbrains.com/issue/IDEABKL-5794.

  4. Stephen Musoke says:

    June 16, 2020

    Randomness does not install in PHP Storm 2020

    • Ekaterina Ryabukha says:

      June 17, 2020

      Hi Stephen,
      Can you share a bit more details, please? How did you try installing it? Did you get any errors when trying to install it? Does other internet-related functionality work in IDE (https://www.jetbrains.com/help/idea/working-offline.html)? Are there any exceptions in the IDE logs (Help | Collect Logs…)?

  5. Zen says:

    June 20, 2020

    What is the name of this specific theme? https://d3nmt5vlzunoa1.cloudfront.net/webstorm/files/2020/05/switching-themes.png

    • Ekaterina Ryabukha says:

      June 23, 2020

      Hi,
      It is Material Deep Ocean which is available within the Material Theme UI plugin.

      • Zen says:

        June 23, 2020

        Thank you very much.