9 Extensions that every web developer should have
BG Photo by Sincerely Media on Unsplash
Visual Studio Code, or VS Code as most people call it, is the most used code editor among developers, being used by more than 34.9% of the developers in the world.
Being a free, open-source cross-platform code editor backed by one of the biggest names (Microsoft) only adds to it its popularity. Every month, the open-source community adds extensions to the marketplace. Here’s a list of 10 extensions for VS Code that can come in handy during your development. There’s no rocket science here — just a few simple tools to ease your work.
1. Auto Rename Tag
The name is pretty self-explanatory for this tool. Auto Rename Tag automatically renames tags in your code and helps you save time. If you have ever tried to rename a tag and spent more time finding the other tag in the pair than the actual renaming, then this extension is for you. Change your tag name in one place (opening or closing) and the extension takes care of the other one. No more searching, and no more forgetting to rename tags leading to errors in your code.
Autocomplete in Action
2. Bracket Pair Colorizer
Have you ever gotten stuck trying to figure out where a bracket starts and where the block ends? Or have you ever wanted to delete a bracket and not been able to find its pair?
Then, this is the extension for you. The user can define which characters to match and which colors to use. This cool extension, with 2.2 million downloads, was developed by CoenraadS and is a must-have for everyone who writes code.
Color-paired brackets
3.SCSS IntelliSense
Who even uses plain CSS anymore, that may be an exaggeration. But SASS and LESS have become so popular that front-end developers are using CSS pre-compilers along with frameworks for increased productivity and easier usage.
Naming SCSS variables is very tricky as there might be 100s of them and often developers end up using long and creative names to help them identify these variables with their exact purpose. But remembering them for re-use is trickier. While we have Intellisensse within vs code for most things, this extension called SCSS IntelliSense, makes the job easier for SCSS variables as well.
4. Beautify
This is one of the most popular extensions out there to help you reformat your code. If you believe in the Clean Code principle, then this extension can definitely help you make your code look neater.
You can customize almost all of your settings — like indent size, new lines, etc. And you can also customize language-specific settings. It was developed by HookyQR and has over 4 million downloads. Install this on your VS Code, and beautify your code with a simple keyboard shortcut.
5. Code Spell Checker
This might sound a little too basic, but spell checking is something we often ignore while writing code.
Of course, almost everyone knows the spelling of everything we write, but when different coders use different styles, it’s hard to check for each and every word. Especially when you’re using naming conventions like camelCase or snake_case, the default spell checker might not be able to catch your mistakes every now and then. And there’s nothing more embarrassing than finding a spelling mistake in a code review or even when you transfer the code to the client. So it’s always better to be safe than sorry.
This one also has over 1 million downloads.
Spell checker highlighting typos in each file
6.TypeLens
TypeLens is a very cool extension that gives you the power to check how many references of a function are present in a project and shows the usages without you having to actually go to the particular file where it’s being used.
In the below example, you can see that on top of test(), it highlights it’s being used in two places. And when you click on it, it actually shows the places where it’s used in a pop-over. Currently, it works in TypeScript, JavaScript, SCSS, and less files.
References to a function
6. Color Highlight
The Color Highlight extension is so simple that all it needs is one line to understand: It styles CSS/web colors found in your code.
Colors highlighted in CSS
npm Intellisense
If you’re a JS developer like me and half of the developers in the world, you’ll be using npm on a daily basis. And what’s better than an extension that shows you suggestions and automatically completes your npm module names when you’re trying to import them.
This extension, with over 1.5 million downloads. may look really simple, but it really comes in handy when you’re trying to import a new or unknown npm package.
Image — Christian Kohler
GitLens
GitLens is “Git supercharged” for VS Code, as the creator likes to say. It integrates almost all Git capabilities — like pull, push, revert, etc. — into an easy-to-use interface and provides many useful features, like current-line blame, changes (diff) hover, a repositories view, etc.
With over 4 million downloads, it’s one of the best Git integrations for VS Code.
Current-line
Changes (diff) hover
Repositories view