Visual Studio Code (which is maintained by Microsoft), is one of the most popular open source code editors currently out there. Perhaps one of the reasons for this is the extensive ecosystem of extensions that currently exist. And while some IDEs may have the functionality that these extensions provide, the customization potential alone make it a very attractive offering for all the text editor user's.
In this brief guide, we'll go over the top 5 extensions I believe all web developers can benefit from. I'll go over what they do and how they can make your coding journey all the merrier. Let's jump right in!
Prettier
If you haven't heard about it Prettier is an opinionated code formatter that supports most commonly used programming languages; This allows teams to standarize code styles and save time/energy for the developers.
This extension will help you get used to setting it up and enable you things like automatically fixing formatting issues in your code, fixing the mix of single and double-quotes or an irregular use of semicolons.
Some of the supported technologies: JavaScript, TypeScript, Java, JSON, CSS, HTML, Vue, Angular, Markdown, YAML, and more.
GitLens
This extension combines the capabilities of Git and empowers them within the text editor, It allows you to learn who, why, and even when code was changed within the repository. All of this while also showing you the evolution of the codebase within the explore view
It also has other features such as:
- History revision navigation.
- Git Blame.
- Status Bar with further information about the current Git history.
Path Intellisense
This is a very simple, yet very powerful extension. Basicall what it does, is autocomplete the path to whatevery file you're typing. pretty cool, huh?
Import Cost
This extension shows the estimated size of an import package, this in my opinion is a very powerful tool because it helps in keeping track of the size of all added dependencies. If it's too large it'll show a nice big warning in red color so you won't miss it.
Quokka.js
This extension allows you to quickly prototype code in a playground within VS Code, and while this extension has a paid version, the free one is plenty enough showing you:
- Inline reporting.
- The result of the code execution within the same line.
- Runtime values and rich output formatting.
As you can see, we're barely scratching the surface of what customizing VS Code can look like. This flexibility is great, since it permits you to match your editor to your current needs