require-attrs

This rule enforces the use of elements with specified attributes in Svelte components.

How to use

// eslint.config.js (flat config)
import htmlSvelte from "@html-eslint/eslint-plugin-svelte";
import * as svelteParser from "svelte-eslint-parser";

export default [
  {
    files: ["**/*.svelte"],
    plugins: {
      "@html-eslint/svelte": htmlSvelte,
    },
    languageOptions: {
      parser: svelteParser,
    },
    rules: {
      "@html-eslint/svelte/require-attrs": [
        "error",
        { tag: "img", attr: "alt" },
      ],
    },
  },
];

Rule Details

This rule requires specified attributes to be present on matching elements.

Attributes that cannot be resolved statically are not reported. A shorthand attribute ({alt}) counts as present, but its value is dynamic, so value and value-based conditions are not checked for it. When an element has a spread attribute ({...props}), the check is skipped unless the attribute is written after the last spread, since a spread can add or override attributes at runtime:

<img {...props} />        <!-- skipped: props may provide alt -->
<img alt="" {...props} /> <!-- skipped: props may override alt -->
<img {...props} alt="" /> <!-- checked: alt wins over props -->

Options

This rule takes an array of option objects:

1. tag (string, required): the HTML tag name to check.
2. attr (string, required): the attribute name that must be present.
3. value (string | boolean, optional): if specified, the attribute must have this exact value.
   1. A string requires that exact attribute value.
   2. true requires the boolean form: a bare attribute (disabled) or disabled={true}.
   3. false requires disabled={false}.
   4. Dynamic values (disabled={someVar}, shorthand {disabled}) are not compared.
4. message (string, optional): custom error message.
5. conditions (array, optional): conditions that must all be true before the attribute is enforced.

Examples of incorrect code for this rule:

<img />
<svg></svg>

Examples of correct code for this rule:

<img alt="" />
<svg viewBox="0 0 100 100"></svg>

With { tag: "input", attr: "disabled", value: true }:

<input />
<input disabled={false} />

<input disabled />
<input disabled={true} />