id-style

Specify a format for the value inside the id attribute, when all set all ids must fit the format

Given:

  {
    "rules": {
      "id-style": ["error", "underscore"]
    }
  }

The following patterns are considered violations:

  <button id="buttonBlue"></button>

  <button id="button--blue"></button>

The following patterns are not considered violations:

  <button id="button_blue"></button>

Options

The rule accept the following as rule options.

module.exports = {
  rules: {
    "id-style": [true, /^[0-9a-o]+$/],
  },
};

A string value form the following list value [lowercase, underscore, dash, camel, bem, none] deprecated

{
  "rules": {
    "id-style": [true, "dash"]
  }
}

"id-style": [true, {
  format: "lowercase" | "underscore" | "dash" | "camel" | "bem" | "none" | RegExp;
  ignore?: string | RegExp
}],

Format used to validate ids, possible values are :

"lowercase": Consists of lowercase letters
"underscore": Lowercase and underscore-separated
"dash": Lowercase and separated by hyphens
"camel": camelCase (or CamelCase)
"bem": The BEM (block, element, modifier) syntax
"none": Does not enforce a format and prevent the rule from using the format specified by the rule id-class-style.
A regexp: A regexp can also be provided for custom id style validation

String or regexp used to ignore some classnames.

module.exports = {
  rules: {
    "id-style": [
      "error", 
      {
        ignore: /^id-\w+/
      }
    ]
  },
};

The following patterns are considered violations:

  <div id="foo"></div>

The following patterns are not considered violations:

  <div id="id-foo"></div>