Element name case

Rule ID:

element-case

Category:

Style

Standards:

-

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

• camelcase requires all element names to be camelCase.
• lowercase requires all element names to be lowercase.
• pascalcase requires all element names to be PascalCase.
• uppercase requires all element names to be UPPERCASE.

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.