DEV Community

Cover image for Top WebStorm Plugins To Level Up Your Productivity
Jamie Swift
Jamie Swift

Posted on

Top WebStorm Plugins To Level Up Your Productivity

A while ago I migrated from VS Code to WebStorm, and it’s been great. Like all JetBrains IDEs, it comes with a set of built-in features that makes every programmer’s life much easier. Still, even such a great tool can become even more amazing with a little optimization. Since I like experimenting with cool plugins, I thought I would share with you my pick of the tools that really improved my productivity in WebStorm.


VS Code Key Map

This is a real pearl, as it makes the transition from VS Code to WebStorm much easier (or is a life saver if you are switching between both). It lets you migrate and sync your keymaps so you don’t have to learn a new set of key cords to work effectively inside an IntelliJ-based IDE.

You can use it if VS Code keymap is not pre-installed in your IDE. A thing worth noting is that it doesn’t automatically set the keymap to VSCode after installation. You have to set it manually: Preferences > Keymap > Select VSCode

 

GitLive

This plugin is an absolute must to enhance WebStorm’s built-in Git functionality with real-time features such as online presence for team members and instant merge conflict detection.

GitLive adds a tool window to your IDE where you can see who in your team is online, what issues and branches they are working on and the changes they’ve made on those branches, which contributes to minimizing interruptions and context switching.

Instant merge conflict detection is a real game-changer. Indicators in the gutter of your editor show the difference between your changes and the changes of others. These update in real-time as you and your teammates are editing and provide an early warning of potential merge conflicts. This way you can resolve merge conflicts before they even happen!

Image description

 

AceJump

Do you know the feeling of accidentally bringing your caret to the wrong place while coding and poof, your trail of thought is gone? Let me tell you, it’s not great. Luckily, with AceJump you can quickly navigate the caret to any position visible in the editor. Simply hit "ctrl+;", type a character, then type the matching character to Ace Jump.
It takes a bit of time to get used to it (see a full demo here: AceJump in action), but believe me, once you get comfortable with using it, you would never want to go back.

Image description

 

Quokka

If you are a JavaScript developer, Quokka is a great tool to consider. It is a rapid prototyping playground in your editor, with access to your project's files, inline reporting, code coverage and rich output formatting. It runs JavaScript and TypeScript with instant feedback. Runtime values are updated and displayed in your editor next to your code, as you type. Code runs immediately as you type, on unsaved changes; no need to do anything manually or switch context. Error messages are displayed right next to the code that caused them. Console logs and identifier expression values are displayed inline as well.

Image description

 

Protobuf

This plugin provides complete protobuf support. It’s an alternative to bundled-in Jetbrains Official Protobuf Plugin and IMO it works much better. It supports most of the official plug-in functions and provides a lot of unique advanced features, such as automatic import, code formatting or more complete code prompts. It’s worth noting, that the creators are quite responsive to reported issues or features request which is a big plus for me.

Remember, that in order to use you need to disable Protol Buffer and gRPC, otherwise, it will not work properly. Recommended!

Image description


So that’s my selection of extensions for boosting your productivity in WebStorm.
I hope you found something interesting on this list and if you have some feedback don’t hesitate to reach out in the comments!

Top comments (13)

Collapse
 
timhub profile image
Tech Tim (@TechTim42) • Edited

Thanks for sharing,

I started to use Webstorm years ago, but I usually just used official plugins, and many of them plugins are quite new to me.

  • AceJump seems cool and efficient for navigating.
Collapse
 
davidedwards profile image
David

The list looks solid, I am fairly new to WebStorm myself so this post comes in handy!

Collapse
 
miketalbot profile image
Mike Talbot ⭐

IDK on Quokka, I keep thinking I'll use it and end up never actually being bothered. It's possibly because I use Wallaby (from the same company) and that is usually all I need.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

😂😂 I've a plugin called IntelliJ IDEA Keybindings in VSCode as I jumped from jetbrains ecosystem to VSCode for everything some years ago. No regrets, it made my life much easier as webdev.

Collapse
 
fjones profile image
FJones

If you're using both for some reason, I would also recommend this way... The keybinds are very consistent across the different JetBrains IDEs, whereas VSCode Plugins introduce some quite odd combinations at times. Granted, I've never been much of a fan of VSCode to begin with, but I from ye olde Eclipse days, I would think the JetBrains baseline is a better starting point than the VSCode one. This of course doesn't apply to anyone straight-up switching from one to the other.

Collapse
 
andrewgl profile image
Andrew

Thanks for the article, useful stuff! 👍

Collapse
 
jamieswift90 profile image
Jamie Swift

Thanks!

Collapse
 
devgancode profile image
Ganesh Patil

Great share!

Collapse
 
przemyslawjanbeigert profile image
Przemyslaw Jan Beigert

You forgot the ideavim ;)

Collapse
 
jamieswift90 profile image
Jamie Swift

Thanks for this suggestion :)

Collapse
 
clutcher profile image
Igor Zarvanskyi

Better Highlights is a plugin that can help you take your code comments to the next level. With support for wikilinks, highlighting, and linking to other comments and source code. Check it out here: plugins.jetbrains.com/plugin/12895...

Collapse
 
munzzz5 profile image
Akshay Bhandari

Why did you shift from VS code?

Collapse
 
jamieswift90 profile image
Jamie Swift

For me the main reason was work-related, but I have to admit that functionality that comes out of the box in Webstorm just makes your life easier.