Best VS Code Extensions For Developers

Tags: mlh, majorleaguehacking, localhackday
Published: 2021-01-13 04:18:04

![intro](https://miro.medium.com/max/875/1*ls4FhHyM9y-ECnKZdx4BSQ.jpeg)

Newbie To The World Of Programming
Confused how to Setup the Code Editor 😟. No Worries ! By the end of this article you would explore best VS-Code Extensions that would support for debugging, embedded source control, syntax highlighting, intelligent code completion, snippets, and code refactoring
Great tooling can help developers write faster, cleaner, and more consistent code.
✨Let’s Start ✨
1. How To Install A Visual Studio Code Extensions :-
Launch VS Code In your system
If you haven’t installed yet download it from here [VS CODE](https://code.visualstudio.com/)
2. In the left sidebar open the Extensions tab or hit Ctrl+Shift+x, Where you will see list of installed extensions and a search bar to find more and to install .





## **Prettier — Code Formatter**
![image-use](https://miro.medium.com/max/875/1*W-y15UCsOxTWmLvrjpWn9w.gif)
by Prettier ~ more than 9M installations
A opinionated code formatter which enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary
One can use this in *two ways* :-
1. Automatically Formatting On Save :- Open Settings from the left sidebar and check the ‘Format On Save’ checkbox. [OR] open the ‘Edit settings in json’ and edit the file as below
{
  "folders": [],
  "settings": {},
  "editor.formatOnSave": true,
}
The above method applies formatting to many languages like typescript,javascript,HTML,Json.
However if we want for a particular language only you could edit the settings.json file as below
{
  "folders": [],
  "settings": {},
  "[javascript]": {
    "editor.formatOnSave": true
  }
}
2. Format existing file or particular part of code :- To do this open the necessary file to be formatted or select the necessary code to be formatted
Open Command Palette (CMD/Ctrl + Shift +P ) and enter Format Document or Format selection as required and the necessary changes would be done.

![folderimg](https://miro.medium.com/max/875/1*J7gKK47gJfx0YH5YfkVcnw.png)

## **Bracket Pair Colorizer**
![image](https://miro.medium.com/max/875/1*zeK7lgL0aLE5D_3oUyqy3w.png)

When we have lots of code with brackets,parentheses and braces it becomes difficult for us to find out where each block starts and ends.
This extension allows the user to know which scope he is in by mark matching the brackets with same color.

![image](https://miro.medium.com/max/780/1*uEe8NDoblK-XsVauNEg8wg.png)

## **Live Server**
![live server image](https://miro.medium.com/max/875/1*CwzL2mod2La54Rld7SHpHQ.png)
This is an amazing extension for front-end developers 😻 as it provides a local live server for static as well as dynamic pages with a reload option .
Usually front-end developers make many changes to the design of the webpage and need to reload many times to look at the output .
We can overcome that by opening a .html file with a live server and any changes made in code are directly altered and the webpage automatically reloads itself .
How to open with a Live Server 😕
Open the html file and right click on the editor and click Open With Live Server
Open the project file and in the status bar you would find Go Live click on it to start and open the server and to stop the server you would find an option as Stop Server at the same place.

## **Git Lens -- Git supercharged**
Everyone know about version control using GitHub. Many of us would be working on group projects where other developers also commit changes in the developed code. VS Code provides us an awesome extension through which one could get the previous commit changes ,do comparison between branches, view remote branches !!
From above visualization, at some lines we are able to see some pale text which author has done changes from previous commits.
[There’s more to explore see here.](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

## **Visual Studio IntelliCode**
![intellicode](https://miro.medium.com/max/875/1*C32pq3lSM-asbRXfhMD5kw.png)

This is a very useful extension which is provided with AI-assisted features which assists Python,Java,Js/Ts languages

![illustration](https://miro.medium.com/max/875/1*z-ZRjKqVbT-zWiXsHa6PYA.gif)

From above illustration we can see recommended completion items for the code.


## **Better Comments**

![comments](https://miro.medium.com/max/875/1*rLURqv7Kz21ZKrGZa9dkjg.png) 

Every developer needs to get habituated to write comments for his code so other developers could understand the code easily .
🎁 BONUS 🎁
For any language in VS Code,
Select the part of code to be commented and press *Ctrl+K+C* to comment the code
Select the part of the code to uncomment and press *Ctrl+K+U*

Many of the developers are accustomed to write comments but this way is going to make your comments look more structured and organized.

![demo-comments](https://miro.medium.com/max/875/1*7ven2Sy_2jGmjGLKqHRQgQ.png) 

The above shown are the default type of Better Comments. The type of comments are identified by the first character in the comment.
todo , ! , ? , // , * which are in-built in Better Comments extension.
One can also modify and add new type of comments in the User Settings and add a snippet similar to shown below in the edit settings as json option:-

"better-comments.tags": [
  {
    "tag": "!!",
    "color": "#FD2D00",
    "strikethrough": false,
    "underline": true,
    "backgroundColor": "transparent",
    "bold": true,
    "italic": false
  },
  {
    "tag": "#",
    "color": "#FFFFFF",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": true
  }
]

## **Material Icon Theme**
This extension provides great icons for different types of files as well folders. Based on the names of folders different types of icons are assigned to it and for files based on extension of the file the file icons are assigned.
One can even change the color of the folder / file in user settings or using command palette.
Get a detailed procedure for changing the folder and file custom colors [here](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme).


Above VS Code extensions are those which are helpful in making code structured and organized. VS Code provides in-built compilers for various languages like Python ,C++, Java and also MySQL server. 😍
That’s it for all now,
 Let’s Explore More at [Visual Studio Code](https://code.visualstudio.com/docs/introvideos/extend) 🏃 🏃