As a frontend developer, I was getting constantly frustrated with how messy our CSS codebase would get, especially in large projects using Tailwind CSS. I found myself hunting down the same combinations of utility classes (`flex items-center p-4...`) across dozens of React and Vue components. It was a nightmare for consistency and maintenance.
So, I decided to build the tool I wished I had. StyleLens is a VS Code extension that automates this entire process.
It scans your entire workspace (React, Vue, etc.) and gives you a dashboard of:
1. *Duplicate Styles:* It groups identical class strings, even if they are in different files, and lets you refactor all of them into a single new class with one click.
2. *Dead Classes:* It finds classes used in your components that have no definition in your CSS, helping you clean up unused styles. You can even generate a boilerplate style for them instantly.
Under the hood, it uses the Babel parser for JSX, the official Vue compiler for Vue components, and a lot of logic to handle the global analysis. The whole journey, especially getting the parsers to work reliably, was a huge learning experience.
The extension is free and open-source. I'd love to get your feedback and hear what other tedious styling tasks you'd like to see automated.
I'm David, the creator of StyleLens.
As a frontend developer, I was getting constantly frustrated with how messy our CSS codebase would get, especially in large projects using Tailwind CSS. I found myself hunting down the same combinations of utility classes (`flex items-center p-4...`) across dozens of React and Vue components. It was a nightmare for consistency and maintenance.
So, I decided to build the tool I wished I had. StyleLens is a VS Code extension that automates this entire process.
It scans your entire workspace (React, Vue, etc.) and gives you a dashboard of: 1. *Duplicate Styles:* It groups identical class strings, even if they are in different files, and lets you refactor all of them into a single new class with one click. 2. *Dead Classes:* It finds classes used in your components that have no definition in your CSS, helping you clean up unused styles. You can even generate a boilerplate style for them instantly.
Under the hood, it uses the Babel parser for JSX, the official Vue compiler for Vue components, and a lot of logic to handle the global analysis. The whole journey, especially getting the parsers to work reliably, was a huge learning experience.
The extension is free and open-source. I'd love to get your feedback and hear what other tedious styling tasks you'd like to see automated.
Thanks for checking it out!
- *Marketplace Link:* https://marketplace.visualstudio.com/items?itemName=DavidVer...
- *GitHub Repo:* https://github.com/David-Verde