@montage-ui/eslint-plugin

English | 한국어

Install

pnpm install -D @montage-ui/eslint-plugin

Legacy config

  "extends": [
    "plugin:@montage-ui/recommended"
  ]

or

  "extends": [
    "plugin:@montage-ui/strict"
  ]

Flat config

import montagePlugin from '@montage-ui/eslint-plugin';

export default [montagePlugin.flatConfig.recommended];

or

import montagePlugin from '@montage-ui/eslint-plugin';

export default [montagePlugin.flatConfig.strict];

Rules

icon-button-uses-name

When using an icon as a button, you must specify the name or aria-label attribute.

<IconButton>
  <IconCheck />
</IconButton>

Without this attribute, screen readers cannot identify the purpose of the button.

// good
<IconButton name="Close modal">
  <IconCloseThick />
</IconButton>

<Button iconOnly aria-label="Remove bookmark">
  <IconBookFill />
</Button>

// bad
<IconButton>
  <IconCloseThick />
</IconButton>

<Button iconOnly>
  <IconBookFill />
</Button>

image-uses-alt

Visual images such as avatars and thumbnails must provide an alt attribute for screen readers.

<Avatar src="https://example.com/user.png" />

Without alt, screen readers cannot properly describe the image. Always provide alternative text.

// good
<Avatar alt="Jane's profile photo" src="https://example.com/user.png" />

<Thumbnail alt="About page" src="/thumb.png" />

<CardThumbnail alt="Frontend developer job posting" src="/cover.png" />

<Box as="img" alt="High-five event" src="/banner.png" />

// bad
<Avatar src="https://example.com/user.png" />

<Thumbnail src="/thumb.png" />

<CardThumbnail src="/cover.png" />

<Box as="img" src="/banner.png" />