DEV Community

Cover image for Visual Studio Code Extensions You Might Not Know
Chris Dixon
Chris Dixon

Posted on • Edited on

Visual Studio Code Extensions You Might Not Know

Visual Studio Code has exploded in popularity over the last few years. By default, it has lots of features, but we can also download extensions to add almost any type of feature we need.

I have used VS Code for a few years now, but there is always something to learn from others. I recently asked on Twitter for everybody's top 3 extensions, hoping to uncover some hidden gems, and I think I did just that.

Why top 3? This was intentional. Yes, most of us have many more installed, but limiting it to 3 makes people think about what is really important.

There was lots of extensions which got 1-2 votes, as you would expect, but also some emerging patterns too. If you want to find any of these extensions, open up VS Code, click on the extensions icon in the sidebar, and use the search box.

Before we get started, you may notice a popular extension called Emmet is missing. This was a popular choice, but is now built into VS Code, so I have left this one off.

Top Picks

  • Live Server
  • Prettier
  • Git Lens
  • Bracket Pair Colorizer

These 4 were the most chosen extensions, by far. The next group also got a good share of the votes too:

Popular

  • ES Lint
  • Live Share
  • Indent Rainbow
  • Quokka
  • Vetur
  • Snippet packages- React, ES7, GraphQL, Redux, Angular etc
  • Git Graph

These were also popular choices too, especially the snippets for different languages and frameworks.

Next, there was also a long list of extensions with only 1-2 votes, but also worth checking out too, you might just uncover a useful one for your type of work:

Visual /color extensions

  • Indented Block Highlighting
  • Better Comments
  • Rainbow Brackets
  • Color Highlight
  • VSCode Icons
  • Notes
  • TODO Highlight
  • Emoji
  • Beautify
  • VS Code Styled Components
  • Peacock

Improving workflow & productivity

  • IntelliSense for CSS class names in HTML
  • Code Spell Checker
  • Bookmarks
  • Settings Sync
  • REST Client
  • Remote Development
  • WakaTime
  • Project Manager
  • Version Lens
  • Error lens
  • Spellchecker
  • TODO Tree
  • TabNine
  • Turbo Console Log
  • Import Cost
  • Better Comments
  • Polacode
  • Live SASS Compiler
  • Node Exec

Automating tools

  • Auto Rename Tag
  • Auto Complete Tag
  • Auto Close Tag
  • Auto Import
  • Auto Save (lots of different varieties, search for "save" )
  • Path Autocomplete

Markdown tools

  • Markdown All in One
  • Markdown Preview

Vim Tools

  • Vim
  • Neo Vim

At the time of writing, a new tool called Kite has also been released which may be worth checking out. It is a powerful, auto complete tool which uses machine learning to provide intelligent suggestions. It is currently available for Javascript and Python users.

Many of the above tools depend on your type of coding, but hopefully you will discover some new ones to help you out.

Top comments (11)

Collapse
 
pvcodes profile image
Pranjal Verma

Hey guys, I have been working on my very first APIs project and in that project I'm making a "QUIZ APP", where from an API. I have been taking 10 question and giving them multiple choices and at end they will be getting scored. I'm using NODE.JS, EXPRESS, REQUEST, EJS for the app.

The problem comes here when i get a string from API. I change it to an object using JSON.parse() and sending it to EJS files and then displayed. but when their are symbols in question like ", ' , and more they are displayed as &139; , " like that.

                      HOW DO I FIX THAT.
Collapse
 
chrisdixon161 profile image
Chris Dixon

Hey, not sure what this has to do with this blog post.
Please consider asking questions somewhere relevant such as stack overflow.

Collapse
 
roalz profile image
Roal Zanazzi

It may be better to change the title to "Visual Studio Code Extensions ..."
Visual Studio and Visual Studio Code are 2 different products.

Collapse
 
chrisdixon161 profile image
Chris Dixon

Ah good point, just an oversight from my end. I did do the tag as "visualstudiocode"but changed the title now. Thanks for the input!

Collapse
 
honeycomb profile image
Haja S. Childs

Great article! I definitely use some of the top picks and some popular ones. Now I have more good ones to check out. Also, MongoDB just got added to the list I believe. Thanks!

Collapse
 
natterstefan profile image
Stefan Natter πŸ‡¦πŸ‡ΉπŸ‘¨πŸ»β€πŸ’»

Thank you, Chris. Very helpful list - didn't know all of them. THX!

Collapse
 
chrisdixon161 profile image
Chris Dixon

Thanks Stefan!

Collapse
 
francescoxx profile image
Francesco Ciulla

Thank you Chris, I will check some of them! :)

Collapse
 
chrisdixon161 profile image
Chris Dixon

Thanks Francesco!

Collapse
 
heikokanzler profile image
Heiko Kanzler πŸ‡ͺπŸ‡Ί

Some real cool gems, thank you.

Collapse
 
chrisdixon161 profile image
Chris Dixon

Thank you!