The 5 Best Visual Studio Code Extensions

Make your coding experience a little bit easier

Photo by Clément H on Unsplash

1. Live Server

Live Server is a must for any developer. This should be the first extension any beginner downloads. After installing, you will will see a small “Go Live” button on the bottom of your Visual Studio Code window:

Write some code in an html file, press this button, and see some magic! (Alternatively, you can right-click within your html file, and select “Open with Live Server”). This will open your current file on your default browser, so you can see what your code outputs. Whenever you save a change in Visual Studio, the change will appear live on your browser.

2. Prettier

This is by far my favorite extension. Prettier is a code formatter that saves you so many hours of tedious formatting. When I first started coding, I had a misconception that if I wasn’t doing everything myself (indenting, adding semi-colons, etc.), that I was cheating. Wrong. Prettier has not only saved me time, it has taught me better practices for formatting and making my code legible. You can configure settings within Visual Studio (in your settings.json) or make a configuration file for each project. Check out this article for more details on configuration: https://www.robinwieruch.de/how-to-use-prettier-vscode. However, I encourage EVERYONE to place this piece of code in their settings.json:

“editor.formatOnSave”: true

This will allow Prettier to automatically format your code every time you save. I promise you will never look back.

3. Bracket Pair Colorizer

This is an extension that seems mildly helpful at first, but can be a lifesaver when it comes to debugging. All programmers know the struggle of trying to figure out where you went wrong when your brackets, parentheses, and braces don’t match. Bracket Pair Colorizer does exactly as the name suggests, and gives your brackets different colors. Unlike some other extensions, there’s no learning curve or cons with this. So help your future debugging efforts and download it!

4. Code Spell Checker

Nothing wild here, this is literally just a spell checker for your code. After you spend 30 minutes debugging, only to find you misspelled a word, you’ll wish you had this. Code Spell Checker underlines misspelled words and will save you headaches down the line.

5. Turbo Console Log

Turbo Console Log is the only extension on this list that I wouldn’t consider necessary, but I do really enjoy it. This is yet another tool to help with debugging (notice a theme here?). If you’re someone that finds yourself writing console logs 50 times trying to locate an error, this extension will help you out. Highlight a variable, press CTRL + ALT + L (or CMD + OPT + L on a Mac) and have a nice console log message with the highlighted variable outputted for you. You can even customize the message in its settings.

The more I code, the more I find myself wanting extensions to do the dirty work for me. These are my 5 favorite extensions, but I am always on the hunt for more. Let me know if I missed any in the comments below!