paint-brush
Top 5 WebStorm Extensions For Productivity by@jamieswift
654 reads
654 reads

Top 5 WebStorm Extensions For Productivity

by Jamie SwiftJuly 12th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

JetBrains IDEs come with a set of built-in features that makes every programmer’s life much easier with a little optimization. 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. [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 what changes they’ve made on those branches.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Top 5 WebStorm Extensions For Productivity
Jamie Swift HackerNoon profile picture


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!


GitLive

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.


AceJump

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.


Quokka

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!


Protobuf



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!