Gems in VSCode: Must-Have Extensions for Developers

Every developer can maximize coding experience with my Gems In VSCode, highlights a collection of helpful VS Code extensions I’ve personally used, loved, and shared over the years:

1. Gems In VSCode – Import Cost 💸

"Import Cost" is one of the most helpful VS Code Extensions!

Whenever you write import or require statements, it automatically shows the actual & gzipped size of the module/package right inside your editor 🤖

⚠️ This is NOT a bundle analysis tool. If you're using it for that purpose, check out webpack-bundle-analyzer instead.

It's all about giving you visibility, early on, into the cost of what you're importing.

It also comes with a simple config file to color-code package sizes:

Small Package: < 50 KB
Medium Package: < 100 KB
Large Package: > 100 KB

🔗 Install Extension

2. Gems In VSCode – Nest Comments 🔁

Ever wondered how to comment out code that already has comment blocks? 🤔

Nest Comments solves that neatly by modifying the comment symbols. For example:

HTML comment becomes inside, so it won't break your code.

How to use:

Install Nest Comments
Use:
- Mac: CMD + Alt + /
- Windows: CTRL + Alt + /

Supported in: html, css, vue, php, xml, jsx, asp, svg, tsx, and more.

Shoutout to Phil Sinatra for building this gem 👏

3. Gems In VSCode – Code Spell Checker 🔤

Spelling mistakes happen. To all of us. Especially if you're not a native English speaker.

But these small mistakes can cause huge inconsistency issues in a codebase. For example, a key object named calender instead of calendar can cause confusion and bugs later.

Solution:

Acknowledge the problem
Encourage your team to double-check naming
Use this Code Spell Checker Extension

✅ Supported Languages:

English (US, GB), Spanish, Dutch, French, and more
Specialized dictionaries (Medical Terms, etc.)

✅ Enabled File Types: JS, TS, HTML, Markdown, JSON, YAML, Python, PHP, Rust, C++, and many others.

Thanks to Jason Dent for this amazing tool 🙏

4. Gems In VSCode – Turbo Console Log ⚡

Console logging is helpful... but repetitive. Especially during on-the-fly debugging.

Turbo Console Log automates the console log generation:

How to use:

Highlight a variable
Press CTRL + ALT + L
Done! It logs something like:

console.log("🚀 ~ file: app.js ~ line 30 ~ foo", foo);

✨ It even supports multi-line selections and logs each line separately!

🔗 Install Extension 🔗 Open-Source Code

Big thanks to Anas Chakroun 🙏

5. Gems In VSCode – Change Case 🔤🔁

During code reviews or after pasting random text, inconsistent casing can get annoying.

This extension lets you change casing instantly:

Steps:

Install Change Case Extension
Highlight the text
Run Ctrl + Shift + P, then choose "Change Case"
Select the desired case → Done 🚀

✨ Supports multi-line cursor selection.

Thanks Wayne Maurer for this practical tool ❤️

6. Gems In VSCode – GitLens 🔍

If I could install only one extension, it would be GitLens. Hands down. ✋

It makes Git in VSCode powerful and visual:

Why you need GitLens:

Revision Navigation – Preview past file revisions, compare with current
Current Line Blame – Know who last edited a line, with full commit info
Status Bar Blame – Shows commit info in the status bar
Sidebar Views – Browse Commits, Branches, Stashes, Tags via UI
Terminal Links – Ctrl+Click to interact with commits/branches fast

🔗 Install GitLens 🔗 Source Code

Thanks GitKraken for building this essential tool ❤️

Hope you enjoyed it. Happy coding! 👨‍💻