@stylistic/eslint-plugin-jsx

JSX stylistic rules for ESLint, migrated from eslint-plugin-react. Decoupled from React and supports generic JSX syntax.

Credits to all contributors who have committed to the original rules.

TIP

We recommend using @stylistic/eslint-plugin as it includes the rules for both JavaScript and TypeScript

Install

npm i -D @stylistic/eslint-plugin-jsx

Add @stylistic/jsx to your plugins list, and change the prefix for stylistic rules from react to @stylistic/js:

Flat Config

// eslint.config.js
import stylisticJsx from '@stylistic/eslint-plugin-jsx'

export default [
  {
    plugins: {
    '@stylistic/jsx': stylisticJsx
    },
    rules: {
      'react/jsx-indent': ['error', 2],
      '@stylistic/jsx/jsx-indent': ['error', 2],
      // ...
    }
  }
]

Legacy Config

// .eslintrc.js
module.exports = {
  plugins: [
   '@stylistic/jsx'
  ],
  rules: {
    'react/jsx-indent': ['error', 2],
    '@stylistic/jsx/jsx-indent': ['error', 2],
    // ...
  }
}

Check out the migration guide for more details.

Rules

Each rule has emojis denoting:

💼

The rule is part of the shared configuration

🔧

Some problems reported are fixable by the --fix command line option

All

20

Spacing

5

Line breaks

5

Brackets

5

Indent

2

JSX

20

Rule	Description
jsx-child-element-spacing	Enforce or disallow spaces inside of curly braces in JSX attributes and expressions
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 JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes	💼	🔧
jsx-curly-newline	Enforce consistent linebreaks in curly braces in JSX attributes and expressions	💼	🔧
jsx-curly-spacing	Enforce or disallow spaces inside of curly braces in JSX attributes and expressions	💼	🔧
jsx-equals-spacing	Enforce or disallow spaces around equal signs in JSX attributes	💼	🔧
jsx-first-prop-new-line	Enforce proper position of the first property in JSX	💼	🔧
jsx-function-call-newline	Enforce line breaks before and after JSX elements when they are used as arguments to a function.	💼	🔧
jsx-indent	Enforce JSX indentation	💼	🔧
jsx-indent-props	Enforce props indentation in JSX	💼	🔧
jsx-max-props-per-line	Enforce maximum of props on a single line in JSX	💼	🔧
jsx-newline	Require or prevent a new line after jsx elements and expressions.		🔧
jsx-one-expression-per-line	Require one JSX element per line	💼	🔧
jsx-pascal-case	Enforce PascalCase for user-defined JSX components
jsx-props-no-multi-spaces	Disallow multiple spaces between inline JSX props		🔧
jsx-self-closing-comp	Disallow extra closing tags for components without children		🔧
jsx-sort-props	Enforce props alphabetical sorting		🔧
jsx-tag-spacing	Enforce whitespace in and around the JSX opening and closing brackets	💼	🔧
jsx-wrap-multilines	Disallow missing parentheses around multiline JSX	💼	🔧

20 rules in total.