JSX Rules
JSX formatting, className handling, children, logical expressions, and ternaries
14 rules13 auto-isFixable1 isConfigurable
On This Page
classname-dynamic-at-endclassname-multilineclassname-no-extra-spacesclassname-orderjsx-children-on-new-linejsx-closing-bracket-spacingjsx-element-child-new-linejsx-logical-expression-simplifyjsx-parentheses-positionjsx-prop-naming-conventionjsx-simple-element-one-linejsx-string-value-trimjsx-ternary-formatno-empty-lines-in-jsx
classname-dynamic-at-end
auto-isFixable
Dynamic expressions in className must be at the end of class strings
Why: Static classes should come first for consistent Tailwind ordering
Correct
javascript
<div className={`flex items-center gap-4 ${className}`} />Incorrect
javascript
<div className={`${className} flex items-center gap-4`} />eslint.config.js
javascript
"code-style/classname-dynamic-at-end": "error"classname-multiline
auto-isFixableisConfigurable
Long className strings broken into multiple lines
Why: Long class strings are hard to read and review
Options
| Option | Type | Default | Description |
|---|---|---|---|
maxLength | integer | 80 | Maximum line length for class strings |
eslint.config.js
javascript
"code-style/classname-multiline": ["error", { maxLength: 80 }]Correct
javascript
<div className=" flex items-center justify-center rounded-lg p-4 "/>Incorrect
javascript
<div className="flex items-center justify-center rounded-lg p-4 font-bold" />eslint.config.js
javascript
"code-style/classname-multiline": "error"classname-no-extra-spaces
auto-isFixable
No extra/leading/trailing spaces in class strings
Why: Extra spaces are usually unintentional
Correct
javascript
<div className="flex items-center gap-4" />Incorrect
javascript
<div className="flex items-center gap-4" />eslint.config.js
javascript
"code-style/classname-no-extra-spaces": "error"classname-order
auto-isFixable
Tailwind class ordering in variables, objects, and return statements
Why: Complements tailwindcss/classnames-order for non-JSX contexts
Correct
javascript
const btn = "flex items-center bg-blue-500 hover:bg-blue-600";Incorrect
javascript
const btn = "hover:bg-blue-600 bg-blue-500 flex items-center";eslint.config.js
javascript
"code-style/classname-order": "error"jsx-children-on-new-line
auto-isFixable
Multiple JSX children: each on own line
Why: Individual lines make the component structure clear
Correct
javascript
<Container> <Header /> <Content /> <Footer /></Container>Incorrect
javascript
<Container><Header /><Content /><Footer /></Container>eslint.config.js
javascript
"code-style/jsx-children-on-new-line": "error"jsx-closing-bracket-spacing
auto-isFixable
No space before > or /> in JSX tags
Why: Standard JSX convention
Correct
javascript
<Button /><Input type="text" />Incorrect
javascript
<Button / ><Input type="text" / >eslint.config.js
javascript
"code-style/jsx-closing-bracket-spacing": "error"jsx-element-child-new-line
auto-isFixable
Nested JSX elements on new lines; text children can stay inline
Why: New lines make nesting visible
Correct
javascript
<Button> <Icon name="check" /></Button>Incorrect
javascript
<Button><Icon name="check" /></Button>eslint.config.js
javascript
"code-style/jsx-element-child-new-line": "error"jsx-logical-expression-simplify
auto-isFixable
Remove unnecessary parens around conditions and JSX in logical expressions
Why: Extra parentheses add visual noise
Correct
javascript
{isLoading && <Spinner />}Incorrect
javascript
{(isLoading) && (<Spinner />)}eslint.config.js
javascript
"code-style/jsx-logical-expression-simplify": "error"jsx-parentheses-position
auto-isFixable
Opening ( for multiline JSX on same line as return/=>
Why: Parenthesis on new line wastes space
Correct
javascript
const Card = () => ( <div className="card"> <h1>Title</h1> </div>);Incorrect
javascript
const Card = () => ( <div className="card"> <h1>Title</h1> </div> );eslint.config.js
javascript
"code-style/jsx-parentheses-position": "error"jsx-prop-naming-convention
report only
Props: camelCase for regular, kebab-case for data-*/aria-*
Why: Consistent prop naming follows React conventions
Correct
javascript
<Button onClick={handleClick} isDisabled={false} /><Button data-testid="submit" aria-label="Submit" />Incorrect
javascript
<Button on_click={handler} is_disabled={false} />eslint.config.js
javascript
"code-style/jsx-prop-naming-convention": "error"jsx-simple-element-one-line
auto-isFixable
Collapse simple JSX with single text/expression child to one line
Why: Simple elements don't need multi-line formatting
Correct
javascript
<Button>{buttonText}</Button><Title>Welcome</Title>Incorrect
javascript
<Button> {buttonText}</Button>eslint.config.js
javascript
"code-style/jsx-simple-element-one-line": "error"jsx-string-value-trim
auto-isFixable
No leading/trailing whitespace inside JSX string attribute values
Why: Whitespace in attribute values is usually unintentional
Correct
javascript
<Button className="primary" />Incorrect
javascript
<Button className=" primary " />eslint.config.js
javascript
"code-style/jsx-string-value-trim": "error"jsx-ternary-format
auto-isFixable
Simple ternaries on one line; complex branches get parens with indentation
Why: Consistent ternary formatting makes conditional rendering predictable
Correct
javascript
{isLoading ? <Spinner /> : <Content />} {isLoading ? ( <Spinner size="large" />) : ( <Content> <Header /> </Content>)}Incorrect
javascript
{isLoading ? <Spinner /> : <Content />}eslint.config.js
javascript
"code-style/jsx-ternary-format": "error"no-empty-lines-in-jsx
auto-isFixable
No empty lines between children or after opening/before closing tags
Why: Empty lines inside JSX break the component's visual structure
Correct
javascript
<div> <Header /> <Content /> <Footer /></div>Incorrect
javascript
<div> <Header /> <Content /></div>eslint.config.js
javascript
"code-style/no-empty-lines-in-jsx": "error"