🧑‍💻 Visual Studio Code Productivity Hacks: My Favourite 15 Extensions
Tags: vscode, productivity, extensions, webdev
Published: 2023-02-25 18:34:17

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!

<img src="https://media.giphy.com/media/UimdDmDNu5nf8fZKVM/giphy.gif" alt="Ready as I'll ever be! - Norman, Software Engineer, 25" />

> :information_desk_person: — _John a.k.a "EverReady", **Software Engineer**, 25_

--------------------------------------------------------------

## 1. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
⭐️ **Jun Han**
> 💁 _Automatically rename paired HTML/XML tag._

:bulb: 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](https://github.com/formulahendry/vscode-auto-rename-tag#note) section.

<img src="https://media.giphy.com/media/l36kU80xPf0ojG0Erg/giphy.gif" alt="Spiderman Pointing" />

--------------------------------------------------------------

## 2. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
⭐️ **Aaron Bond**
> 💁 _Improve your code commenting by annotating with alert, informational, TODOs, and more!_

:bulb: **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!

<img src="https://media.giphy.com/media/VML2lNolrKpP5sQvUn/giphy.gif" alt="Explain to me" />

--------------------------------------------------------------

## 3. [CodeMap](https://marketplace.visualstudio.com/items?itemName=oleg-shilo.codemap)
⭐️ **Oleg Shilo**
> 💁 _Interactive code map for quick visualization and navigation within code DOM objects (e.g. classes, members)._

:bulb: I personally use this one to map custom patterns that I want including logging (debuggers | logs) & comments!

<img src="https://media.giphy.com/media/myBz2xDdUTMmuACPD6/giphy.gif" alt="Star Trek Captain" />

--------------------------------------------------------------

## 4. [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)
⭐️ **Jun Han**
> 💁 _Run code snippet or code file for multiple languages_

<img src="https://media.giphy.com/media/yhRhIgnJIRD0I/giphy.gif" alt="Road Runner" />

--------------------------------------------------------------

## 5. [Color Picker](https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color)
⭐️ **anseki**
> 💁 _Helper with GUI to generate color codes such as CSS color notations._

:bulb: You can actually change your colors <u>IN PLACE</u> by using the Color Picker. How cool is that? 🤯

<img src="https://media.giphy.com/media/l2SqdNw9wktsLTsn6/giphy.gif" alt="Pick another color" />

--------------------------------------------------------------

## 6. [Console Buddy](https://marketplace.visualstudio.com/items?itemName=AlvinJamesBellero.console-buddy)
⭐️ **Yours Truly**
> 💁 (Shameless Plug) _A Snippet Extension that provides a collection of [Web Console API](https://developer.mozilla.org/en-US/docs/Web/API/console) snippets that allows you to quickly generated logging preference!_

<img src="https://media.giphy.com/media/5gw0VWGbgNm8w/giphy.gif" alt="I see what you did there" />

--------------------------------------------------------------

## 7. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
⭐️ **Microsoft**
> 💁 _Integrates ESLint JavaScript into VS Code._

:bulb: Thanks, Microsoft! 🙇🏻‍♂️

<img src="https://media.giphy.com/media/3o72FcJmLzIdYJdmDe/giphy.gif" alt="Happy Simon" />

--------------------------------------------------------------

## 8. [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
⭐️ **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_

:bulb: In case you wanna find out who wrote a crappy, garbage line of code(s).... But then it shows: "You · 3 months ago" 👀

<img src="https://media.giphy.com/media/COYGe9rZvfiaQ/giphy.gif" alt="Hiding" />

--------------------------------------------------------------

## 9. [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
⭐️ **Wix**
> 💁 _Display import/require package size in the editor_

:bulb: Gives you more insights to all the packages you're installing. Something to think about.. 🤔💭

<img src="https://media.giphy.com/media/WRQBXSCnEFJIuxktnw/giphy.gif" alt="Woman thinking" />

--------------------------------------------------------------

## 10. [Inline fold](https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold)
⭐️ **Mohammed Alamri**
> 💁 _A custom decorator that "fold" matching content in single line_

:bulb: 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.

<img src="https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif" alt="Magic" />

--------------------------------------------------------------

## 11. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
⭐️ **Ritwick Dey**
> 💁 _Launch a development local Server with live reload feature for static & dynamic pages_

:bulb: 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? 😎

<img src="https://media.giphy.com/media/GwGXoeb0gm7sc/giphy.gif" alt="Cool Cats" />

--------------------------------------------------------------

## 12. [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
⭐️ **oderwat**
> 💁 _A simple extension to make indentation more readable._

:bulb: Love the RGB colours that matches with your fancy keyboard lighting? Check this out! 🌈

<img src="https://media.giphy.com/media/3ohhwERyIvr1VOVgQM/giphy.gif" alt="LOL keyboard" />

--------------------------------------------------------------

## 13. [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
⭐️ **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._

:bulb: _Speechless..._

<img src="https://media.giphy.com/media/2yKXIJyTDdsTm/giphy.gif" alt="I have no words" />

--------------------------------------------------------------

## 14. [SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)
⭐️ **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_

:bulb: We always learn from our **misteaks** 🙃🥩

<img src="https://media.giphy.com/media/XjlNyeZp5lDri/giphy-downsized-large.gif" alt="Fixing a bug in production" />

--------------------------------------------------------------

## 15. [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)
⭐️ **Ranga Vadhineni**
> 💁 _Lightweight Rest API Client for VS Code_

<img src="https://media.giphy.com/media/pL6mkjytFkTlekNMtM/giphy.gif" alt="Thor Marvel" />

--------------------------------------------------------------

That's all folks! 🤜🤛

Are there any other extensions that you use? If so, be sure to let me know in the comments! 😉💯

--------------------------------------------------------------

<img src="https://media.giphy.com/media/lrPNVta5uLk9VvhHgd/giphy.gif" alt="Pointing down to comments" />