I can understand why Visual Studio Code is one of the most popular IDE, i mean just look at its features list, it comes with a plethora of features such as debugging, syntax highlighting, intelligent code completion, snippets, code refactoring and so forth, it provides every developer’s wants, including features that they didn’t even know they needed, but what really sets it apart from others is its extensibility.
The number of VSCode extensions are almost limitless, that’s why I’ll provide you with an overview of the top 09 VSCode extensions in this article that can make programming fun for beginners and increase productivity for the more seasoned developers. So, let’s begin.
Note: The titles are in no particular order.
Settings Sync
Modern developers often need to work on more than one system, so if you are one of them then you’ll definitely find this extension pretty useful. From settings to keyboard shortcuts to other VSCode extensions, it allows you to sync pretty much everything you customize on VSCode across all your machines.
Let’s say you’re a programmer who works on both home and office computer. Let’s be honest you will need to change your settings from time to time depending on the projects you are doing. Changing your settings manually on both does not only requires effort but is also quite time-consuming, so in order to avoid wasting your time and effort, I recommend that you use this extension so that all the changes you make are automatically synced on all your machines.
Live Server
This VSCode extension can be used for setting up a local development server using which you easily can test out newly created static and dynamic pages.
The changes you’ve done to the code will be instantly reflected in the browser once you’ve saved the code. This will not only help you to spot errors faster but will also make it even more easier to do some quick experiments with your code.
Remote – SSH
This VSCode extension enables you to use any remote machine with an SSH server as your development environment. This can make development and troubleshooting even more simpler and easier in a wide variety of situations.
Also, there is no need for the source code to be on your local machine, since the extension executes commands and other extensions directly on the remote machine. You can open any directory on the remote machine and work with it just as you would if the directory were on your own machine.
Prettier
Here comes one of my most favorite VSCode extensions. Keeping the code clean and properly aligned is not easy, it becomes an even bigger issue if you have multiple people working on a single project. It’s not easy to work on code written by others if it’s not properly indented and separated.
Prettier helps you by formatting your code in a structured way every time you save it, this not only keeps your code clean and properly aligned, but also helps you save time that you would otherwise have spent formatting your code.
Bracket Pair Colorizer
Brackets troubles a lot of developers especially those working with huge projects, they become even more problematic when you have spaghetti code. One of the most productive VSCode extensions, bracket pair colorizer will save you from all the stress that originates from “brackets”. It helps you find the opening and closing brackets more easily by giving them matching colors. Also, the fact that they’re colored makes your code more readable.
So, if you often find yourself falsely navigating through those confusing curly brackets when inspecting tons of nested long codes; this one is a must-have for you.
GitLens
A highly customizable extension, GitLens supercharges the current Git functionalities of the VSCode. It allows you to quickly glimpse into whom, why, and when a line or code block was changed (among lots of other features). With the help of this extension you will be able to better understand code thus making it easier than ever to contribute to 3rd-party projects.
Along with being powerful and feature rich, it’s also highly customizable (as mentioned above), so if you don’t like a particular setting, no problem, quickly turn them off or change how they behave via the interactive GitLens Settings editor.
JavaScript (ES6) Code Snippets
I don’t think any modern-day web developer can survive without having to work with at least one JavaScript framework. Regardless of what framework you use, typing the same generic codes in different projects ought to decrease your workflow.
While VSCode already includes built-in JS IntelliSense, this handy little library extension enhances that experience by adding some very useful snippets of JavaScript codes for the idle developer. It comes with pre-built support not just for JS but also for Typescript, JS React, TS React, Vue, and HTML. In the VSCode Marketplace, code snippets for other JavaScript frameworks, such as Angular, are also readily available.
It will help you avoid typing the same generic codes over and over again which will in-turn lead to a sharp increase in your current productivity. So, if you’re a JavaScript developer, say ‘hi’ to your new best friend.
Code Spell Checker
It’s not easy to maintain professional codebases that are free of typos and errors, especially if English is not your first language. So, if you are a non-native English speaker (like me) and you are worried about screwing up spellings in your comments, strings, and plain text as you type than you should definitely go for this amazing extension as it will ensure that your code is free of typos and errors.
Even, if English is your first language, typos are inevitable — you don’t want to spend time finding them, especially if you have spaghetti code. So, make sure that you install this extension, whether you’re fluent in English or not.
Debugger for Chrome
Another great VSCode extension for JavaScript developers, Debugger for Chrome is surprisingly smooth contrary to debuggers in other IDEs. Developed by Microsoft, it provides a set of robust features including allowing you to set breakpoints, debug scripts added dynamically, and so forth, which aims to enhance your daily workflow significantly.
So, if you are a JavaScript developer, and you are tired of wasting your precious time in making those small changes and resolving & catching bugs, then you’ll definitely find this VSCode extension pretty helpful.
That’s all folks!