ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-heading

Using primitives allows you to delete bespoke component code and replace it with ready made solutions made by the Atlassian Design System Team.

Examples

This rule marks code as violations when it can be replaced 1:1 with a heading component.

Incorrect

<div>
  <h1>text</h1>
  <p>content</p>
</div>
^^^^

Correct

<div>
    <Heading size="xlarge">text</Heading>
    <p>content</p>
</div>

Currently, the rule is extremely defensive, only reporting on h1, h2, h3, h4, h5 and h6 elements that don't have any props outside of key, id and data-testid. We're only targeting instances that are the first child of their siblings.

Options

enableUnsafeAutofix: Rule reports errors with autofixes instead of suggestions. Defaults to false.

enableUnsafeReport: Rule reports errors for native elements that are not autofixable. Defaults to true.

Was this page helpful?

We use this feedback to improve our documentation.