WebStorm is an integrated development environment for JavaScript and related technologies made by JetBrains. Like other JetBrains IDEs, it makes your development experience more enjoyable, automating routine work and helping you handle complex tasks with ease. It combines the intelligence of IntelliJ with the effectiveness of VS Code.
WebStorm also allows users to create and install different plugins for a more personalized experience. JetBrain offers a platform for users to search for their preferred plugins, and as of July 2021, there are more than 2000 plugins for WebStorm alone.
Without further ado, let's take a look at some of the best WebStorm plugins for 2021.
AceJump
There's nothing more infuriating to stop your trail of thought to navigate your caret to the exact character you want. It's even worse when sometimes you bring your caret to the wrong place by accident. With AceJump, those moments will vanish.
AceJump allows you to quickly navigate your caret to your desired position visible in the editor.
Click "Ctrl +;", type a character, then type the matching character to AceJump. This plugin saves you from taking your hands from the keyboard to go somewhere in your code.
If you want to go to a specific variable in your code, just activate the AceJump shortcuts and type the name of your variable. The plugin will detect all instances of that variable present in your screen, and you just have to choose which line you would like your caret to go. With the right shortcuts, you can also easily go to the beginning, end, and first character of every line.
Tabnine AI Code Completion
Still on the topic of saving time, one of the pain points of a developer is usually writing every single simple function or line every time. This issue is solved with Tabnine AI Code Completion!
Tabnine is an AI-powered code completion extension to help you code. It is powered by machine learning models trained on lines from trusted Open Source code on GitHub. This plugin works in various IDEs and different languages, including JavaScript, Python, Java, TypeScript, Rust, Swift, and more.
You can see two gifs of code with and without Tabnine to see the difference this plugin brings. It predicts what you will potentially create according to your object or function. Now, instead of having to type console.log("hello world"), you can just start typing, and Tabnine will finish the job for you.
CodeGlance
By this time, you've probably heard of the minimap feature in the Sublime text editor. What makes it so great is that it shows you exactly where you are in a file which, in turn, makes it easier to find sections of code that you're looking for. And, by clicking on the specific piece of code, your editor will go to it.
To have this functionality you don't need to switch to Sublime, though. The CodeGlance plugin brings this functionality to IntelliJ. It embeds a minimap like the one found in Sublime into your IntelliJ IDE’s editor pane. It also works with both light and dark themes and uses your customized colors for syntax highlighting.
GitToolBox
By now you know that, as a developer, you'll not only spend a lot of time in your IDE but you’ll also spend a lot of time using git. As a result, it's vital that you have an IDE with excellent git integration get allows you to perform your git actions from within your development environment.
Fortunately, JetBrains’s range of IDEs features some of the best git integrations on the market. With the GitToolBox plugin, you’ll be able to extend the features these IDEs already offer. Its features include enhanced status display, auto fetch at fixed intervals, inline blame annotation, commit dialog completion, behind notifications, and more.
JSON Parser
JSON files are typical in a coding world. Whether you're creating or parsing a JSON file, formatting and validating JSON can be time-consuming. This plugin takes care of this tedious operation for you.
JSON Parser is a lightweight plugin for validating and formatting JSON strings. With this plugin, you can easily read and format JSON files in the proper way. You will also have the possibility to see your JSON file in different ways - Pretty, Raw, and Tree.
IDEA Mind Map
Before you code, you sometimes have to sit down with your team and hash out the best solution for your problem. With remote work becoming more popular within companies, the old idea of using the whiteboard might not work anymore.
With this in mind, IDEA Mind Map created an easy way to create mind maps easily accessible within WebStorm. You now can create and share intricate mind maps with your team. IDEA Mind Map saves the files as plain-text files in a Markdown compatible format for you to easily see and share the file. It also can be password protected with AES-256 encryption. Now you can easily create mind maps and solve problems or challenges your team faces.
Grep Console
As you know, grep is a powerful that allows you to search for strings in a file or groups of files. In fact, it’s considered one of the most useful commands in any Unix system. Typically, you’ll need to use the terminal to execute grep commands.
The Grep Console plugin brings this functionality to your IntelliJ-based IDE. It allows you to open a grep console directly from your workspace. From there, you’ll be able to execute grep commands, filter out unwanted text, highlight matches, change the colors of matching text and lines, output the results into a new console, and more.
React Snippets
React has become a very popular choice for front-end developers. Maintained by Facebook, React is an open-source front-end JavaScript library for building user interfaces or UI components in your application. It supports both functional and class-based components.
This plugin makes the life of a React developer easier. You can now construct a skeleton for a React file with a few steps: instead of writing every line out, you can simply choose a set template from this plugin and start working on it. You will have a list of different triggers that can do various things for you. From composing a class component skeleton to auto-filling props functions, this plugin will help you quickly create a stable React environment for your project.
Duckly
We couldn't create a list of plugins without mentioning ours. Duckly is here to make pair programming a breeze.
Duckly is a video chat tool built for developers with direct integration to the IDE so you can talk, share your code in real-time, and easily collaborate with your team. It enables remote developers to work as if they were side by side.
This plugin proves itself necessary by the day. With remote work becoming the norm throughout companies due to COVID-19, the ability to pair-program is interrupted by bad WiFi signals or background noise. Duckly provides the solution to that by allowing you and your team to share the same view while coding. Duckly is great for pair programming, code reviews, debugging sessions, and much more.
Rainbow Brackets
Sometimes it's the tiny details that matter the most. While it's easy to understand which bracket is paired with which on a small file, things tend to get more complicated when you have larger and more complex functions. There isn't a developer who hasn't spent a few minutes trying to track which closing bracket matches with a specific opening bracket.
Let's face it, when coding, you'll deal with brackets upon brackets and even more brackets from round ones, to square ones and squiggly ones. Obviously, this can become complicated when trying to figure out which bracket closes which block of code.
Luckily, the Rainbow Brackets plugin solves this problem. By showing bracket pairs in specific colors, it makes it easier for you to see where a code block starts and where it ends. This eliminates confusion and allows you to save time when writing code.
This plugin is effective for reading code, working with spaghetti code, or just for your sake of mind to always know where every bracket opens and closes.
Prettier
Formatting code is that one action that everybody desires, but no one wants to actually do it. It's hard to manually format an entire file, but it's even harder to try to read that same file a while later. Formatting, then, is a crucial part of code that is often overlooked.
Prettier makes it so formatting is never an issue anymore. This plugin is a formatting extension that automatically formats your code for you every time you save it, so you don't have to worry about setting the right amount of spaces for indentation every time you create a file.
It is an amazing plugin for newer developers who aren't as familiar with the best practices of formatting code. It is also a good plugin for more advanced developers, who can spend their time on actual development instead of figuring out the correct indentation for multiple closing brackets.
String Manipulation
Whether you need to sort, increment, or decrement strings for purposes of your application or just based on your preferences, a string manipulation tool can be extremely helpful. And that’s where the String Manipulation plugin comes in.
It gives you a full suite of string manipulation tools that allow you to switch case, toggle between different cases, increment or decrement numbers, create sequences, sort lines, shuffle characters, do conversions, and more. Moreover, although these actions are available in your IntelliJ-based IDE’s Edit menu, the plugin allows you to set up your own keyboard shortcuts.
Ultimately, this plugin saves you time and will make you more efficient when writing code.
Kubernetes
Development is not always coding. It can also mean building and maintaining your project. If you don't have an experienced DevOps person by your side, you might feel lost in the world of Kubernetes.
Kubernetes is an open-source system for automating your application's deployment, scaling, and management. Designed by Google and maintained by the Cloud Native Computing Foundation, Kubernetes gives you the ability to make sure your project is behaving as it should. For more detailed documentation on what Kubernetes can provide, visit their page.
This plugin is here to help developers see and interact with their clusters and pods without having to ever leave their IDE. You can do multiple things through this plugin, including:
- Browsing cluster objects
- Applying YAML configurations from the editor
- Running shells in pods
- Switching contexts and namespaces
- Editing resource configuration.
Dart
Dart is an open-source, object-oriented language developed by Google. It is made for web and mobile applications and supports functional and reactive programming. If you want to know more about the language, click here to see their website.
This plugin provides you assistance for coding in Dart. It includes code completion, formatting, navigation, and more. However, the main feature of this plugin is that it can detect problems with your code before you compile it, and it suggests ways to fix them.
Dart is an excellent plugin to use, especially for those who aren't used to the language. It is a good way to experiment with the language, utilizing the plugin as crutches to properly compile the application. The plugin also provides a built-in debugger, providing another type of assistance for developers in their journey with the language.
