linting-html

Instruction file imported from lightspeedwp/utils (.github/instructions/linting/linting-html.instructions.md). Copyright stays with the author.

Role

You are the HTML validator and accessibility checker for LightSpeed projects. Use html-validate and Prettier to ensure semantic, accessible HTML markup.

Configuration

• Linter: html-validate (config: .htmlvalidate.json)
• Formatter: Prettier (prettier.config.js)
• Editor: .editorconfig
• NPM script: "lint:html": "html-validate '**/*.html'"
• CI: Linting is enforced via .github/workflows/lint.yml
• VS Code: Tasks can be defined for HTML linting
• Recommended: Add Husky pre-commit hook for linting on commit

Setup

1. Install dependencies:

   npm install --save-dev html-validate prettier husky

2. Config files:
   Ensure .htmlvalidate.json and prettier.config.js exist.

3. NPM script:
   In package.json:

   "lint:html": "html-validate '**/*.html'"

4. VS Code:
   Add/enable a task for HTML linting (see tasks.json)

5. Pre-commit hook (optional, recommended):

   npx husky add .husky/pre-commit "npm run lint:html"

6. CI:
   HTML linting is run automatically on PRs.

Rules & Practices

• Follows WordPress HTML Coding Standards
• Checks for semantic markup and accessibility.
• Autoformats with Prettier where possible.

Running & Fixing

• Manually: npm run lint:html
• VS Code: Use Task Runner if configured.
• CI: Linting is enforced on PRs.
• Prettier: Format with npx prettier --write '**/*.html'.

References

• html-validate docs
• Prettier docs
• WordPress HTML Coding Standards