no-restricted-attr-values

This rule disallows use of specified attribute values.

How to use

.eslintrc.js

module.exports = {
  rules: {
    '@html-eslint/no-restricted-attr-values': ["error",  {
    attrPatterns: ["class"],
    attrValuePatterns: ["data-.*"],
    message: "\'data-x\' is restricted."
  }]
  }
};

Rule Details

This rule allows you to specify attribute values that you don't want to use in your application.

Options

This rule takes an array of option objects, where the attrPatterns and attrValuePatterns are specified.

1. attrPatterns: an array of strings representing regular expression pattern, disallows attribute names that match any of the patterns.
2. attrValuePatterns: an array of strings representing regular expression pattern, disallows attribute values that match any of the patterns.
3. message (optional): a string for custom message.

module.exports = {
  rules: {
    "@html-eslint/no-restricted-attrs": [
      "error",
      {
        attrPatterns: ["class", "alt"],
        attrValuePatterns: ["data-.*"],
        message: "'data-x' is restricted.",
      },
      {
        attrPatterns: [".*"],
        attrValuePatterns: ["^foo$"],
        message: "'foo' is restricted.",
      },
    ],
  },
};

Examples of incorrect code for this rule with the option below:

{
  "attrPatterns": ["data-.*"],
  "attrValuePatterns": ["foo"],
  "message": "Do not use foo attr value"
}

<div data-name="foo"></div>
<img data-name="foo"></div>