Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>HTML Guardian SPNew to Visual Studio Code? Get it now.
HTML Guardian SP

HTML Guardian SP

SMIT_PATEL_SP

|
47 installs
| (0) | Free
A powerful HTML validation extension for Visual Studio Code that detects duplicate attributes and other common HTML issues.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

HTML Guardian

⚠️ Disclaimer ⚠️

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

  1. Installation

    • Install from VS Code Marketplace
    • Reload VS Code if required
  2. 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
  3. 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">
    
  4. 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.

Known Issues

  • None at the moment

Release Notes

See CHANGELOG.md for a complete list of changes.

Contributing

We welcome your feedback and suggestions to improve these snippets.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

  • Thanks to the VS Code team for their extensible editor & excellent extension API
  • Thanks to all contributors who have helped improve this extension

Support

If you find this extension helpful, please consider:

  • Sharing the extension
  • Starring the repository
  • Reporting bugs
  • Suggesting new features
  • Giving appropriate rating of extension on marketplace
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft