VS Code plugins for code newbies

I have started coding very recently (about 1-2 months) and have been using Visual Studio (VS) code as my primary code editor since day one. VS code is currently available on all major operating systems: Windows, Linux and macOS and if you are not familiar with it and would like to know a bit more, then click here.

VS code as well as the plugins I mentioned below was recommended to me by my husband Foysal who has 8 years of experience in full stack development. He had other plugin recommendations too but I, as a codeNewBie did not feel the need of those plugins just yet. The plugins below not only made my life as a codeNewBie a lot easier but it also allowed me get things done quicker in a less frustrated way as well as made my editor feel more like a home I decorated myself.

In order to install the plugins, you can click on extensions icon found on the side menu and just type in the plugin names.

Plugin 1 - Live Server

I found this plugin incredibly helpful when working with HTML & CSS especially when I try to, suppose: practice building a webpage or a sign-up form. It runs a web server for you and gives you a browser accessible localhost address and will automatically refresh the browser every time you update the code on your code editor so you don't have to manually click on the refresh button.

Link: Live Server

Plugin 2 - Browser Preview

This plugin is particularly helpful when you don't want to go back and forth from editor to browsers such as Chrome or Firefox to check the changes you have made in your code. After installing the plugin it will create its own button on the side menu and when the button is clicked the editor will split and a browser will open on the right hand side.

Also do not forget to open the html file on browser, copy the file path link and paste it onto the preview browser. If live server is installed, copy the localhost link and paste it onto the browser to get live updates.

If this section confuses you please feel free to get in contact with me via Twitter. I will be happy to tell you more in details.

Link: Browser Preview

Plugin 3 - Carbon-now-sh

Since I am currently working towards the #100DaysOfCode challenge on twitter, I often share a screenshot of my code together with the updates of my everyday progress until I found this plugin. This plugin will allow you to create beautiful images of your code and directly share it on twitter. In order to use it:

• Install the plugin
• Select the lines of code you would like to share
• Press [option + cmd + a] which will take you to a browser where you can edit the code however you like.

If you are like me and you struggle to remember shortcuts, then do the followings below:

• Press [cmd + shift + p] to open up the VS code terminal
• Type carbon, and just click on the highlighted selection of carbon which will then take me to the browser.

Link: Carbon-now-sh

Plugin 4 - Code Spell Checker

This plugin will underline any mistakes such as spellings you have made in your code which might end up causing an error. Instead of going through the code and figuring out yourself what might be causing it, you can just skim through the code very quickly to see if any of your code is underlined red before you look for the other reasons why your code might not be working as it should.

Link: Code Spell Checker

Plugin 5 - Rainbow Brackets

I find this plugin particularly helpful when playing around with JavaScript. Mainly because JavaScript coding requires the use of brackets a lot. This plugin will allow you to visualise the brackets a lot better and will highlight the end bracket of a code block if the bracket of the beginning code block is missing or accidentally removed (ref: second image).

Link: Rainbow Brackets

Plugin 6 - Theme

If you are someone like me who spent like a whole day playing around with plugins, installing and uninstalling various types of theme and so on to make the codes look more colourful and presentable 😛 (I know I know I am crazy!) then here are a few VS code themes I would suggest:

1. Horizon - This one is my current favourite one at the moment.

1. Dracula
2. Ayu
3. Noctis
4. Material theme

Plugin 7 - Icons

At the moment I am using Material Icon Theme as my default. I feel like these icons are a lot more representable, highly contrasted and eye catching and gives meaning to each of your files. I have provided the Material Icon Theme link here but feel free to explore others.

Link: Material Icon Theme