My current favorite extensions on VS Code
Tags: codenewbie, vscode
Published: 2021-03-08 20:46:18

I love Visual Studio Code. I love the add-ons and extensions they have and I've found a couple I wanted to share with fellow coding newbies! 

## Bracket Colorizer 2 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jncjvy3tly7frkwbzuc.png)
If I had to pick, this would definitely be my number one favorite extension. This extension helps you to keep track of your brackets and match them. This is especially helpful if you have a lot of nested loops and if-else statements. It's easy to find yourself losing track of where one began and where the next ends. For me, it makes debugging easier when it comes to syntax and formatting. Here's an example of how the extension helps to color code your brackets: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9i3i3r7lksuwlk835nm4.png)
If you don't already have this extension added, definitely give it a try! 


## Dracula Official Theme
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oytc8pbu91sksftp1gll.png)
I love pretty colors and I love visually appealing things and designs. Dracula Theme is a pretty pink, green, and yellow color based theme. This theme is brightly colored, and another thing I love about it, is the the automatic italicized function parameters and color-code variables. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n9n9874h3e3jvvwwasw.png)
It's visually easier for me to follow, and when I launch my VSCode, I'm already excited to code because I enjoy the theme I'm looking at. If you haven't changed your color theme in a while, maybe try this one out it'll give your application a fresh new look and maybe a little boost of excitement.

## Live Server and Open In Browser
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r91nmu0zvtbd1fhxarvt.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghwryj6oxkfa1m6cqjih.png)
I listed these both together because they both serve the same purpose: allowing you to preview before the live build. Open in Browser allows you to right click on your html documents and select for it to be opened in your default browser or a pre-selected browser of your choice. This is especially helpful for testing your HTML and CSS cross-browser. This is one I lean on daily. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gwass9lnteivz8pz3q9.png)
Live Server serves the same purpose but it's bonus over Open In Browser is that you're able to see everything--you guessed it, LIVE! Without having to refresh the page, you can see and test the functionality of your app which saves you a few extra clicks. Work smarter, not harder. Automate what you can. Live Server is great for that.  

## Prettier 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty2ukaktdasizfsu31l2.png)
A new extension I've added to my list that I can't wait to use more often. Prettier is a code formatter that helps to structure your code in an organized and consistent manner. As coding newbies, getting into a habit of consistent structure can be great for us especially as we start to code longer and longer lines of code. I haven't used this too too much so far, but I have it installed now and think that it'll be a great way to lessen the strain of thinking about my formatting too much while also thinking about the problem I'm trying to solve.

What are some of your favorite extensions? I'm always looking for ways to streamline testing, debugging, and production. Share below!