element name case (element-case)

Requires a specific case for element names.

Rule details

Examples of incorrect code for this rule:

<DIV>...</DIV>
error: Element "DIV" should be lowercase (element-case) at inline:1:2:
> 1 | <DIV>...</DIV>
    |  ^^^


1 error found.

Examples of correct code for this rule:

<div>...</div>

Matching case

When using styles such as pascalcase the start and end tag must have matching case:

<FooBar>...</Foobar>
error: Start and end tag must not differ in casing (element-case) at inline:1:13:
> 1 | <FooBar>...</Foobar>
    |             ^^^^^^^


1 error found.

Options

This rule takes an optional object:

{
    "style": "lowercase"
}

Style

Multiple styles can be set as an array of strings. With multiple styles the element name must match at least one pattern to be considered valid.

For instance, when configured with {"style": ["lowercase", "pascalcase"]} element names can be either lowercase or PascalCase:

<foo-bar></foo-bar>
<FooBar></FooBar>
<fooBar></fooBar>
error: Element "fooBar" should be lowercase or PascalCase (element-case) at inline:3:2:
  1 | <foo-bar></foo-bar>
  2 | <FooBar></FooBar>
> 3 | <fooBar></fooBar>
    |  ^^^^^^


1 error found.