Best VS Code Extensions For Developers
Tags: Vscode Extension, Beginners Guide, Vscode, Web Development, Developer

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 ✨

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

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

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 :-

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.

→ Bracket Pair Colorizer

by CoenraadS more than 3M installations

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.

→ Live Server

by Rithwick Dey more than 8M installations

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.

→ GitLens — Git supercharged

by Eric Amodio more than 7M installations

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.

→ Visual Studio IntelliCode

by Microsoft more than 8M installations

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

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

→ Better Comments

by Aaron Bond more than 1M installations

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.

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

By Philipp Kief more than 5M installations

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.

→ Material Theme

by Mattia Astorino more then 2M installations

Many developers work during night and the code visibility becomes low and some of them prefer light color theme , So VS Code provides a extension with which one could change the theme.

Some of the amazing themes provided in this extension are listed above in the picture. Material Theme is one of the most used for themes. We have many other themes which can be downloaded separately.

Material Theme Ocean

Some of the other themes which are trending in 2020 are :-