ESLint Stylistic@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-jsxnpm i -D @stylistic/eslint-plugin-jsxAdd @stylistic/jsx to your plugins list, and change the prefix for stylistic rules from react to @stylistic/js:
ts
// .eslintrc.js
module.exports = {
plugins: [
'@stylistic/jsx'
],
rules: {
'react/jsx-indent': ['error', 2],
'@stylistic/jsx/jsx-indent': ['error', 2],
// ...
}
};// .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
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 |