DEV Community

Cover image for “Test Focus Highlighter” VS Code extension
Dzhavat Ushev
Dzhavat Ushev

Posted on • Originally published at

“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:

“Test Focus Highlighter” in action

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.

“Test Focus Highlighter” features

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!

Top comments (2)

layzee profile image
Lars Gyrup Brink Nielsen • Edited

Nice, Dzhavat! 👏 Does it support test.only and describe.only as well? 👏

dzhavat profile image
Dzhavat Ushev

Thanks, Lars! Yes it does :)