Unused CSS Finder is a Visual Studio Code extension that helps you identify and remove unused CSS classes from your project. It scans your files, finds unused CSS, and marks it as a problem directly in the editor.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Unused CSS Finder is a Visual Studio Code extension that helps you identify and remove unused CSS classes from your project. It scans your files, finds unused CSS, and marks it as a problem directly in the editor.
Features
Automatic Scanning: Searches for files .html, .jsx, .tsx, js, ts, php that could use the currently opened CSS file.
Problem Marking: Identifies unused CSS classes and marks them as problems in VS Code.
Supports Various File Types: Works with .css, .scss, .less, and .sass files.
Configurable Fallback Search: Option to enable/disable fallback search mechanism when no files are found near the CSS file.
Screenshots
How It Works
Scanning for Relevant Files: The extension looks for files that are in the same folder as currently opened CSS file.
Fallback to Parent Directories: If no files are found, it searches parent directories up the tree.
Analyzing Usage: Parses these files to determine which CSS classes are unused.
Marking Unused CSS: Highlights unused CSS in the editor and lists them in the Problems panel.
Configuration
The extension provides the following configuration options:
unusedCssFinder.enableFallbackSearch
Type: boolean
Default: true
Description: Enable fallback search mechanism when no files are found near the CSS file. When enabled, the extension will search parent directories if no relevant files are found in the same directory as the CSS file.
To configure this setting:
Open VS Code settings (Cmd/Ctrl + ,)
Search for "Unused CSS Finder"
Toggle the "Enable Fallback Search" option
Alternatively, add this to your settings.json:
{
"unusedCssFinder.enableFallbackSearch": false
}
Installation
Open Visual Studio Code.
Go to the Extensions view by clicking on the Extensions icon in the Activity Bar.
Search for Unused CSS Finder.
Click Install to add the extension.
Reload VS Code to activate the extension.
Usage
Open your CSS file in VS Code.
The extension automatically scans for unused CSS selectors in the currently opened file.
Unused selectors are highlighted in your CSS file.
Review and remove unused CSS to optimize your project.
Contributing
Contributions are welcome! Please submit issues and pull requests on the GitHub repository.
