My 12 Favorite VSCode Extensions
Tags: vscode, productivity, programming, codenewbie
Published: 2021-02-14 00:05:10

---
canonical_url: https://blog.katherinempeterson.com/my-12-favorite-vscode-extensions
---
One of the reasons VSCode is such an awesome code editor is the huge library of extensions created by the community that increase developer productivity. Below are some of my favorite VSCode extensions.

---

## [1. Rainbow Brackets](https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets)
![Rainbow Brackets Example](https://dev-to-uploads.s3.amazonaws.com/i/g1cx19uhbd2sz3y6ots0.png)
This simple extension makes your brackets colorful so you can easily find matching pairs. 


## [2. Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
![Auto Rename Tag Demo](https://dev-to-uploads.s3.amazonaws.com/i/ksi2z8cl227d6dm5tjfm.gif)
There isn't really ever a time where you would want to change an html tag without changing the corresponding opening/closing tag. Automatically change both at the same time with this extension.


## [3. Relative Path](https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath)
![Relative Path Demo](https://dev-to-uploads.s3.amazonaws.com/i/1qnmcbqnss5u7zwj88kn.gif)
This extension has saved me so much time writing import statements. Easily get the relative path to any file in your workspace with a simple keyboard shortcut. 


## [4. Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/390z02asfjf73hmyzure.gif)
Keep your code style consistent with this formatter. Configure your settings exactly how you like, then format your code with a keyboard shortcut or on save. 

## [5. htmltagwrap](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)
![htmltagwrap Demo](https://dev-to-uploads.s3.amazonaws.com/i/a6ifw6u7yl4twijsu8lu.gif)
Highlight a block of code and use a shortcut to wrap it in any html tag. 


## [6. Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
![Markdown Preview Enhanced Demo](https://dev-to-uploads.s3.amazonaws.com/i/6icwbyne4lmd5kbegsdk.png)
If you ever write markdown files, having a live preview is incredibly helpful.

## [7. Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)
![Polacode Demo](https://dev-to-uploads.s3.amazonaws.com/i/dc0ueyyi564k4nla1wfo.gif)
This extension allows you to take beautiful screenshots of your code. 

## [8. Random Everything](https://marketplace.visualstudio.com/items?itemName=helixquar.randomeverything)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1wyb57fekbzerbhewzpr.gif)
There are so many better uses of our time than coming up with fake placeholder data. This extension allows you to quickly add random pieces of data to your code, such as names, emails, colors, etc.

## [9. CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
![CSS Peek Demo](https://dev-to-uploads.s3.amazonaws.com/i/1q78ly3oxyz8xm1h8p9n.gif)
"Peek" at the styles for any CSS class, id, or HTML tag. Open the styles inline or quickly jump to the file where they are defined.

## [10. Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)
![Turbo Console Log Demo](https://dev-to-uploads.s3.amazonaws.com/i/f2jyg665cmthr8fvnj8f.gif)
Easily log variable names and their values to the console with a keyboard shortcut. Can be configured to include things like file name and line number in the log for easier debugging.

## [11. Simple React Snippets](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets)
![Simple React Snippets Demo](https://dev-to-uploads.s3.amazonaws.com/i/qeng1ixw9xibqvexq9z4.gif)
Snippets for all of the React boilerplate you write over and over again.

## [12. Snippet Creator](https://marketplace.visualstudio.com/items?itemName=ryanolsonx.snippet-creator)
![Snippet Creator Demo](https://dev-to-uploads.s3.amazonaws.com/i/o4mqbzt9iixsrks4lv08.gif)
There are many snippet extensions like the React one above, but sometimes you might want to make your own custom snippets. This extension allows you to do that easily.