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!