no-restricted-attrs

This rule disallows use of specified attributes.

How to use

.eslintrc.js 
module.exports = {
  rules: {
    "@html-eslint/no-restricted-attrs": [
      "error",
      {
        tagPatterns: ["^div$", "^img$"],
        attrPatterns: ["data-.*"],
        message: "'data-x' is restricted.",
      },
    ],
  },
};

Rule Details

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

Options

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

  1. tagPatterns: an array of strings representing regular expression pattern, disallows tag name that match any of the patterns.
  2. attrPatterns: an array of strings representing regular expression pattern, disallows attribute name that match any of the patterns.
  3. message (optional): a string for custom message.
module.exports = {
  "rules": {
    "@html-eslint/no-restricted-attrs": [
      "error",
      {
        tagPatterns: ["^div$", "^img$"],
        attrPatterns: ["data-.*"]
        message: "\'data-x\' is restricted."
      },
      {
        tagPatterns: ["^img$"],
        attrPatterns: ["^alt$"]
        message: "\'alt\' is restricted."
      }
    ],
  }
};

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

{
  "tagPatterns": ["^img$", "^div$"],
  "attrPatterns": ["^data-.*"],
  "message": "Do not use data-* attr"
}
<div data-name="foo"></div>
<img data-name="foo"></div>