Intro
Are you tired of “best VS Code extensions” lists recycling the same handful of crowd favorites? Me too. That’s why I’ve dug through my own collection and surfaced some underrated gems that have genuinely improved my day-to-day coding workflow. In this post, you’ll find a curated selection of lesser-known (but highly useful) VS Code extensions—each with a quick explanation of what they do and why I keep them around. Whether you’re looking for ways to streamline navigation, personalize your setup, or just add a bit of fun to your coding environment, there’s probably something here you haven’t seen before.
Before I jump in, a quick note: none of these extensions are sponsored. They’re simply tools that I’ve incorporated into my own workflow and found genuinely helpful. I’ll provide a brief description of each, along with a few thoughts on why they stand out for me.
Hopefully, you'll discover something that sparks your interest or addresses a pain point you didn’t even realize you had. With that out of the way, let’s dive into the list.
Line Surfer 🔗
Never lose track of your curent line of code
First thing anyone reading this list will understand is that I like to test how many icons, emojis and colors I can put in my VS Code setup without losing too much focus 😓 Line Surfer helps with both these. The GIF below illustrates exactly what it does.
So I basically have my configured colors (⚠️ with opacity) and whenever I lose track of my cursor, I can easily identify where it is due to what LineSurfer does. It highlights your focused line and a few other above/below it. All of this is configurable.
Squarl Bookmarks 🔗
A bookmark manager for your codebase
This powerful bookmark extension makes it easy to save files within large codebases, and is especially useful even when dealing with files that have identical names or complex, confusing paths. You can have your own personal bookmarks or you can store a configuration in .vscode/settings.json, where you can include essential bookmarks and helpful links to simplify onboarding for new team members. The extension also lets you organize your bookmarks into groups or categories for easier navigation and management.
HSL Color Preview 🔗
Preview hsl colors in your editor
This one is pretty straightforward in its purpose. I don't exactly remember why or when, but clearly I needed to see which how an hsl color looked like in VS Code and this extension does exactly that.
VSCode Git Commit Message 🔗
Add a set of emojis and prefix your commit titles with them
This is by far the extension I’ve had installed the longest. As mentioned earlier, I’m a big fan of (over)using emojis. So when I discovered the gitmoji and emoji log trend, I started using that standard for about 90% of my personal commits.
However, I prefer to customize my setup, and the existing extensions usually follow a strict standard, often tailored to the developer’s preferences. So I wanted an extension that not only allowed me to use whatever set of emojis I wanted, I also wanted to be able to customize other prefixes/sufixes and this extension does just that.So I wanted an extension that not only allowed me to use whatever set of emojis I wanted, I also wanted to be able to customize other prefixes/sufixes and this extension does just that.
So after I stage the files, I have a keyboard shortcut that triggers a commit and the commit message prompts. The first one is the image above and I use the following configuration for the following prompts
"action": [
{
"label": "",
"detail": "Empty"
},
{
"label": "⚒️ part of",
"detail": "A commit that progresses a task or an epic"
},
{
"label": "✅ closes",
"detail": "A commit that marks the finish of a task or an epic"
},
{
"label": "💀 deprecates",
"detail": "A commit that deprecates something"
}
],
"scope": [
{
"label": "🕹️game",
"detail": "Game related changes"
},
{
"label": "📦assets",
"detail": "Adds/Moves assets in the codebase"
},
{
"label": "🛠️tools",
"detail": "Tooling related changes"
},
{
"label": "📐ui",
"detail": "Changes related to the UI"
}
],
"vscodeGitCommit.template": [
"{prefix}: {message}",
" {scope}",
" {action} {taskCode}",
" by David Morais <david@davidmorais.com>"
],
The task code is a custom field and the third/fourth prompt (depending on whether I comment the scope out on a specific project that does not call for it) and I end up with a commit message like the one described in the vscodeGitCommit.template config field.
Theming 🎨
Unless I'm working under heavy sunlight and I need to switch to a light theme, this is how usually VS Code looks like to me.
Coincidentally, all of these theming extensions are at the bottom of my extensions list, when sorted by installs 🎯 So let me tell you a bit about them.
Carbon Product Icons 🔗
It took me some time to realize that the icons for "Explorer," "Source Control," "Debug," and similar features can be customized. So I searched for "Product Icons" extensions and this is the set of icons I liked the most.
Vira Theme🔗
A fairly recent change I made in my icons was to use the nice icons provided by this theme package, which also adds a few more themes to choose from. I liked the fact they had customized icons for alot of libraries. I'm using the Vira Teal Icons variant.
Dark Magic Themes 🔗
Time for a shameless self plug here. I created these a few years ago because I wanted something along the lines of Tokyo Night or Dracula but with a teal accent. This package includes 2 personal themes (Dark Magic + Night Variant) with my personal synthax color scheme. Then I also added a Nord, Dracula, Tokyo and a Frankenstein (green-ish) variants with custom syntax colors. A light variant is in the works and will be out soon ™️.
Million Lint🔗
a linter for your React components' performance.
This is an extension I've used in some personal projects to a moderate extent. This extension essentially plugs and listens to your development server and not only points out performance issues, but can also suggest some fixes or improvements. It can be useful to have it on as it does not take much resources to run in dev mode, just install the npm package and initialize it and Million Lint will start to point out all those unecessary re-renders in your apps' components.
⚠️ I think this one is about to be sunset due to the removal of their extension README and their website.
Vitest Runner🔗
fastest way to run specs directly in VS Code
This extension does exactly what its name suggests: it adds "Run" and "Debug" buttons to all my spec files. This saves me from having to manually copy the file path and type the corresponding vitest command each time. That’s pretty much it. While there are similar extensions for Jest, as well as many that add a test explorer UI to the sidebar, I prefer the simplicity of having just a few extra buttons in my code over additional UI elements.
Total Typescript🔗
translates Typescript errors to human language
I've had this extension installed for a while, pretty much since I added Typescript to my stack some 3 or 4 years ago. Total Typescript helps with those sometimes cryptical Typescript error messages and translates them into something a sort of human, like a developer, can read. It's an extension I totally recomend if you're getting into TS as it can make the learning curve a bit less steep and save you some hours in debugging those initial TS errors.
FrontMatter CMS 🔗
turns VS Code into a CMS
This is a true gem 💎 and what I use to manage the posts on my website. It gives VS Code magic CMS powers, giving it a nice UI where you can manage your content. You can have custom fields, you can have it read directly from your markdown files' YAML properties and it even gives you SEO improvement suggestions for your content.
I highly recommend this extension; however, I have to admit that I usually disable it when working on projects that don't involve a CMS or markdown files.
Gistpad 🔗
helps you access your gists from VS Code
GistPad is my favorite way to work with GitHub gists. It adds a product icon to your sidebar (personally, I keep all non-local tools like Copilot and GistPad on the secondary sidebar), letting you access both your public and private gists right from within VS Code. My main use for this is storing configuration files—like zsh, PowerShell scripts, custom themes, and more. Whenever I encounter software that uses plain text for its configuration (which is common with many developer tools), I save the config file as a private gist. Then, whenever I need to set up that software on a new machine, I simply open the config file in VS Code, click the GistPad icon, find the relevant gist, and copy-paste the content where I need it.
If you don’t use gists or already have a preferred method for managing configuration files, GistPad might not offer much value for you.
However, if you ever find yourself juggling different configs across machines, or just want a lightweight way to sync snippets and templates, GistPad is worth a look. The extension also supports more than just text files—you can organize markdown notes, code samples, and even small datasets, all conveniently searchable within the same interface. Plus, thanks to its seamless GitHub integration, any edits you make in VS Code are instantly saved back to your gists, ensuring you never lose track of important tweaks or updates. Overall, it’s a simple but surprisingly powerful addition to any developer’s toolkit.
Summary
That wraps up my tour of lesser-known—but genuinely useful—VS Code extensions that make my coding life a little better every day. While it’s easy to stick with the tried-and-true plugins everyone talks about, sometimes it’s these hidden gems that solve problems you didn’t even realize you had. I hope you found at least one new extension to try, or a tweak that gives your setup a fresh spark of inspiration. If you’ve got any underrated favorites of your own, let me know—I’m always looking to test out new tools. Happy coding!
Top comments (0)