noMisplacedListElements (JavaScript)

Summary

Rule available since: v2.5.15
Diagnostic Category: lint/nursery/noMisplacedListElements
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from @html-eslint/require-li-container

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noMisplacedListElements": "error"
6
      }
7
    }
8
  }
9
}

Description

Require <li> elements with an HTML element parent to be children of <ul>, <ol>, or <menu>.

List items need a list container to define their relationship to the other items. Placing a list item outside a list container produces invalid HTML.

The parent is the element the item is rendered into. Fragments, conditional and logical expressions, arrays, and callbacks passed to map, flatMap, or Array.from are looked through to find it.

List items without an HTML element parent are ignored, including standalone items, items returned from components, items stored in variables, and component children. Their container may be supplied where they are rendered.

Examples

Invalid

1
<div><li>Item</li></div>

code-block.jsx:1:6 lint/nursery/noMisplacedListElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <li> element is outside a list container.
  
  > 1 │ <div><li>Item</li></div>
      │      ^^^^
    2 │ 
  
  ℹ List items need a list container to form a valid HTML list.
  
  ℹ Make this element a direct child of <ul>, <ol>, or <menu>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<ul><div><li /></div></ul>

code-block.jsx:1:10 lint/nursery/noMisplacedListElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <li> element is outside a list container.
  
  > 1 │ <ul><div><li /></div></ul>
      │          ^^^^^^
    2 │ 
  
  ℹ List items need a list container to form a valid HTML list.
  
  ℹ Make this element a direct child of <ul>, <ol>, or <menu>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<div>{items.map((item) => <li key={item}>{item}</li>)}</div>

code-block.jsx:1:27 lint/nursery/noMisplacedListElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <li> element is outside a list container.
  
  > 1 │ <div>{items.map((item) => <li key={item}>{item}</li>)}</div>
      │                           ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ List items need a list container to form a valid HTML list.
  
  ℹ Make this element a direct child of <ul>, <ol>, or <menu>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<>
2
    <ul><li>Item</li></ul>
3
    <ol><li>Item</li></ol>
4
    <menu><li /></menu>
5
</>

1
<ul>{items.map((item) => <li key={item}>{item}</li>)}</ul>

1
<li>Item rendered in a list elsewhere</li>

1
const item = <li>Item rendered in a list elsewhere</li>;

1
function Item() {
2
    return <li>Item rendered in a list elsewhere</li>;
3
}

1
<List><li>Component child</li></List>