Html-Js-Css-Analyzer (CSS-ANALYZER) 🚀
Unified analysis of class / id usage across HTML / JS / TS / CSS / SCSS:
- Autocomplete (class, id)
- Go to Definition
- Undefined reference warnings
- Unused selector highlighting (grayed with Unnecessary)
- Partial HTMLHint diagnostics + Quick Fix
Lightweight, fast, no extra runtime baggage.
Feature Summary
| Feature |
Description |
| Autocomplete |
Context aware in class, id, #, ., classList.*, querySelector* |
| Go to Definition |
Jump token → declaration (local workspace + linked, excludes remote) |
| Undefined diagnostics |
Warn when referenced class/id is not defined |
| Unused diagnostics |
Unused selectors in CSS/SCSS shown as Hint + gray |
| Remote + Local CSS |
<link rel="stylesheet">, http/https, workspace .css/.scss scan |
| HTMLHint |
Subset rules + CodeAction |
Installation
- In VS Code marketplace: Html-Js-Css-Analyzer
- Or build VSIX (
npm run vsce) and install manually
Requires Node 18+, VS Code 1.104.0+.
Basic Usage
- Open your project
- Edit HTML / CSS / JS / TS → validation runs after 250ms debounce
- Undefined class/id → Warning in Problems panel
- Unused selectors → grayed in CSS/SCSS editors
- Use F12 (definition) / Ctrl+Space (completion)
Commands (Command Palette):
- Html-Js-Css-Analyzer: Validate Current Document
- Html-Js-Css-Analyzer: Clear Style Cache
Settings
Html-Js-Css-Analyzer.logLevel : off | error | info | debug (default debug)
Html-Js-Css-Analyzer.exclude : glob array of files/folders to ignore in scanning
Large build/output folders (dist, build, etc.) are excluded by default.
How It Works (Simplified)
- Events (open/save/change) → 250ms debounce → validate
- Collect selectors from:
- Current document (or embedded style tags)
- Linked
<link rel="stylesheet"> (local + remote)
- Workspace
*.css / *.scss (cap: 500 files)
- Collect usage tokens (class/id/classList/querySelector) from open docs
- Compare → produce undefined / unused diagnostics → store in DiagnosticCollection
Cache uses doc version / file mtime keyed entries with simple reinsertion policy.
| |
