Visual Studio Code Extensions

You can think of extensions as small upgrades to the already awesome VS Code editor. If you haven’t already, make sure you get set up with Visual Studio Code before you continue.

Extensions can be accessed by clicking the icon on the bottom left in the left navigation. Note that if you have the updated VS Code the icon may look a bit different.

Browse the extension library

The typical way to search for an extension is by using the search bar. Just type in any feature that you would like to add to VS Code. Try typing in “JavaScript”. You should be presented with a countless number of extensions that you can add that are related to JavaScript.

Let’s take a look at popular extensions. Clear out the search bar and paste in “@sort:installs”. This results in the most popular extensions. Take a look around and see if there is anything interesting that would make your life easier.

My recommended extensions

I’m going to share my top 4 extensions that I use personally and recommend all my students to use in my courses.

Open in Browser:

This extension does exactly what it says. It allows you to directly open an HTML file in a browser of your choice with just a click on the mouse.

Normally in VS Code, you don’t have this option so you would have to open the directory in the File Explorer then open the HTML file.

Code Runner:

Code runner allows you to run code from directly in VS Code. For JavaScript, that means you can just create a .js file, add your code, and run it all in the editor.

Path Intellisense:

Working with relative paths can be a bit tricky at times. And I am sure that I am not the only one who has spent a lot of time debugging an error that was caused by a bad relative path.

Path Intellisense understands the working folder in VS Code. So as you start typing in the relative path you will be prompted with the correct options of directories and files. No more guessing!

ESLint:

Linting is a tool that analyses your code for errors and coding standards. ESLint is a must-have if you want to really call yourself a professional developer.

Let ESLint run in the background and it will notify you of any errors and deviations from your set coding conventions. In short, it helps make you look good by ensuring your code looks good.