Vs code logo

If you are a developer or a programmer, you probably know how important it is to have the right set of tools and extensions in your arsenal to boost your productivity. Visual Studio Code is a powerful code editor that can be customized and extended with a variety of extensions to help you write better code, debug more efficiently, and streamline your workflow. In this blog, we’ll be discussing some of the must-download Visual Studio Code extensions that will help you become more productive and efficient in your coding journey. So, let’s dive in and explore these extensions that can take your coding experience to the next level! 

Here is a brief table of contents of the Extensions we are going to talk about.

Table of Contents

  • HTML Auto Rename

This extension automatically renames the paired HTML tag in your HTML file, which is particularly useful if you dislike changing another tag of the same pair. After all, who wouldn’t want to have an easy perk when it’s already available for free? 
 To use this extension, just start editing the name of the tag and it will automatically start changing the other one.
 

 

  • Live Server

Whether you’re a beginner or a professional in web development, I bet you dislike constantly refreshing the reload button on your website to see the changes. With Live Server, all you have to do is hit save and it will automatically reload the page for you, even for JavaScript code.

To use this extension, 

–  Download it from the extensions (ctrl+shift+x). Search and Download ‘Live Server’ ,

– You may need to restart vs-code, hit (ctrl+shift+p) and hit Reload Environment.

– In your HTML file, right click and you will see a “Open With Live Server” option. Click on it , and your default browser will open.

  • Peacock

This extension is especially helpful if you have multiple windows of VS Code open. Peacock allows you to color different VS Code windows differently, so you can, for example, keep your Node.js development window green and your React window blue. This helps to categorize different workspaces by color, and it looks cool too. Installing it is simple, and it will make your life a lot easier
To use this extension: 
 – Download “Peacock” from the extensions section,
– Reload vs-code,
– Hit ctrl-shift-p (command pallet) and search for peacock, You will see different options there when you are working with different files and workspaces. If you don’t see all the options, make sure you have a file opened inside a workspace or window.

  •  Atom One Dark Theme

“Ever since I downloaded this theme, I have fallen in love with it. I used to work in Atom before it was abandoned, and I liked its look and feel. This theme can be downloaded in VS Code and has different versions available, such as the popular One Dark Pro theme. If you want to explore a catalog of different themes, I have a list you can check out here. Remember, light mode attracts bugs, so it’s always better to use a dark theme!

one dark theme
  •  Rest API Client for VS-Code (Thunder Client)

If you are working on or learning to make REST APIs, you have to check out this REST API client, which will be inside VS Code once you download it. This extension can do most of the things that Postman can do (which is also another very popular REST API client for testing APIs), but it can be run inside VS Code. Additionally, if you are a beginner to backend development, you will not be overwhelmed by what you see after you install this extension. Unlike Postman, which presents you with a lot of options and may make it difficult to navigate even to just make a single POST request, I recommend using the Thunder Client extension for this purpose.

To use thunder-client, download the extension in the extension’s section,  You may need to reload vs-code after installing this, then you will see a thunder icon on the side-bar, here you can make api calls for testing and utilizing apis

Thunder client

 

  • Highlight Matching Tag

This extension highlights the ending or closing of a tag when you click on either of the end or the start tag in your html file. If you are working in a huge html file, then this will save you a lot of time and scrolling. You just have to click on the tag you want to find the ending or starting of and the tag will get highlighted. You will definitely need this extension once in your coding journey, so why not install now?

 
html find tag

  • Material Theme Icon

This extension can change the look of default file icons in your workspace. This icon pack contains almost all the icons for all the development tools. It has more than 16 million downloads on VS Code as of now!

  • Prettier

If you are developing something, then you would want to make the code look structured and pretty. This extension structures any kind of language, keeps indentation, and manages proper spacing in your code file

  • Pola Code

This extension can be used to make quick screenshots or pictures of your highlighted code. In my opinion, this is the most useful tool if you create tutorials and blogs.

I am just scratching the surface while talking about these VS Code extensions. You can explore more extensions on your own. I will try to create more content on these topics, so if you want to know more, stay tuned. Have a good one!

Recent Posts

Leave a Reply

Your email address will not be published. Required fields are marked *