DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 (12)

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

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

Thanks!

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
 
przemyslawjanbeigert profile image
Przemyslaw Jan Beigert

You forgot the ideavim ;)

Collapse
 
jamieswift90 profile image
Jamie Swift Author

Thanks for this suggestion :)

Collapse
 
patilganesh1010 profile image
Ganesh Patil

Great share!

Collapse
 
munzzz5 profile image
Akshay Bhandari

Why did you shift from VS code?

Collapse
 
jamieswift90 profile image
Jamie Swift Author

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.

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!