DEV Community

Cover image for πŸ§‘β€πŸ’» Visual Studio Code Productivity Hacks: My Favourite 15 Extensions
Alvin James Bellero
Alvin James Bellero

Posted on • Updated on

πŸ§‘β€πŸ’» Visual Studio Code Productivity Hacks: My Favourite 15 Extensions

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!

Ready as I'll ever be! - Norman, Software Engineer, 25

πŸ’ β€” 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.

Spiderman Pointing


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!

Explain to me


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!

Star Trek Captain


4. Code Runner

⭐️ Jun Han

πŸ’ Run code snippet or code file for multiple languages

Road Runner


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? 🀯

Pick another color


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!

I see what you did there


7. ESLint

⭐️ Microsoft

πŸ’ Integrates ESLint JavaScript into VS Code.

πŸ’‘ Thanks, Microsoft! πŸ™‡πŸ»β€β™‚οΈ

Happy Simon


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" πŸ‘€

Hiding


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.. πŸ€”πŸ’­

Woman thinking


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.

Magic


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

Cool Cats


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! 🌈

LOL keyboard


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

I have no words


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 πŸ™ƒπŸ₯©

Fixing a bug in production


15. Thunder Client

⭐️ Ranga Vadhineni

πŸ’ Lightweight Rest API Client for VS Code

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! πŸ˜‰πŸ’―


Pointing down to comments

Top comments (7)

Collapse
 
andypiper profile image
Andy Piper

β€œWith GIFs”… I was hoping for GIFs of the extensions in use!

Collapse
 
shiftescape profile image
Alvin James Bellero

I just realized that now actually πŸ˜†
Anyways, I updated the cover image. Thanks for the heads up!

Collapse
 
pizaranha profile image
Jonathan Largo

#Region folding

Make a TOC of your code using regions

Collapse
 
captainmor profile image
Moruling James

As a tailwind fan, definitely gonna try inline fold!

Collapse
 
pacholoamit profile image
pacholoamit

Great article. I'll have to try Sonarlint

Collapse
 
wadecodez profile image
Wade Zimmerman

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.

Collapse
 
shiftescape profile image
Alvin James Bellero

Will definitely try that!