Skip to content

Commit 56846a6

Browse files
ljharbljharb
authored
Merge pull request #707 from Kovensky/jsx-tag-spacing
[new] Add jsx-tag-spacing rule (Fixes #693)
2 parents cad882b + 1289239 commit 56846a6

File tree

5 files changed

+740
-1
lines changed

5 files changed

+740
-1
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ Finally, enable all of the rules that you would like to use. Use [our preset](#
132132
* [react/jsx-pascal-case](docs/rules/jsx-pascal-case.md): Enforce PascalCase for user-defined JSX components
133133
* [react/jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting
134134
* [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md): Validate spacing before closing bracket in JSX (fixable)
135+
* [react/jsx-tag-spacing](docs/rules/jsx-tag-spacing.md): Validate whitespace in and around the JSX opening and closing brackets (fixable)
135136
* [react/jsx-uses-react](docs/rules/jsx-uses-react.md): Prevent React to be incorrectly marked as unused
136137
* [react/jsx-uses-vars](docs/rules/jsx-uses-vars.md): Prevent variables used in JSX to be incorrectly marked as unused
137138
* [react/jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md): Prevent missing parentheses around multilines JSX (fixable)

‎docs/rules/jsx-tag-spacing.md

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
# Validate whitespace in and around the JSX opening and closing brackets (jsx-tag-spacing)
2+
3+
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.
4+
5+
## Rule Details
6+
7+
This rule checks the whitespace inside and surrounding the JSX syntactic elements.
8+
9+
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.
10+
11+
The default values are:
12+
13+
```json
14+
{
15+
"closingSlash": "never",
16+
"beforeSelfClosing": "always",
17+
"afterOpening": "never"
18+
}
19+
```
20+
21+
The options for each sub-option are documented in the following subsections.
22+
23+
### `closingSlash`
24+
25+
This check can be set to `"always"`, `"never"` or `"allow"` (to disable it).
26+
27+
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"`.
28+
29+
The following patterns are considered warnings when configured `"never"`:
30+
31+
```jsx
32+
<App/ >
33+
<input/
34+
>
35+
<Provider>< /Provider>
36+
```
37+
38+
The following patterns are not considered warnings when configured `"never"`:
39+
40+
```jsx
41+
<App/>
42+
<input/>
43+
<Provider></Provider>
44+
```
45+
46+
The following patterns are considered warnings when configured `"always"`:
47+
48+
```jsx
49+
<Hello/>
50+
<Goodbye></Goodbye>
51+
```
52+
53+
The following patterns are not considered warnings when configured `"never"`:
54+
55+
```jsx
56+
<Hello/ >
57+
<Goodbye>< /Goodbye>
58+
```
59+
60+
### `beforeSelfClosing`
61+
62+
This check can be set to `"always"`, `"never"` or `"allow"` (to disable it).
63+
64+
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"`.
65+
66+
The following patterns are considered warnings when configured `"always"`:
67+
68+
```jsx
69+
<Hello/>
70+
<Hello firstname="John"/>
71+
```
72+
73+
The following patterns are not considered warnings when configured `"always"`:
74+
75+
```jsx
76+
<Hello />
77+
<Hello firstName="John" />
78+
<Hello
79+
firstName="John"
80+
lastName="Smith"
81+
/>
82+
```
83+
84+
The following patterns are considered warnings when configured `"never"`:
85+
86+
```jsx
87+
<Hello />
88+
<Hello firstName="John" />
89+
```
90+
91+
The following patterns are not considered warnings when configured `"never"`:
92+
93+
```jsx
94+
<Hello/>
95+
<Hello firstname="John"/>
96+
<Hello
97+
firstName="John"
98+
lastName="Smith"
99+
/>
100+
```
101+
102+
### `afterOpening`
103+
104+
This check can be set to `"always"`, `"never"`, `"allow-multiline"` or `"allow"` (to disable it).
105+
106+
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"`.
107+
108+
The following patterns are considered warnings when configured `"always"`:
109+
110+
```jsx
111+
<Hello></Hello>
112+
<Hello firstname="John"/>
113+
<Hello
114+
firstName="John"
115+
lastName="Smith"
116+
/>
117+
```
118+
119+
The following patterns are not considered warnings when configured `"always"`:
120+
121+
```jsx
122+
< Hello></ Hello>
123+
< Hello firstName="John"/>
124+
<
125+
Hello
126+
firstName="John"
127+
lastName="Smith"
128+
/>
129+
```
130+
131+
The following patterns are considered warnings when configured `"never"`:
132+
133+
```jsx
134+
< Hello></ Hello>
135+
< Hello firstName="John"/>
136+
<
137+
Hello
138+
firstName="John"
139+
lastName="Smith"
140+
/>
141+
```
142+
143+
The following patterns are not considered warnings when configured `"never"`:
144+
145+
```jsx
146+
<Hello></Hello>
147+
<Hello firstname="John"/>
148+
<Hello
149+
firstName="John"
150+
lastName="Smith"
151+
/>
152+
```
153+
154+
The following patterns are considered warnings when configured `"allow-multiline"`:
155+
156+
```jsx
157+
< Hello></ Hello>
158+
< Hello firstName="John"/>
159+
< Hello
160+
firstName="John"
161+
lastName="Smith"
162+
/>
163+
```
164+
165+
The following patterns are not considered warnings when configured `"allow-multiline"`:
166+
167+
```jsx
168+
<Hello></Hello>
169+
<Hello firstName="John"/>
170+
<
171+
Hello
172+
firstName="John"
173+
lastName="Smith"
174+
/>
175+
```
176+
177+
## When Not To Use It
178+
179+
You can turn this rule off if you are not concerned with the consistency of spacing in or around JSX brackets.

‎index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ var allRules = {
5555
'no-children-prop': require('./lib/rules/no-children-prop'),
5656
'no-comment-textnodes': require('./lib/rules/no-comment-textnodes'),
5757
'require-extension': require('./lib/rules/require-extension'),
58-
'wrap-multilines': require('./lib/rules/wrap-multilines')
58+
'wrap-multilines': require('./lib/rules/wrap-multilines'),
59+
'jsx-tag-spacing': require('./lib/rules/jsx-tag-spacing')
5960
};
6061

6162
function filterRules(rules, predicate) {

0 commit comments

Comments
 (0)