Do you use Visual Studio Code (VSCode) for your coding projects? If so, you know how important it is to have the right tools at your disposal.
Luckily, there are a ton of extensions available that can help you streamline your workflow and boost your productivity.
In this article, I'm going to share my top 15 favourite VSCode extensions that have become essential productivity hacks in my daily work.
Whether you're a seasoned developer or just getting started with VSCode, these extensions are sure to help you get more done in less time.
So, without further ado, let's dive in!

π β John a.k.a "EverReady", Software Engineer, 25
1. Auto Rename Tag
βοΈ Jun Han
π Automatically rename paired HTML/XML tag.
π‘ This extension will save you time finding the other end of the existing tag during an update! Please do read their docs especially the Note section.

2. Better Comments
βοΈ Aaron Bond
π Improve your code commenting by annotating with alert, informational, TODOs, and more!
π‘ Commenting is an essential part of programming that helps to improve code quality, readability, and maintainability. By taking the time to write clear and concise comments, you can make your code more accessible and easier to work with for yourself and other developers!

3. CodeMap
βοΈ Oleg Shilo
π Interactive code map for quick visualization and navigation within code DOM objects (e.g. classes, members).
π‘ I personally use this one to map custom patterns that I want including logging (debuggers | logs) & comments!

4. Code Runner
βοΈ Jun Han
π Run code snippet or code file for multiple languages

5. Color Picker
βοΈ anseki
π Helper with GUI to generate color codes such as CSS color notations.
π‘ You can actually change your colors IN PLACE by using the Color Picker. How cool is that? π€―

6. Console Buddy
βοΈ Yours Truly
π (Shameless Plug) A Snippet Extension that provides a collection of Web Console API snippets that allows you to quickly generated logging preference!

7. ESLint
βοΈ Microsoft
π Integrates ESLint JavaScript into VS Code.
π‘ Thanks, Microsoft! ππ»ββοΈ

8. GitLens β Git supercharged
βοΈ GitKraken
π Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more
π‘ In case you wanna find out who wrote a crappy, garbage line of code(s).... But then it shows: "You Β· 3 months ago" π

9. Import Cost
βοΈ Wix
π Display import/require package size in the editor
π‘ Gives you more insights to all the packages you're installing. Something to think about.. π€π

10. Inline fold
βοΈ Mohammed Alamri
π A custom decorator that "fold" matching content in single line
π‘ The Tailwind CSS Framework is really great but it results in a lot of verbose classes. For that particular problem, this extension comes in handy.

11. Live Server
βοΈ Ritwick Dey
π Launch a development local Server with live reload feature for static & dynamic pages
π‘ This spins up a NodeJS server and serves your HTML file with all the assets from the given directory. On top of that, all of your changes will be reflected immediately upon saving! Pretty cool, huh? π

12. indent-rainbow
βοΈ oderwat
π A simple extension to make indentation more readable.
π‘ Love the RGB colours that matches with your fancy keyboard lighting? Check this out! π

13. Prettier - Code formatter
βοΈ Prettier
π Enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
π‘ Speechless...

14. SonarLint
βοΈ SonarSource
π Like a spell checker, SonarLint highlights Bugs and Security Vulnerabilities as you write code, with clear remediation guidance so you can fix them before the code is even committed
π‘ We always learn from our misteaks ππ₯©

15. Thunder Client
βοΈ Ranga Vadhineni
π Lightweight Rest API Client for VS Code

That's all folks! π€π€
Are there any other extensions that you use? If so, be sure to let me know in the comments! ππ―

Top comments (7)
βWith GIFsββ¦ I was hoping for GIFs of the extensions in use!
I just realized that now actually π
Anyways, I updated the cover image. Thanks for the heads up!
#Region folding
Make a TOC of your code using regions
As a tailwind fan, definitely gonna try inline fold!
Great article. I'll have to try Sonarlint
for serious productivity gains I recommend the vim plugin. but memorizing the motions is hard. you could say it takes a little more than a click to get going.
Will definitely try that!