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)
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.
Hey, not sure what this has to do with this blog post.
Please consider asking questions somewhere relevant such as stack overflow.
It may be better to change the title to "Visual Studio Code Extensions ..."
Visual Studio and Visual Studio Code are 2 different products.
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!
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!
Thank you, Chris. Very helpful list - didn't know all of them. THX!
Thanks Stefan!
Thank you Chris, I will check some of them! :)
Thanks Francesco!
Some real cool gems, thank you.
Thank you!