Third-Party Plugins
High-quality third-party React ESLint plugins that complement ESLint React
Under Construction
This page is under construction.
Recommended Third-Party Plugins
The following plugins cover areas not currently addressed by ESLint React and are recommended for specific use cases.
JSX Style
ESLint Stylistic (@stylistic/eslint-plugin) provides 19 JSX-specific rules, including:
| Rule | Description |
|---|---|
jsx-closing-bracket-location | Enforce closing bracket location in JSX |
jsx-closing-tag-location | Enforce closing tag location for multiline JSX |
jsx-curly-brace-presence | Disallow unnecessary curly braces around string literals |
jsx-curly-spacing | Enforce or disallow spaces inside JSX curly braces |
jsx-equals-spacing | Enforce or disallow spaces around = in JSX attributes |
jsx-first-prop-new-line | Enforce first prop position in multiline JSX |
jsx-indent-props | Enforce props indentation |
jsx-max-props-per-line | Limit props per line |
jsx-pascal-case | Enforce PascalCase for user-defined components |
jsx-quotes | Enforce single or double quotes in JSX attributes |
jsx-self-closing-comp | Require self-closing for components without children |
jsx-tag-spacing | Enforce whitespace around JSX tags |
jsx-wrap-multilines | Require parentheses around multiline JSX |
eslint-plugin-perfectionist by @azat-io is an ESLint plugin for sorting various data such as objects, imports, types, enums, and JSX props. All rules are automatically fixable.
| Rule | Description |
|---|---|
sort-jsx-props | Enforce sorted JSX props |
JSX Accessibility
eslint-plugin-jsx-a11y-x by es-tooling is a static AST checker for accessibility rules on JSX elements. It is a modern, actively maintained alternative to the classic eslint-plugin-jsx-a11y, with first-class support for ESLint Flat Config.
| Rule | Description |
|---|---|
alt-text | Enforce meaningful alternative text on images |
anchor-is-valid | Enforce all anchors are valid, navigable elements |
aria-props | Enforce all aria-* props are valid |
aria-role | Enforce valid, non-abstract ARIA roles |
click-events-have-key-events | Enforce clickable elements have keyboard event listeners |
interactive-supports-focus | Enforce interactive handlers are on focusable elements |
label-has-associated-control | Enforce label tags have text label and associated control |
no-autofocus | Disallow autoFocus prop |
no-static-element-interactions | Enforce non-interactive visible elements with handlers have a role |
prefer-tag-over-role | Enforce semantic DOM elements over ARIA role property |
React Refresh
eslint-plugin-react-refresh by @ArnaudBarre validates that your components can be safely updated with Fast Refresh (hot reloading).
| Rule | Description |
|---|---|
only-export-components | Ensures files only export React components to avoid Fast Refresh boundaries breaking |
Key features:
- Single, focused rule that catches common Fast Refresh pitfalls
- Built-in presets for Vite (
allowConstantExport) and Next.js (allows exports likerevalidateandfetchCache) - Configurable options for custom HOCs (
extraHOCs) and framework-specific exports (allowExportNames)
React Import Style
eslint-plugin-react-import by @marcalexiei enforces consistent React import patterns across your codebase.
| Rule | Description |
|---|---|
consistent-syntax | Enforces a uniform React import style (namespace, default, or named imports) |
Use case: Ideal for teams standardizing on import * as React from "react" or any single import convention.
If you maintain or know of a plugin that should be listed here, feel free to open an issue.