@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:

// .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:

🔧

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

All

18

Spacing

5

Line breaks

4

Brackets

5

Indent

2

JSX

18

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-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-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	🔧

18 rules in total.