10 Insider VS Code Extensions for Web Developers in 2021

Simon Holdorf
5 min read
updated: January 5, 2021

Visual Studio Code (VS Code) from Microsoft will continue to be one of the best code editors/IDEs in 2020. Its great marketplace offers awesome extensions made by the community, helping web developers to become more productive.
However, most articles about VS Code extensions only recommend the same 10-15 extensions. They are great, no doubt. But there is more to explore and I will show you 10 outstanding extensions that are less-known but really helpful.


1. Git Graph

ic1
Git Graph lets you visualize a graph from your repository in VS Code. It’s configurable to look just the way you want and currently has 5 out of 5 stars with 250,000 downloads on the market place

Key features are:

  • Display local and remote branches.
  • Perform Git Actions like create, checkout, delete, fetch, merge, and many, many more.
  • View commit details and file changes → Diffs of any file change.
  • Compare commits by clicking on them.
  • You can perform code reviews on any commit.
  • So much more for you to find out!

So, if there is one extension I should pick to recommend to you at this very moment it definitely is Git Graph!


2. Rest-Client

ic2
Most of you probably know API-testing services and clients like Postman or Insomnia.

But why use yet another program on your computer if you can just use VS Code for it? Rest-Client is an extension that allows you to do exactly that.

Here are some key features:

  • Send HTTP requests directly from the VS Code editor.
  • Send GraphQL queries as well.
  • Autosave and request history.
  • Organize multiple requests.
  • Broad authentication support such as basic auth and digest auth.

3. Auto Close Tag

ic3
Auto Close Tag is a good example of a small extension with a high impact on productivity.

As the name suggests, it will add the closing tag when you type in the closing bracket to an opening tag. It supports HTML, Handlebars, XML, PHP, Vue, JavaScript, Typescript, JSX, and more.

More features are:

  • Moves the cursor between the opening and closing tag.
  • Manage tags that you don’t want to be auto-closed.
  • Automatically close self-closing tags.
  • Supports keyboard shortcuts for closing tags manually.

4. Peacock

ic4
Peacock is an extension made by John Papa who is widely known for his community work and Pluralsight courses.

Peacock lets you change the color of your VS Code workspace swiftly. That’s especially useful when you work with multiple instances or make use of VS Live Share features.

Here are examples of what this could look like:
ic5


5. TabNine

ic6
TabNine is one of my favorite extensions in VS Code. It uses artificial intelligence and machine learning to help you write better code and gives you astonishingly fitting auto-completion suggestions.
It works out-of-the-box without the need for configuration and is highly responsive (you usually get suggestions within 10 milliseconds).


6. Polacode

ic7
I discovered Polacode in November 2019 and still wonder why not earlier. It’s such a great extension and I use it all of the time now.

What does it do? Well, it produces screenshots of the code you highlight and removes things such as warnings or error indications. It’s great if you are a blogger like me or want to share code snippets with friends, fellow developers, or the community.


7. TODO Highlight

ic8
Maybe you know this situation. You added to-dos to your code all over the place and forgot to review them before pushing code to production.

TODO Highlight helps you prevent this by highlighting your to-dos and FIXMEs and reminding you that there still is work for you to do.


8. Quokka.js

ic9
Quokka is basically a scratchpad, a rapid prototyping playground in your editor. It updates runtime values while you type in the code, helping you with debugging and experimenting with new features.

The community edition of Quokka is free to use but there also is a pro version with additional features. Definitely something you want to try out if you haven’t already.


9. Bracket Pair Colorizer 2

ic10
Bracket Pair Colorizer 2 does exactly what the name suggests. It allows matching brackets to be identified with different colors and you can decide what to match and what colors to use.

This is the successor to Bracket Pair Colorizer and has been optimized in terms of speed and accuracy.


10. Shades of Purple

ic11
Shades of Purple is both an extension and a professional theme for your editor. It is extremely popular among VS Code users and has 5 out of 5 stars on the marketplace.

It comes with hand-picked and bold shades of purple for the editor and terminal. It has great documentation and I just love this theme. Well, probably not the best choice if you don’t like purple but if you do — go get this theme!


Conclusion

Did you make it to the end? Awesome! I hope you can use these extensions to create a better working environment in VS Code. Here are some more best vs code extensions.
But pay attention: Tweaking your editor may quickly lead to procrastination. In the end, you want to write code!

If you like what I write and want to support me and my work, please follow me on Twitter to learn more about programming, making, writing & careers🥰