To the VSCode Extensions I Love the Most
Tags: vscode, javascript, html, css
Published: 2021-09-12 15:29:13

This certainly isn't the first time someone's made a list of their favorite VSCode extensions and it won't be the last, but these are mine! I'll start with some of my favorite JS related extensions and then we'll jump into HTML/CSS helpers.

I'm starting with the holy grail of all extensions. This one, I swear, has saved my life.

## JS & Friends

**[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)**

This extension does exactly what it's name says. It might not seem like anything life changing, but think about working with some deeply nested code, or a huge file.

Life WITHOUT Bracket Pair Colorizer:

![Code without Bracket Pair Colorizer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mm6kqryhx9wshwg75xc4.png)

Life WITH Bracket Pair Colorizer: 

![Code with Bracket Pair Colorizer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gufofgzg87pljj16j1gf.png)

Each pair of brackets, curly brackets and parentheses has its own color, which makes it very easy to identify where you might have an 'oops'. 

Wow, this already seems AWESOME, but WAIT-- there's more. Moving your cursor to the inside of the first bracket draws a line (in the same color) to its partner. 

![Bracket Line Match](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sk2s3m6ecjlq3sngg8s.png)


**[Simple React Snippets](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets) / [Next.js Snippets](https://marketplace.visualstudio.com/items?itemName=PulkitGangwar.nextjs-snippets)**

Writing boilerplate code takes FOREVER. It's ANNOYING. Simple React Snippets and Next.js Snippets ease that boilerplate pain.

**Functional Components & Hooks with Simple React Snippets**

![Simple React Snippets - Functional Components  & Hooks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzrd8j4y6453aptvemr9.gif)

**Next.js Snippets**

![Next.js Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27a0n3w08x56jytb325x.gif)

Both of these extensions have a ton of snippets, but I don't have the time to make that many gifs!


**[JavaScript (ES6) Code Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)**
This one is very similar to Simple React Snippets, but applies to plain 'ole, vanilla JavaScript. 

![JavaScript Code Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmiys8biprl18lecmn6n.gif)

These are the ones I use most often, but there are a ton more. Notable mentions include:
* `sti` for a `setInterval` setup
* `thenc` to add `.then()` and `.catch()` to a promise.
* `clg` for a `console.log()`

**[Template String Converter](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter)**

This one is small but mighty (helpful). Anytime you type `${}` within a set of single or double quotes, this extension automatically converts them to backticks.


## HTML & CSS 

VSCode is pretty great with HTML & CSS all on its own. * You can use `html:5` to get some solid HTML boilerplate. 
* Typing `a` will give you opening and closing link tags.
* Typing `div` will give you opening and closing link tags.
* VSCode auto-completes CSS attributes for you.
* The newest VSCode update allows you to edit an opening and closing tag at the same time (😍).

There are a few good helpers out there though!

**[HTML Tag Wrapper](https://marketplace.visualstudio.com/items?itemName=hwencc.html-tag-wrapper)**
![HTML Tag Wrapper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml9myoqg1a09qxsm3b5c.gif)

Wrapping already written code in a new tag has been driving me insane for as long as I can remember, but now there's an answer. Highlight, ctrl + i and the nightmare is over. 

**[CSS Snippets](https://marketplace.visualstudio.com/items?itemName=joy-yu.css-snippets)**

Yes, yes, more snippets! What developer doesn't love writing less code?

![CSS Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjymj04294u6e0lqyggb.gif)

The length of this list of snippets is rivaled only by a Game of Thrones book.

**[Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass)**

Last but not least, Live Sass Compiler! Sure, sure, you can just get this up and running in your terminal with a command or two, OR you could just click this: 
![Watch Sass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mizkjkhdfqlslcqc3vrh.png)

Totally up to you, but I know what I'd rather do. 


That's it for my favorite extensions list (for now). Feel free to drop your favorites in the comments! I'm always looking for new gems in my extension treasure collection.