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:

  1. Acknowledge the problem
  2. Encourage your team to double-check naming
  3. 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:

  1. Highlight a variable
  2. Press CTRL + ALT + L
  3. 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:

  1. Install Change Case Extension
  2. Highlight the text
  3. Run Ctrl + Shift + P, then choose “Change Case”
  4. 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! 👨‍💻