This is not the official Visual Studio Code extension. This is a community-created extension that helps you write cleaner HTML by detecting and fixing common HTML issues in real-time.
Features
1. Attribute Validation
Duplicate Attributes: Detects and highlights duplicate attributes within HTML tags
Quick Fix support to remove duplicates
Special handling for class attributes with merge functionality
Detects duplicate class values within the same class attribute (e.g., class="col-12 col-md-12 col-12")
Quick Fix to automatically remove duplicate class values
Empty Attributes: Identifies attributes with empty values
Real-time Validation: Validates HTML as you type with configurable debouncing
2. Tag Validation
Mismatched Tags: Detects unclosed tags and mismatched opening/closing tags
Self-closing Tags: Properly handles HTML5 void elements
Nested Tags: Validates proper tag nesting
Tag Matching: Ensures all tags are properly closed and matched
3. User Interface
Status Bar Integration
Shows total number of issues
Breaks down issues by severity (errors, warnings, info)
Clickable to open Problems panel
Detailed tooltip with issue breakdown
Quick Fix Menu
Access via lightbulb icon or Ctrl+. (Cmd+. on macOS)
"Remove duplicate" action for all duplicate attributes
"Merge class values" action for duplicate class attributes
"Remove duplicate class values" action for duplicate values within a class attribute
Preferred actions marked with lightbulb icon
Problems Panel Integration
All issues listed with severity indicators
Click to navigate to the issue location
Hover for detailed information
Links to HTML5 documentation
4. Commands
HTML Guardian: Validate Current File (Ctrl+Shift+L)
Validates the currently open HTML file
Shows completion notification
HTML Guardian: Show Validation Issues
Opens Problems panel
Accessible via status bar click
HTML Guardian: Validate Workspace
Scans all HTML files in workspace
Shows progress notification
Supports cancellation
HTML Guardian: Toggle Validation
Enables/disables HTML validation
Updates configuration
5. Configuration
{
"htmlGuardian.enable": true, // Enable/disable the extension
"htmlGuardian.validateOnSave": true, // Validate on file save
"htmlGuardian.validateOnType": true // Validate while typing
}
Usage
Installation
Install from VS Code Marketplace
Reload VS Code if required
Basic Usage
Open any HTML file
Press Ctrl+Shift+L (Cmd+Shift+L on macOS) to activate validation
Issues are highlighted in real-time
Hover over issues for details
Use Quick Fix menu for automatic fixes
Quick Fix Examples
<!-- Before -->
<div class="foo" class="bar">
<!-- After "Remove duplicate" -->
<div class="foo">
<!-- After "Merge class values" -->
<div class="foo bar">
<!-- Before -->
<div id="test" id="test2">
<!-- After "Remove duplicate" -->
<div id="test">
Keyboard Shortcuts
Ctrl+Shift+L (Cmd+Shift+L on macOS): Validate current file
Ctrl+. (Cmd+. on macOS): Show Quick Fix menu
Click status bar item: Open Problems panel
Requirements
VS Code 1.85.0 or higher
Extension Settings
All settings are available in VS Code's settings UI under the "HTML Guardian" section.
