Unused CSS Vue is a Visual Studio Code extension that enhances your Vue single-file components (.vue files) by visually differentiating CSS class declarations. The extension automatically scans the <style> sections in your Vue files and decorates the CSS class selectors—changing their text color to
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Unused CSS Vue is a Visual Studio Code extension that enhances your Vue single-file components by visually indicating the usage of CSS classes declared in the <style> sections. The extension scans your Vue files to determine how many times each CSS class is used (both in static and dynamic bindings) and then decorates the CSS class selectors accordingly:
Unused classes are displayed in a darkened version of their declared color (or a default dark gray if no color is specified).
Used classes are decorated with a tooltip showing the number of times they are used, without altering their original color.
This makes it easier to identify and manage unused CSS rules and maintain a cleaner codebase.
Features
Automatic Analysis:
Scans the entire .vue file—including <template>, <script>, and <style> sections—to determine which CSS classes are used and how often.
Dynamic Decorations:
Unused classes are visually marked by darkening their text color based on their declared color in the <style> block (or using a default dark color). Used classes remain unchanged but show a tooltip with the usage count.
Live Updates:
The extension updates decorations in real-time as you edit your Vue components.
Support for Dynamic Bindings:
Handles both static class attributes (e.g., class="my-class") and dynamic class bindings (e.g., :class="{ 'my-class': condition }" or :class="['my-class', dynamicClass]").
Installation
From the VS Code Marketplace
Open Visual Studio Code.
Go to the Extensions view by clicking on the Extensions icon in the Activity Bar or pressing Ctrl+Shift+X.
Search for Unused CSS Vue.
Click Install.
From a VSIX Package
Download the .vsix file (e.g., unused-css-vue-0.0.1.vsix).
In VS Code, open the command palette (Ctrl+Shift+P) and run the command:
Select the downloaded file to install the extension.
Usage
Open a Vue File:
When you open a .vue file, the extension will automatically scan its contents.
View Decorations:
Unused CSS classes in the <style> block will appear in a darkened color.
Used CSS classes remain with their original color.
Hover over any CSS class declaration to see a tooltip that shows the number of times that class is used in the file.
Dynamic Updates:
As you modify your Vue file (for example, adding or removing class bindings), the decorations and tooltips will update automatically.
