Top 10 VS Code Extensions Used For Making Your Web Development Journey Easy, Faster and Smoother

Manan Aggarwal
5 min readJul 29, 2022

--

Hello Forks hope you are doing well in your life. This topic is important for all the developers who want to increase their productivity and want to know that which extensions are beneficial for them so that their development journey would become smooth and easy.

Now Here is the List of the extensions which we will be discussing further in this Blog as they are :-

  1. Live Server
  2. Path Intellisense
  3. Prettier
  4. Auto Close Tag
  5. Markdown all in one
  6. Material Icon Theme
  7. Gitlens
  8. Snippets
  9. Auto Rename Tag
  10. Icon Fonts

1. Live Server

Live Server is the extension which is used by almost all of the developers to prevent continuous reloading of the page which can be a time consuming task and hence decline their productivity.

This extension is used to prevent the continuous reloading of the page and changes are reflected back to the pages automatically which are made by the developer.

To start the live server Follow these steps mention in the below gif.

Live Server Extension
Live Server Preview

2. Path Intellisense

Path Intelliscence help the developer to guide through the path of the file which they want to mention in their source code for developing their websites or the other apps.

Path Intellisense Extension

Usage of the path Intellisense which is mention in the gif given below.

Path Intellisense Usage

This extension will automatically suggest the path of the file which the developer want to mention. As the maximum stress comes from the developer side is they are giving the correct path of the file then why the file is not visible in the webpage or the other pages. This extension will prevent this headache of the developer.

3. Prettier

The working of this extension is same as the name. This extension will make your code pretty in terms of the intendation ,give the correct spacing to the lines of the source code and position’s the line to the correct location.

Prettier Code Formatter Extension

4. Auto Close Tag

Auto Close Tag is used for closing the tags automatically when the tags is just declared and used to remind the developer that the tag is open and we should close it otherwise the code will not produce the expected output and will cause the problems to the developer.

Auto close Tag
Preview of the Auto close Tag.

5. Markdown all in one

Readme File is the basic requirement for all the developers whether to describe their projects and tell others users how to use their project for their own use and make maximum benefit out of their project.

But sometimes it is difficult for the developer to create the markdown which would stand up on their expectations. This extension will help the developers to create the markdown file as per their need. It contains the predefined template for their use and they can edit these templates and make useful markdown files.

Markdown All in One

6. Material Icon Theme

It is used by the developers just for making their VS Code look attractive. This extension will help to look their icons beautiful and eye catchy. The developer will not get bored while making their applications.

Material Icon Theme

7. Gitlens

Gitlens is used by the most of the developers as they use GitHub for pushing their projects and keep a track record for their work.

This extension will help the developers to track their changes in the VSCode itself instead of opening the GitHub website again and again and track their changes of the file.

This extension will also highlight the committed and uncommitted changes in the vscode workspace itself which reminds the developer to push their changes to the GitHub and save their work.

Gitlens

8. Snippets

Snippets are the predefined template that are used by the developer repeatedly in all of their projects. By writing again and again the same piece of code the developer will get bored and huge amount of time will be wasted hence their productivity will get declined.

This extension will help the developer to decrease their workload and by just one click the developer will get the code written automatically as defined in the snippets.

Snippets For Vscode
Snippets Preview

9. Auto Rename Tag

Auto rename Tag will help the developer for renaming the tag just on the side and other side will be automatically renamed . For example :- If the user will rename the opening tag in the HTML then the closing tag will automatically be renamed.

Auto Rename Tag
Preview of the Auto Rename Tag

10. Icon Fonts

Every developer has heard the name of the font awesome icon and used it definitely. This extension will help the developers to suggest the icons on the workspace itself without going to website and finding the suitable icons for themselves thus increase their productivity and efficiency.

Icon Fonts

This was all about this blog hope it helps you and make your development carrier smoother and easier.

Follow me for more useful blogs like this.

Follow me for Follow Back

If you want to increase your typing speed and don’t know how to start checkout this blog.

Meet you guys with my next blog and I will bringing more useful information like this.

Have a nice day. keep coding and keep growing.

--

--

Manan Aggarwal

I am a tech Guy who have Interest in CyberSecurity and coding and I write what I love Link to my Linkdin Profile linkedin.com/in/manan-aggarwal-76