Enforce or forbid spaces after the opening bracket, before the closing bracket of self-closing elements, and between the angle bracket and slash of JSX closing or self-closing elements.
Fixable: This rule is automatically fixable using the --fix
flag on the command line.
This rule checks the whitespace inside and surrounding the JSX syntactic elements.
This rule takes one argument, an object with 3 possible keys: closingSlash
, beforeSelfClosing
and afterOpening
. Each key can receive the value "allow"
to disable that specific check.
The default values are:
{
"closingSlash": "never",
"beforeSelfClosing": "always",
"afterOpening": "never"
}
The options for each sub-option are documented in the following subsections.
This check can be set to "always"
, "never"
or "allow"
(to disable it).
If it is "never"
, the check warns whenever a space is separating the two characters in the JSX tokens </
and />
. If it is "always"
then it warns whenever a space is missing separating the mentioned two characters. The default value of this check is "never"
.
The following patterns are considered warnings when configured "never"
:
<App/ >
<input/
>
<Provider>< /Provider>
The following patterns are not considered warnings when configured "never"
:
<App/>
<input/>
<Provider></Provider>
The following patterns are considered warnings when configured "always"
:
<Hello/>
<Goodbye></Goodbye>
The following patterns are not considered warnings when configured "always"
:
<Hello/ >
<Goodbye>< /Goodbye>
This check can be set to "always"
, "never"
or "allow"
(to disable it).
If it is "always"
, the check warns whenever a space is missing before the closing bracket. If "never"
then it warns if a space is present before the closing bracket. The default value of this check is "always"
.
The following patterns are considered warnings when configured "always"
:
<Hello/>
<Hello firstname="John"/>
The following patterns are not considered warnings when configured "always"
:
<Hello />
<Hello firstName="John" />
<Hello
firstName="John"
lastName="Smith"
/>
The following patterns are considered warnings when configured "never"
:
<Hello />
<Hello firstName="John" />
The following patterns are not considered warnings when configured "never"
:
<Hello/>
<Hello firstname="John"/>
<Hello
firstName="John"
lastName="Smith"
/>
This check can be set to "always"
, "never"
, "allow-multiline"
or "allow"
(to disable it).
If it is "always"
, the check warns whenever a space is missing after the opening bracket of either a JSX opening element or closing element. If "never"
then it warns if a space is present after the opening bracket of either a JSX opening element or closing element. If "allow-multiline"
then it behaves like "never"
, but allows if the separator includes a newline character. The default value of this check is "never"
.
The following patterns are considered warnings when configured "always"
:
<Hello></Hello>
<Hello firstname="John"/>
<Hello
firstName="John"
lastName="Smith"
/>
The following patterns are not considered warnings when configured "always"
:
< Hello></ Hello>
< Hello firstName="John"/>
<
Hello
firstName="John"
lastName="Smith"
/>
The following patterns are considered warnings when configured "never"
:
< Hello></ Hello>
< Hello firstName="John"/>
<
Hello
firstName="John"
lastName="Smith"
/>
The following patterns are not considered warnings when configured "never"
:
<Hello></Hello>
<Hello firstname="John"/>
<Hello
firstName="John"
lastName="Smith"
/>
The following patterns are considered warnings when configured "allow-multiline"
:
< Hello></ Hello>
< Hello firstName="John"/>
< Hello
firstName="John"
lastName="Smith"
/>
The following patterns are not considered warnings when configured "allow-multiline"
:
<Hello></Hello>
<Hello firstName="John"/>
<
Hello
firstName="John"
lastName="Smith"
/>
You can turn this rule off if you are not concerned with the consistency of spacing in or around JSX brackets.