visual studio code

I am a Full Stack Developer coding in vs code (visual studio code) for most of my time. I can’t imagine working without extensions and themes in vs code. Today I am going to share the best extensions for visual studio code that I use on a daily basis which are accommodating and easy to use.

Table of Contents

How to download extensions in vs code?

Open your visual studio code, on the left side you will see a bar called the activity bar, click on the highlighted box, and it will open up the extension marketplace. Now you can search for any extension which you wish to install.

1) Live Server for vs code

Set up a local server environment within visual studio code using an extension. Launch a local development server with a live reload feature for static & dynamic pages. I will also show you how to save files automatically with a save delay which means the browser will refresh automatically and you will be able to see live changes. Click to download Live Server.

How to install Live Server in vs code

Click on the blue button that says install, once you have installed the live server, go back to your project, and right-click on the index.html file, and you will see an option that says open with live server click on it. A local development server will open up in your default browser, or you can click on the go live button on the bottom right corner of your visual studio code.

Now you need to save the file manually in order to see the changes in your local development server. However, there is a way we can overcome this issue. You need to go to your visual studio code settings and type in auto save, by default it’s going to be turned off you need to change that to afterDelay and change the value of Auto Save Delay from 1000 to 600. Now, whenever you do any changes in any of your files, it will be reflected in the local server.

2) Prettier – Code Formatter

It does exactly what it says, makes our code pretty. Formats the code uniformly throughout the document. It can format various types of files such as JavaScript, JSX, Angular, Vue, Flot, TypeScript, HTML, CSS, and many more. You won’t have to worry about missing a closing tag, curly bracket, angle bracket, or parentheses ever again. Click to download Prettier

How to install Prettier in vs code

To make sure this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings.json file. This setting can be set for all languages or by a specific language.

If you are unable to find settings.json click on the setting icon in your visual studio code, select extensions, and keep scrolling until you see Edit in settings.json

Click on it and enter the following code inside the JSON file.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

I would recommend changing “editor.formatOnSave”: false to “editor.formatOnSave”: true so that every time you save a file it formats the code. To do that go to the visual studio code settings type in format on save, and click the checkbox.

3) CodeSnap

Take beautiful screenshots of your code in visual studio code. If you ever want to share your code over the internet by taking screenshots, this extension could come in handy. Click to download CodeSnap

How to install and use Code Snap in vs code

Search Code Snap in the extensions marketplace, and click install. Then go to the file you want to take a screenshot of and open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap.

Code Snap in action

4) Auto Rename Tag

Small bits can be pretty annoying in coding. Once you have a large piece of code in any of your files, finding and renaming tags could be maddening. What the auto rename tag does is it will rename the opening or closing tag automatically without our need to find the paired HTML/XML tag. Just click on install and you are good to go, no further settings are required. Click to download Auto Rename Tag

Auto Rename Tag in action

5) Import Cost

Import Cost is nice to have to figure out how big packages are that you are importing in your code because sometimes you don’t want to have huge packages. This extension will display inline in the editor the size of the imported package. The extension utilizes a webpack in order to detect the imported size. Just click on install and you are good to go, no further settings are required. Click to download Import Cost

Import cost in action

6) Tailwind CSS IntelliSense

Tailwind CSS IntelliSense in action

7) Better Comments

The problem with default comments is that sometimes it can be hard to read because it is all grayed out, especially if you have multiple comments, which could make code hard to understand. However, this extension will help you create more human-friendly comments in your code. With this extension, you can categorize your annotations into alerts, queries, TODOs, Highlights, and many more. Click to download Better Comments

Better comments in action