Visual Studio Code Extensions for Beginners

Notice! These posts are basically my learning notes.
There can misinformation and mistakes :(
If you find any wrong info, please leave a comment and I will get to it asap!

Visual Studio Code(or VSCode) is the most widely used IDE nowadays.
It is already powerful on its own but it can hold much larger calibre if paired with extensions.

Below are some extensions that I found to be useful for beginner like myself.

Aesthetic

Here are some Themes and Code Formatter extensions to make our VSCode and codes look more pleasing to the eye.

Community Material Theme

Material Theme gives the VSCode a wide range of color options.
There are some variations and my preffered choice is Community Material Theme Palenight High Contrast.

Material Icon Theme

Material Icon Theme changes the icons on sidebar according to their programming language.

Prettier

Prettier helps you format codes upon saving.
Saves a lot of time that you might spend making the code look pretty.

Don’t for get to enable Format On Save from VSCode Settings.

Bracket Pair Colorizer

This extension colors matching brackets to help you find you way through your code.
However, since similar function can be done via settings.json, I didn’t install it.
What I did instead is to add below in settings.json

"editor.bracketPairColorization.enabled": true

Files

Personally, I found it much more convenient to create new files,
rename, move, duplicate and more all on keyboard.
These extensions help you achieve that.

advanced-new-file

File Utils

etc

GitLens

GitLens enables you to see who and when certain changes or commits have been made.

Live Server

With Live Server, you can see the result of your HTML & CSS code in real time without having to $ npm start everytime.

Auto Rename Tag

This beauty auto renames your closing tag when you change the opening tag.
Saves a ton of time.