@mazhu/weblinter

A comprehensive CLI tool for HTML, CSS, JavaScript linting and accessibility checks.

Features

• 📄 HTML Linting - Using HTMLHint for HTML code quality checks
• 🎨 CSS Linting - Using Stylelint for CSS code quality checks
• ⚙️ JavaScript Linting - Using ESLint for JS code quality checks
• ♿ Accessibility Checks - Using axe-core for a11y compliance
• 🔍 All-in-one Check - Run all linters on a directory
• 📊 Multiple Output Formats - Text and JSON output formats
• 🔧 Auto-fix Support - Automatically fix JavaScript issues

Installation

# Install globally
npm install -g @mazhu/weblinter

# Or install as a dev dependency
npm install --save-dev @mazhu/weblinter

Usage

Basic Commands

# Lint HTML file(s)
weblinter html <file>
weblinter html "src/**/*.html"

# Lint CSS file(s)
weblinter css <file>
weblinter css "styles/**/*.css"

# Lint JavaScript file(s)
weblinter js <file>
weblinter js "src/**/*.js"

# Check accessibility issues
weblinter a11y <file>
weblinter a11y "public/**/*.html"

# Run all linters on a directory
weblinter all <directory>
weblinter all ./src

Command Options

HTML Linting

weblinter html <file> [options]

Options:
  -c, --config <path>   Custom HTMLHint config file
  -f, --format <format> Output format (text|json) (default: "text")

CSS Linting

weblinter css <file> [options]

Options:
  -c, --config <path>   Custom Stylelint config file
  -f, --format <format> Output format (text|json) (default: "text")

JavaScript Linting

weblinter js <file> [options]

Options:
  -c, --config <path>   Custom ESLint config file
  -f, --format <format> Output format (text|json) (default: "text")
  --fix                 Automatically fix problems

Accessibility Check

weblinter a11y <file> [options]

Options:
  -r, --rules <rules>   Comma-separated list of rules to run
  -f, --format <format> Output format (text|json) (default: "text")

All-in-one Check

weblinter all <directory> [options]

Options:
  -e, --exclude <patterns>  Comma-separated glob patterns to exclude
  -f, --format <format>     Output format (text|json) (default: "text")
  --fix                     Automatically fix JS problems where possible

Examples

# Check a single HTML file
weblinter html index.html

# Check all HTML files in src directory
weblinter html "src/**/*.html"

# Check CSS with custom config
weblinter css styles.css --config .stylelintrc.json

# Auto-fix JavaScript issues
weblinter js "src/**/*.js" --fix

# Check accessibility with specific rules
weblinter a11y index.html --rules "image-alt,label,color-contrast"

# Run all linters on a project
weblinter all ./src --exclude "**/vendor/**,**/legacy/**"

Default Rules

HTML Rules

• tagname-lowercase - Tag names must be lowercase
• attr-lowercase - Attribute names must be lowercase
• attr-value-double-quotes - Attribute values must be in double quotes
• doctype-first - DOCTYPE must be first
• tag-pair - Tags must be paired
• spec-char-escape - Special characters must be escaped
• id-unique - ID attributes must be unique
• src-not-empty - src attributes must not be empty
• attr-no-duplication - No duplicate attributes
• title-require - title tag is required
• alt-require - alt attribute required for images
• And more...

CSS Rules

• color-no-invalid-hex - No invalid hex colors
• font-family-no-duplicate-names - No duplicate font names
• unit-no-unknown - No unknown units
• property-no-unknown - No unknown properties
• And more...

JavaScript Rules

• no-unused-vars - No unused variables
• no-undef - No undefined variables
• no-var - Use let/const instead of var
• prefer-const - Prefer const for variables that don't change
• semi - Require semicolons
• quotes - Enforce single quotes
• indent - Consistent indentation
• And more...

Accessibility Rules

• image-alt - Images must have alt text
• label - Form elements must have labels
• color-contrast - Sufficient color contrast
• html-has-lang - HTML must have lang attribute
• document-title - Document must have title
• And more...

Programmatic API

You can also use weblinter programmatically:

const { lintHTML, lintCSS, lintJS, checkA11y, lintAll } = require('@mazhu/weblinter');

// Lint HTML
const htmlResults = await lintHTML('index.html');

// Lint CSS
const cssResults = await lintCSS('styles.css');

// Lint JS
const jsResults = await lintJS('app.js', { fix: true });

// Check accessibility
const a11yResults = await checkA11y('index.html');

// Run all linters
const allResults = await lintAll('./src');

Configuration

Custom HTMLHint Config

Create .htmlhintrc.json:

{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "doctype-first": true,
  "tag-pair": true,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true
}

Custom Stylelint Config

Create .stylelintrc.json:

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "color-no-invalid-hex": true,
    "unit-no-unknown": true
  }
}

Custom ESLint Config

Create .eslintrc.json:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "rules": {
    "no-unused-vars": "warn",
    "no-undef": "error",
    "semi": ["error", "always"]
  }
}

Output Formats

Text Format (Default)

📄 HTML Linting Results

File: index.html
────────────────────────────────────────────────────────────
  error  line 10, col 5  alt attribute required
    Rule: alt-require

────────────────────────────────────────────────────────────
Summary:
  Errors: 1
  Warnings: 0

JSON Format

{
  "results": [
    {
      "file": "index.html",
      "messages": [
        {
          "line": 10,
          "col": 5,
          "type": "error",
          "message": "alt attribute required",
          "rule": { "id": "alt-require" }
        }
      ]
    }
  ],
  "errors": 1,
  "warnings": 0
}

License

MIT © Mike Wang

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please file an issue on GitHub.