Plugins for WebStorm You Need to Know About
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 them are compatible with other JetBrains IDEs, like PhpStorm and IntelliJ IDEA Ultimate, and can be installed from Preferences / Settings | Plugins or the Plugins tab on the Welcome screen. To explore the full list of available plugins, visit our plugin repository.
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 One Dark, Gradianto, Dark Purple, and Material Theme UI Lite. If none of the existing themes suit your needs, you could also create your own.
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.
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.
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.
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.
If you don’t like Nyan Cat but still like the idea of customizing the progress bar, there are a few alternatives available, such as Mario, Hadouken, Pokemon, and Duck Progress Bar plugins.
Keymap plugins
If you’re migrating to WebStorm from another editor, you may want to install the corresponding keymap plugin. Some available options include Vim, VS Code, and Sublime Text.
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.
GitToolBox
This plugin extends WebStorm’s built-in Git functionality with inline blame annotation status display, auto fetch, behind notifications, and a whole host of other features.
Atom Material Icons
Want to brighten up your theme with more colorful icons? The Atom Material Icons plugin is here to help.
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.
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.
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.
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.
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.
Smart Search
Need to google something when coding? WebStorm has a built-in Search with Google action for that – select the text you want to look up and invoke this action from the right-click menu. For more search options, you can install the Smart Search plugin. It adds some extra search options like Stack Overflow and Google Translate to the context menu.
CodeGlance
If you’re missing the minimap feature from other editors, you can add it to your IDE by installing the CodeGlance plugin or its updated version, CodeGlance 2. Both plugins support light and dark themes using customizable colors for syntax highlighting.
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.
That’s it from us today. What are your favorite WebStorm plugins? Share your thoughts in the comments below!
The WebStorm team
