site icon

Hi, I’m Chris

I am a web developer teaching
regular people how to code

~ Welcome to my blog ~

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.

https://kite.com/

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


- By Chris Dixon

Chris Dixon is a web developer and teacher. Teaching thousands of students mainly in Vue.js React.js, WordPress and web development.