“Test Focus Highlighter” VS Code extension

This post was originally published on my blog.

I’m really excited to share a new VS Code extension called “Test Focus Highlighter”. 🎉

It’s an extension that visually highlights focused tests in spec files. Here’s a demo:

Why did I build it?

Primarily for myself. I started writing tests for my code a few months ago and mistakenly committed focused tests in a couple of occasions. They were, fortunately, catched during pull request (PR) review but that is already too late in the process. I saw this as an opportunity to make a small tool that can help me identify focused tests during development by visually highlighting them. And when I say visually, I mean really making them stand out.

The extension does this in three ways:

1. Shows a warning icon in the gutter for each line covered by a focused test.
2. Shows a warning message when a focused test is hovered.
3. Shows a color in the overview ruler that makes it easy to see any focus tests in a big spec file.

The extension will not prevent one from committing focused tests. It only aims to increase ones chances of catching such tests as early as possible.

I hope you will find the extension beneficial as well!