Get past releases and previous versions of WebStorm. Get past releases and previous versions of WebStorm. What's New Features Learn Buy Download Get past releases and previous versions of WebStorm. Get past releases and previous versions of WebStorm. WebStorm has a powerful visual git tool, allowing for easy commits, visual diffing, merging, push/pull, rebasing, and inspecting the VCS history of a project. GitHub is supported natively - you can check out a project directly from GitHub.
Tips & TricksWith 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.
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.
Webstorm Profiler
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.
Quick File Preview
Note: Starting with v2020.3, this functionality is available out of the box.
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.
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.
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.
If you decide to give Codota a go, bear in mind that with the deep completion option enabled, you agree to sendsome 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.
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.
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 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.
That’s it from us today. What are your favorite WebStorm plugins? Share your thoughts in the comments below!
The WebStorm team
Features
Don't Compromise
on the Development Experience
The smartest editor
Use the full power of the modern JavaScript ecosystem – WebStorm’s got you covered! Enjoy the intelligent code completion, on-the-fly error detection, powerful navigation and refactoring for JavaScript, TypeScript, stylesheet languages, and all the most popular frameworks.
Mobile
- Ionic
- Cordova
- React Native
- Electron
Debugger
Debug your client-side and Node.js apps with ease in the IDE – put breakpoints right in the source code, explore the call stack and variables, set watches, and use the interactive console.
Debugger
Debug your client-side and Node.js apps with ease in the IDE – put breakpoints right in the source code, explore the call stack and variables, set watches, and use the interactive console.
Seamless tool integration
Take advantage of the linters, build tools, test runners, REST client, and other tools, all deeply integrated with the IDE. But any time you need Terminal, it's also available as an IDE tool window.
Unit testing
Run and debug tests with Karma, Mocha, Protractor, and Jest in WebStorm. Immediately see test statuses right in the editor, or in a handy treeview from which you can quickly jump to the test.
Integration with VCS
Use a simple unified UI to work with Git, GitHub, Mercurial, and other VCS. Commit files, review changes, and resolve conflicts with a visual diff/merge tool right in the IDE.
What’s New in WebStorm 2021.1
Smarter completion for JavaScript
ML-assisted completion for JavaScript and TypeScript is now enabled by default. Additionally, suggestions for symbol names have become a bit smarter.
Improvements for HTML and CSS
A built-in HTML preview, better support for Stylelint, and details about selector specificity in CSS will help you work more productively.
Usability enhancements
This version is packed with new settings for choosing editor font weight, the ability to maximize tabs in the split view, and fixes for a lot of known issues.
Why WebStorm
Get up and running quickly
Start working on your projects immediately instead of wasting time juggling multiple plugins. With a variety of built-in developer tools and out-of-the-box language and framework support, there’s everything needed for productive JavaScript development.
Increase your productivity
Don’t spend your time going back and forth between the terminal and text editor or on things that can be automated with the help of refactorings and quick fixes; it’s what the IDE is best at. It puts the most critical developer tools like the debugger and Git at your fingertips.
Webstorm Project Example
Write better code with less effort
Write cleaner and more reliable code as the IDE runs dozens of inspections as you type and promptly detects potential errors and redundancies. Save time exploring the code base with autocompletion that suggests which variables and methods are most relevant in the current context.
Swiftly find what you need
Webstorm Productivity Tips
Get around your code faster regardless of how large your projects are. Jump to the definition for any class, function, method, variable, or component and find its usages in just a few clicks. Easily navigate through the file you have opened with an at-a-glance view of its structure.
Tailor the look and feel to your liking
Don’t feel like using the defaults? Adjust the appearance and behavior of the IDE by playing around with themes, code styles, plugins, and more, so that it fits your unique needs better. You can also automatically share your custom settings between different instances of WebStorm.
Join our customers
Teams all over the world use WebStorm. Join them and get the best development experience
What our customers say