Skip to content

@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

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

js
// 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],
      // ...
    }
  }
]
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:
💼
The rule is part of the shared configuration
🔧
Some problems reported are fixable by the --fix command line option
RuleDescription
jsx-child-element-spacingEnforce or disallow spaces inside of curly braces in JSX attributes and expressions
jsx-closing-bracket-locationEnforce closing bracket location in JSX💼🔧
jsx-closing-tag-locationEnforce closing tag location for multiline JSX💼🔧
jsx-curly-brace-presenceDisallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes💼🔧
jsx-curly-newlineEnforce consistent linebreaks in curly braces in JSX attributes and expressions💼🔧
jsx-curly-spacingEnforce or disallow spaces inside of curly braces in JSX attributes and expressions💼🔧
jsx-equals-spacingEnforce or disallow spaces around equal signs in JSX attributes💼🔧
jsx-first-prop-new-lineEnforce proper position of the first property in JSX💼🔧
jsx-indentEnforce JSX indentation💼🔧
jsx-indent-propsEnforce props indentation in JSX💼🔧
jsx-max-props-per-lineEnforce maximum of props on a single line in JSX💼🔧
jsx-newlineRequire or prevent a new line after jsx elements and expressions.🔧
jsx-one-expression-per-lineRequire one JSX element per line💼🔧
jsx-pascal-caseEnforce PascalCase for user-defined JSX components
jsx-props-no-multi-spacesDisallow multiple spaces between inline JSX props🔧
jsx-self-closing-compDisallow extra closing tags for components without children🔧
jsx-sort-propsEnforce props alphabetical sorting🔧
jsx-tag-spacingEnforce whitespace in and around the JSX opening and closing brackets💼🔧
jsx-wrap-multilinesDisallow missing parentheses around multiline JSX💼🔧
19 rules in total.

Released under the MIT License.