Skip to content

Commit 493e23a

Browse files
etherealm13etherealm13
committed
[New] padding-lines-between-tags: add rule and test cases
1 parent 983b88d commit 493e23a

File tree

4 files changed

+381
-45
lines changed

4 files changed

+381
-45
lines changed

Diff for: ‎README.md

+39-45
Original file line numberDiff line numberDiff line change
@@ -34,47 +34,47 @@ You should also specify settings that will be shared across all the plugin rules
3434

3535
```json5
3636
{
37-
"settings": {
38-
"react": {
39-
"createClass": "createReactClass", // Regex for Component Factory to use,
40-
// default to "createReactClass"
41-
"pragma": "React", // Pragma to use, default to "React"
42-
"fragment": "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment"
43-
"version": "detect", // React version. "detect" automatically picks the version you have installed.
44-
// You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
45-
// Defaults to the "defaultVersion" setting and warns if missing, and to "detect" in the future
46-
"defaultVersion": "", // Default React version to use when the version you have installed cannot be detected.
47-
// If not provided, defaults to the latest React version.
48-
"flowVersion": "0.53" // Flow version
37+
settings: {
38+
react: {
39+
createClass: 'createReactClass', // Regex for Component Factory to use,
40+
// default to "createReactClass"
41+
pragma: 'React', // Pragma to use, default to "React"
42+
fragment: 'Fragment', // Fragment to use (may be a property of <pragma>), default to "Fragment"
43+
version: 'detect', // React version. "detect" automatically picks the version you have installed.
44+
// You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
45+
// Defaults to the "defaultVersion" setting and warns if missing, and to "detect" in the future
46+
defaultVersion: '', // Default React version to use when the version you have installed cannot be detected.
47+
// If not provided, defaults to the latest React version.
48+
flowVersion: '0.53', // Flow version
4949
},
50-
"propWrapperFunctions": [
51-
// The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
52-
"forbidExtraProps",
53-
{"property": "freeze", "object": "Object"},
54-
{"property": "myFavoriteWrapper"},
55-
// for rules that check exact prop wrappers
56-
{"property": "forbidExtraProps", "exact": true}
50+
propWrapperFunctions: [
51+
// The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
52+
'forbidExtraProps',
53+
{ property: 'freeze', object: 'Object' },
54+
{ property: 'myFavoriteWrapper' },
55+
// for rules that check exact prop wrappers
56+
{ property: 'forbidExtraProps', exact: true },
5757
],
58-
"componentWrapperFunctions": [
59-
// The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
60-
"observer", // `property`
61-
{"property": "styled"}, // `object` is optional
62-
{"property": "observer", "object": "Mobx"},
63-
{"property": "observer", "object": "<pragma>"} // sets `object` to whatever value `settings.react.pragma` is set to
58+
componentWrapperFunctions: [
59+
// The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
60+
'observer', // `property`
61+
{ property: 'styled' }, // `object` is optional
62+
{ property: 'observer', object: 'Mobx' },
63+
{ property: 'observer', object: '<pragma>' }, // sets `object` to whatever value `settings.react.pragma` is set to
6464
],
65-
"formComponents": [
65+
formComponents: [
6666
// Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />
67-
"CustomForm",
68-
{"name": "SimpleForm", "formAttribute": "endpoint"},
69-
{"name": "Form", "formAttribute": ["registerEndpoint", "loginEndpoint"]}, // allows specifying multiple properties if necessary
67+
'CustomForm',
68+
{ name: 'SimpleForm', formAttribute: 'endpoint' },
69+
{ name: 'Form', formAttribute: ['registerEndpoint', 'loginEndpoint'] }, // allows specifying multiple properties if necessary
7070
],
71-
"linkComponents": [
71+
linkComponents: [
7272
// Components used as alternatives to <a> for linking, eg. <Link to={ url } />
73-
"Hyperlink",
74-
{"name": "MyLink", "linkAttribute": "to"},
75-
{"name": "Link", "linkAttribute": ["to", "href"]}, // allows specifying multiple properties if necessary
76-
]
77-
}
73+
'Hyperlink',
74+
{ name: 'MyLink', linkAttribute: 'to' },
75+
{ name: 'Link', linkAttribute: ['to', 'href'] }, // allows specifying multiple properties if necessary
76+
],
77+
},
7878
}
7979
```
8080

@@ -84,9 +84,7 @@ Add "react" to the plugins section.
8484

8585
```json
8686
{
87-
"plugins": [
88-
"react"
89-
]
87+
"plugins": ["react"]
9088
}
9189
```
9290

@@ -136,9 +134,7 @@ This pairs well with the `eslint:all` rule.
136134

137135
```json
138136
{
139-
"plugins": [
140-
"react"
141-
],
137+
"plugins": ["react"],
142138
"extends": ["eslint:all", "plugin:react/all"]
143139
}
144140
```
@@ -205,6 +201,7 @@ Refer to the [official docs](https://eslint.org/docs/latest/user-guide/configuri
205201
The schema of the `settings.react` object would be identical to that of what's already described above in the legacy config section.
206202

207203
<!-- markdownlint-disable-next-line no-duplicate-heading -->
204+
208205
### Flat Configs
209206

210207
This plugin exports 3 flat configs:
@@ -375,6 +372,7 @@ module.exports = [
375372
| [no-unused-prop-types](docs/rules/no-unused-prop-types.md) | Disallow definitions of unused propTypes | | | | | |
376373
| [no-unused-state](docs/rules/no-unused-state.md) | Disallow definitions of unused state | | | | | |
377374
| [no-will-update-set-state](docs/rules/no-will-update-set-state.md) | Disallow usage of setState in componentWillUpdate | | | | | |
375+
| [padding-lines-between-tags](docs/rules/padding-lines-between-tags.md) | Enforce no padding lines between tags for React Components | | | 🔧 | | |
378376
| [prefer-es6-class](docs/rules/prefer-es6-class.md) | Enforce ES5 or ES6 class for React Components | | | | | |
379377
| [prefer-exact-props](docs/rules/prefer-exact-props.md) | Prefer exact proptype definitions | | | | | |
380378
| [prefer-read-only-props](docs/rules/prefer-read-only-props.md) | Enforce that props are read-only | | | 🔧 | | |
@@ -407,15 +405,11 @@ module.exports = [
407405

408406
[npm-url]: https://npmjs.org/package/eslint-plugin-react
409407
[npm-image]: https://img.shields.io/npm/v/eslint-plugin-react.svg
410-
411408
[status-url]: https://github.com/jsx-eslint/eslint-plugin-react/pulse
412409
[status-image]: https://img.shields.io/github/last-commit/jsx-eslint/eslint-plugin-react.svg
413-
414410
[tidelift-url]: https://tidelift.com/subscription/pkg/npm-eslint-plugin-react?utm_source=npm-eslint-plugin-react&utm_medium=referral&utm_campaign=readme
415411
[tidelift-image]: https://tidelift.com/badges/package/npm/eslint-plugin-react?style=flat
416-
417412
[package-url]: https://npmjs.org/package/eslint-plugin-react
418413
[npm-version-svg]: https://versionbadg.es/jsx-eslint/eslint-plugin-react.svg
419-
420414
[actions-image]: https://img.shields.io/endpoint?url=https://github-actions-badge-u3jn4tfpocch.runkit.sh/jsx-eslint/eslint-plugin-react
421415
[actions-url]: https://github.com/jsx-eslint/eslint-plugin-react/actions

Diff for: ‎docs/rules/padding-lines-between-tags.md

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# Enforce no padding lines between tags for React Components (`react/padding-lines-between-tags`)
2+
3+
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
4+
5+
<!-- end auto-generated rule header -->
6+
7+
Require or disallow newlines between sibling tags in React.
8+
9+
## Rule Details Options
10+
11+
```json
12+
{
13+
"padding-line-between-tags": [
14+
"error",
15+
[{ "blankLine": "always", "prev": "*", "next": "*" }]
16+
]
17+
}
18+
```
19+
20+
This rule requires blank lines between each sibling HTML tag by default.
21+
22+
A configuration is an object which has 3 properties; `blankLine`, `prev` and `next`. For example, `{ blankLine: "always", prev: "br", next: "div" }` means “one or more blank lines are required between a `br` tag and a `div` tag.” You can supply any number of configurations. If a tag pair matches multiple configurations, the last matched configuration will be used.
23+
24+
- `blankLine` is one of the following:
25+
- `always` requires one or more blank lines.
26+
- `never` disallows blank lines.
27+
- `consistent` requires or disallows a blank line based on the first sibling element.
28+
- `prev` any tag name without brackets.
29+
- `next` any tag name without brackets.
30+
31+
### Disallow blank lines between all tags
32+
33+
`{ blankLine: 'never', prev: '*', next: '*' }`
34+
35+
<eslint-code-block fix :rules="{'padding-line-between-tags': ['error', [
36+
{ blankLine: 'never', prev: '*', next: '*' }
37+
]]}">
38+
39+
```react
40+
<App>
41+
<div>
42+
<div></div>
43+
<div>
44+
</div>
45+
<div />
46+
</div>
47+
</App>
48+
```
49+
50+
</eslint-code-block>
51+
52+
### Require newlines after `<br>`
53+
54+
`{ blankLine: 'always', prev: 'br', next: '*' }`
55+
56+
<eslint-code-block fix :rules="{'react/padding-line-between-tags': ['error', [
57+
{ blankLine: 'always', prev: 'br', next: '*' }
58+
]]}">
59+
60+
```react
61+
<App>
62+
<div>
63+
<ul>
64+
<li>
65+
</li>
66+
<br />
67+
68+
<li>
69+
</li>
70+
</ul>
71+
</div>
72+
</App>
73+
```
74+
75+
</eslint-code-block>
76+
77+
### Require newlines between `<br>` and `<img>`
78+
79+
`{ blankLine: 'always', prev: 'br', next: 'img' }`
80+
81+
<eslint-code-block fix :rules="{'react/padding-line-between-tags': ['error', [
82+
{ blankLine: 'always', prev: 'br', next: 'img' },
83+
{ blankLine: 'always', prev: 'li', next: 'li' },
84+
]]}">
85+
86+
```react
87+
<App>
88+
<div>
89+
<ul>
90+
<li>
91+
</li>
92+
<li>
93+
</li>
94+
<br />
95+
<img />
96+
<li>
97+
</li>
98+
</ul>
99+
</div>
100+
</App>
101+
```
102+
103+
```react [Fixed]
104+
<App>
105+
<div>
106+
<ul>
107+
<li>
108+
</li>
109+
110+
<li>
111+
</li>
112+
<br />
113+
114+
<img />
115+
<li>
116+
</li>
117+
</ul>
118+
</div>
119+
</App>
120+
```
121+
122+
</eslint-code-block>
123+
124+
### Require consistent newlines
125+
126+
`{ blankLine: 'consistent', prev: '*', next: '*' }`
127+
128+
<eslint-code-block fix :rules="{'react/padding-line-between-tags': ['error', [
129+
{ blankLine: 'consistent', prev: '*', next: '*' }
130+
]]}">
131+
132+
```react
133+
<App>
134+
<div>
135+
<ul>
136+
<li />
137+
<li />
138+
<li />
139+
</ul>
140+
141+
<div />
142+
143+
<div />
144+
</div>
145+
</App>
146+
```
147+
148+
</eslint-code-block>
149+
150+
## When Not To Use It
151+
152+
If you are not using React.

Diff for: ‎lib/rules/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ module.exports = {
8989
'no-unused-state': require('./no-unused-state'),
9090
'no-object-type-as-default-prop': require('./no-object-type-as-default-prop'),
9191
'no-will-update-set-state': require('./no-will-update-set-state'),
92+
'padding-lines-between-tags': require('./padding-lines-between-tags'),
9293
'prefer-es6-class': require('./prefer-es6-class'),
9394
'prefer-exact-props': require('./prefer-exact-props'),
9495
'prefer-read-only-props': require('./prefer-read-only-props'),

0 commit comments

Comments
 (0)