Our Favourite VS Code Extensions! 🚀

Subha Chanda, Good one and very useful!

Here are few that I use, may be useful too,

Theme as Night Owl and in extreme love with it!

Theme and Icon Pack 🚚

The visual appearance of the IDE is important to me. I use the Material Theme by Mattia Astorino and along with the theme, I use the Material Icon Theme by Philipp Kief. I use the Material Theme Ocean High Contrast Color theme for the editor.

Another extension I use to beautify my editor is the Color Highlight. It just highlights the colors in my code.

Code Formatter and AutoComplete 🛺

Prettier, obviously! Who doesn't use this! Prettier is an awesome extension that format the code beautifully. The format on save feature is always on in my editor. I prefer to use 2 spaces and single quotes. I've updated the prettier settings accordingly and now each time I save my document, it formats my code with 2 spaces and single quotes. It also adds the semicolons at the end which I forgot to put every time.

Gif from https://scottsauber.com

Auto Rename Tag by Jun Han! This does exactly what it says. It automatically renames the corresponding tag. It is useful to speed up the workflow.

HTML CSS Support by Ecmel is the next one in my list. It gives the ability to auto-complete the class and ID attributes in the HTML file. It'll show all the classes and ids to the HTML file which you have defined in your CSS file.

Bracker Pair Colorizer 2 allows the matching brackets to be identified with colors. You can also specify which colors to use to colorize your bracket pairs.

Miscellaneous 🚡

Live Server by Ritwick Dey. I think most of you know what this extension does. It creates a local server which supports live reload. Kind of like Nodemon for static pages.

Quokka. I've recently started using it and it already seems awesome to me. Quokka is used for testing JavaScript code in the Visual Studio code editor. With Quokka, you don't have to console.log() everything. It works like a live server for your JavaScript or TypeScript code.

Gif from Quokkajs.com

Live Sass Compiler is also an awesome extension if you are working with Sass. I used it before. It compiles your Sass file in the runtime. It is based on the Libsass library. But libsass doesn't support some latest Sass features like @use. So instead of using this, I've started to use their official npm package with the command line.

Some More Useful Extensions Shared By the Awesome Tapas Adhikary

File Header Comment allows you to add a timestamp, copyright or any other important information you want to add to the file as a comment.

Import Cost This is quite a useful extension. It shows the size of the file we are importing inline. It uses webpack with the babili-webpack-plugin to calculate the size of the file.

WakaTime is the next plugin in our list. WakaTime gives you analytics about your programming activity. It automatically records your metrics, insights and tracks time of your activity in your favourite code editor. You just have to install the extension and give it the API key. You can get the API key by registering to their official site.

Image from WakaTime

Web Template Studio Makes your workflow way faster by giving you boilerplate code for various front-end, backend, pages and cloud services. It gives a wizard-based experience to help you speed up your process.

Night Owl is A Visual Studio Code theme for the night owls out there. 😉 Check it out yourself and you'll fell in love with it.

So, these are some of our favourite VS Code extensions we use daily. I'd love to hear and try your favourite ones too. 😊

Once again a big shoutout to Tapas Adhikary for sharing his favourite ones. 😄

Our Favourite VS Code Extensions! 🚀

Comments (1)

More from this blog

What to Check during JavaScript Code Review

Build a Tic Tac Toe Game with JavaScript

How to Build an Animated Counter with JavaScript

Build a Password Generator with JavaScript

Build a Weather App with JavaScript

Theme and Icon Pack 🚚

Code Formatter and AutoComplete 🛺

Miscellaneous 🚡

Some More Useful Extensions Shared By the Awesome Tapas Adhikary

Command Palette

Comments (1)

More from this blog

Theme and Icon Pack 🚚

Code Formatter and AutoComplete 🛺

Miscellaneous 🚡

Some More Useful Extensions Shared By the Awesome Tapas Adhikary