As time passes and we continuously automate our mundane tasks, the role of extensions in VSCode have never been more important. But our options are not limited just for that. Are you looking for new themes? Enhanced highlights? Code suggestions? There’s a VSCode extension for that.
In this article I’ll go through a list of extensions that I always have installed and helps me on a daily basis.
1. GitLens
GitLens is a massive help when it comes to working on a codebase with multiple collaborators. With it you can pretty much do anything you would in your browser. Check branches, commits, file histories. It even highlights every line and gives you detailed information who modified it and when.
2. LiveServer
LiveServer is a lightweight extension that lets us serve HTML files locally while developing. You can start/stop the server with a single button click and it also has hot reload built in, so you’ll always see your changes displayed in the browser.
3. Live Share
Live Share is developed and maintained by Microsoft to help developers work together. It became even more relevant since remote working became the new norm and developers need a way to work/pair together. It enables real-time collaboration so you and your co-workers can edit/debug or work on a new feature together without any delay. I can’t recommend this tool enough!
4. Code Spell Checker
One common issue you can get by typing all day is having typos in your code. Code Spell Checker helps you with that by highlighting any word that’s not included in the English dictionary.
5. Color Highlight
Color Highlight helps you visualise your RGB or HEX colours defined in your codebase and displays what that colour looks like. It also works in other files extensions than CSS, so you can use it in JS, HTML etc.
6. indent-rainbow
Indent-rainbow is possibly one of my must haves when it comes to visual extensions. It applies different colours on your indentations. While you can use it with any language, it excels in situations where the language you use doesn’t have brackets (Python). Give it a try, you won’t regret it!
7. Window Colors
Window Colors is a really simple extension that can help you a lot with your workflow. It applies a different colour on your open editors. The main benefit of this is when you are working on multiple projects/repositories at the same time and this way you can easily differentiate them. Or you can just use it to make your editor pretty, either way it’s a win-win.
8. Auto Rename Tag
If you are working on the frontend, this tool is a must have. Auto Rename Tag lets you change your opening and closing HTML tag at the same time. There’s no need to do it twice as you might have been doing until now.
9. Markdown Preview Enhanced
When I started to realise that I spend more and more time writing Readme files, I decided to look into a way to save time and also provide better results. That’s when I found Markdown Preview Enhanced and it immediately became a favourite. It provides shortcuts to speed up your typing and also gives you a live preview window in your editor where you can see any change you make instantly.
10. Import Cost
The more tools and libraries we have available, the easier it is to bloat our apps. Import Cost gives you the exact size how much a given import costs you. I definitely think it can help to improve the situation by making you aware of the cost.
There are tons of extensions out there and I’m sure all of them deserve more praise and recognition. It was difficult to limit this list to 10 only, but please do let me know which ones are your favourite and would suggest to others.