id-naming-convention

This rule enforces consistent naming convention for id attribute values.

How to use

.eslintrc.js

module.exports = {
  rules: {
    "@html-eslint/id-naming-convention": "error",
  },
};

Rule Details

This rule supports 4 naming cases. camelCase, snake_case, PascalCase, kebab-case (default snake_case). It also supports regex, which allows you to configure a custom naming convention.

Options

1. "snake_case" (default): Enforce snake_case format.
2. "camelCase": Enforce camelCase format.
3. "PascalCase": Enforce PascalCase format.
4. "kebab-case": Enforce kebab-case format.
5. "regex", { "pattern": "^my-regex$" }: Enforce a format defined by a custom regex.

"snake_case" (default)

Examples of incorrect code for this rule with the default "snake_case" option:

<div id="Foo"></div>

Examples of correct code for this rule with the default "snake_case" option:

<div id="foo_bar"></div>

"camelCase"

Examples of incorrect code for this rule with the "camelCase" option:

<div id="foo_bar"></div>

Examples of correct code for this rule with the "camelCase" option:

<div id="fooBar"></div>

"PascalCase"

Examples of incorrect code for this rule with the "PascalCase" option:

<div id="foo_bar"></div>

Examples of correct code for this rule with the "PascalCase" option:

<div id="FooBar"></div>

"kebab-case"

Examples of incorrect code for this rule with the "kebab-case" option:

<div id="foo_bar"></div>

Examples of correct code for this rule with the "kebab-case" option:

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

"regex"

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

{
  "@html-eslint/id-naming-convention": ["error", "regex", { "pattern": "^([A-Z][a-z])+[A-Z]?$" }]
}

<div id="foo_bar"></div>

Examples of correct code for this rule with the "regex" option below:

{
  "@html-eslint/id-naming-convention": ["error", "regex", { "pattern": "^([A-Z][a-z])+[A-Z]?$" }]
}

<div id="CuStOmReGeX"></div>

Further Reading

Wiki - Naming convention