My VSCode Extensions
Tags: vscode, extensions, javascript, ide
Published: 2021-06-02 17:12:55

VSCode is a great IDE to work with and very popular for couple of years.
Since I decided to start coding with node & react, I choose VSCode as my main IDE (I was a C# developer before, so I keep in team Microsoft)
From time to time I added, deleted or switch extension of VSCode

My currently extensions are:

- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
  
Instead of replace each tag, it renames paired tags. This extension is a MUST!

![image](https://github.com/formulahendry/vscode-auto-rename-tag/raw/master/images/usage.gif)   
  
- [Babel Javascript](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)  

This basically highlights the syntax of ES6/7/8/etc, ReactJsx
  
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y72q6oyzz5mj4n6cs47r.png)  
  
  
- [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)  

I avoid to use comments, really. But sometimes someone add some comments and it's a good thing to highlight to see and make decisions like (refactoring, tech debt, etc).
  
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5is7qwpgsv6fhnu7kgf.png)  
  
- [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)  

In Visual Studio (in my C# days) I used a lot of bookmarks, so it's great to have this extension. Great way to navigate through your code.  
  
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrnrga1bcc6id0f3ko2r.png)  
   
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)    

This matches the brackets with colors. It's awesome!
  
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scdb4uvtus32jrwd20af.png)  
   
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)    

My native language is Spanish and sometimes I make mistakes writing some variable in English, so this extension tells you if the word you typed is correct or not.
  
![image](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/example.gif)  
  
- [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)  
  
I use docker a lot, and sometimes I'm lazy to start a container in the command line, so this is great tool to start, stop, delete a container.
  
![image](https://github.com/microsoft/vscode-docker/raw/HEAD/resources/readme/docker-view-context-menu.gif)  

- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)  

Basically is a port of DOTENV for vscode

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anvfcat52dct0gidwliy.png)
 

- [Dracula Official](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)  

This is my currently theme. I use night owl and others but right now this is the theme for me. Maybe in the future I will change it again.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdaiu4at4og4s5ph6tiy.png)
 
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

This extension integrates ESLint into VSCode and will let you know for eslint errors that need to be fix.

- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)  

This is awesome to compare, see while you are coding, who was the last person to made the modification.

![image](https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/revision-navigation.gif)

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

This launch a local development server with live reload

![image](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif)
 
- [Live Share](https://visualstudio.microsoft.com/es/services/live-share/)

This is a great tool for collaboration. You can work with a partner in realtime, can debug, make call, share terminals. It's an awesome tool!

![image](https://visualstudio.microsoft.com/wp-content/uploads/2018/11/v2-Edit-Comp_FINAL-optimized840.gif)
 
- [Markdown All In One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

This basically makes you markdown more pretty

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxr7w9hbwp55p9crm7hc.png)
 

- [Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)

Provides a path autocomplete for vscode

![image](https://raw.githubusercontent.com/ionutvmi/path-autocomplete/master/demo/path-autocomplete.gif)
 

- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

Plugin that autocompletes filenames

![image](https://i.giphy.com/iaHeUiDeTUZuo.gif)

- [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)

This is an awesome tool to distinguish all your vscode windows.
You can set a color in your vscode workspace. I use to check my work and my personal projects

- [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) 

It create a nice code snippet to upload in your blog

![image](https://github.com/octref/polacode/raw/master/demo/usage.gif)

- [Prettier - Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Great Tool for formatting. I super recommend it.

- [Profile Switcher](https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher)

I have lots of different configurations, work, personal, talk presentation. 
With this extension I can change really quick instead of making modification in my json configuration file.

![image](https://github.com/aaronpowell/vscode-profile-switcher/raw/master/images/readme-demo.gif)
 

- [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

Great tool to test something really quick.

![image](https://quokkajs.com/assets/img/main-video.gif)
 

- [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

Instead of adding all the extensions each time I install vscode, I use this extension that keeps everything in sync. (extensions, settings, etc). 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pc7jt6hvcaqms036ysmp.png)
 
- [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)

Not much to say here, if you see a todo it will highlight.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yyxblta7p57lj0c2l4l.png)
 

- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

Like my current theme is Dracula, this my current icons theme. Maybe in the future I will change it

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqs8zfxkrg5prbzdl6ub.png)


If you have a good extension, please comment below. 
I promise the next article will be more interesting.

The next article will be using lambda layers to make your lambda functions more lightweight

See you next time
C.