Visual Studio Code has become one of the highly used IDE now. I believe most of the people reading this article use VS Code daily. Here are some useful VSCode extensions that we use daily. If your favourites aren't listed here, comment down below. Would love to add those to this list. 😎
Gif from Giphy
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
libsassdoesn't support some latest Sass features like@use. So instead of using this, I've started to use their officialnpmpackage 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. 😄