Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixes #2045
- Loading branch information
Showing
4 changed files
with
359 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
# Disallow padding blank lines in a jsx element (react/jsx-no-padded-children) | ||
|
||
**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line. | ||
|
||
## Rule Details | ||
|
||
This rule will disallow padding blank lines in the start and end of a jsx element. | ||
|
||
The following patterns are considered warnings: | ||
|
||
```jsx | ||
var Hello = <div> | ||
test | ||
|
||
</div>; | ||
``` | ||
|
||
```jsx | ||
var Hello = <div> | ||
|
||
|
||
<Foo /> | ||
</div>; | ||
``` | ||
|
||
The following patterns are **not** considered warnings: | ||
|
||
```jsx | ||
var Hello = <div> {'test'} </div>; | ||
``` | ||
|
||
```jsx | ||
var Hello = <div> | ||
{'test'} | ||
</div>; | ||
``` | ||
|
||
## When Not To Use It | ||
|
||
You can turn this rule off if you are not concerned with the consistency of padding blank lines in jsx element. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
/** | ||
* @fileoverview Disallow padding blank lines in the children of a JSX element | ||
* @author Chiawen Chen | ||
*/ | ||
|
||
'use strict'; | ||
|
||
const docsUrl = require('../util/docsUrl'); | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
module.exports = { | ||
meta: { | ||
docs: { | ||
description: 'Disallow padding blank lines in the children of a JSX element.', | ||
category: 'Stylistic Issues', | ||
recommended: false, | ||
url: docsUrl('jsx-no-padded-children') | ||
}, | ||
fixable: 'whitespace', | ||
type: 'layout' | ||
}, | ||
|
||
create: function(context) { | ||
const message = 'JSX children must not be padded by blank lines.'; | ||
|
||
/** | ||
* Test wether input string has 2 or more `\n` . | ||
* @param {string} str String to test | ||
* @returns {boolean} Result | ||
*/ | ||
function hasTwoNewlines(str) { | ||
let count = 0; | ||
for (const c of str) { | ||
if (c === '\n') { | ||
count += 1; | ||
if (count >= 2) { | ||
return true; | ||
} | ||
} | ||
} | ||
return false; | ||
} | ||
|
||
|
||
function checkPaddingTop (node) { | ||
const child = node.children[0]; | ||
|
||
if (child && (child.type === 'JSXText' || child.type === 'Literal')) { | ||
const match = /^\s*/.exec(child.raw); | ||
const leadingSpaces = match && match[0]; | ||
|
||
if (leadingSpaces && hasTwoNewlines(leadingSpaces)) { | ||
context.report({ | ||
node: child, | ||
message, | ||
fix(fixer) { | ||
return fixer.removeRange([ | ||
child.start + leadingSpaces.indexOf('\n'), | ||
child.start + leadingSpaces.lastIndexOf('\n') | ||
]); | ||
} | ||
}); | ||
} | ||
} | ||
} | ||
|
||
function checkPaddingBottom (node) { | ||
const child = node.children[node.children.length - 1]; | ||
|
||
if (child && (child.type === 'JSXText' || child.type === 'Literal')) { | ||
const match = /\s*$/.exec(child.raw); | ||
const trailingSpaces = match && match[0]; | ||
const paddingStart = match && match.index; | ||
|
||
if (trailingSpaces && hasTwoNewlines(trailingSpaces)) { | ||
context.report({ | ||
node: child, | ||
message, | ||
fix(fixer) { | ||
return fixer.removeRange([ | ||
child.start + paddingStart + trailingSpaces.indexOf('\n'), | ||
child.start + paddingStart + trailingSpaces.lastIndexOf('\n') | ||
]); | ||
} | ||
}); | ||
} | ||
} | ||
} | ||
|
||
function checkElement(node) { | ||
if (node.children.length === 1 && /^\s*$/.test(node.children[0].raw)) { | ||
checkPaddingTop(node); | ||
return; | ||
} | ||
checkPaddingTop(node); | ||
checkPaddingBottom(node); | ||
} | ||
|
||
return { | ||
JSXElement: checkElement, | ||
JSXFragment: checkElement | ||
}; | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,211 @@ | ||
/** | ||
* @fileoverview Test for js-no-padded-children | ||
**/ | ||
'use strict'; | ||
|
||
const rule = require('../../../lib/rules/jsx-no-padded-children'); | ||
const RuleTester = require('eslint').RuleTester; | ||
|
||
const parserOptions = { | ||
ecmaVersion: 2018, | ||
sourceType: 'module', | ||
ecmaFeatures: { | ||
jsx: true | ||
} | ||
}; | ||
|
||
const ruleTester = new RuleTester({parserOptions}); | ||
|
||
const message = 'JSX children must not be padded by blank lines.'; | ||
|
||
ruleTester.run('jsx-no-padded-children', rule, { | ||
valid: [ | ||
'<div><Foo /></div>', | ||
|
||
` | ||
<div> | ||
<Foo /> | ||
</div>`, | ||
|
||
` | ||
<div> | ||
foo | ||
<Foo /> | ||
</div>`, | ||
|
||
{ | ||
code: ` | ||
<>{\` | ||
\`}</>`, | ||
parser: 'babel-eslint' | ||
} | ||
], | ||
|
||
invalid: [ | ||
{ | ||
code: ` | ||
<div> | ||
</div>`, | ||
output: ` | ||
<div> | ||
</div>`, | ||
errors: [{message}] | ||
}, | ||
{ | ||
code: [ | ||
'<div>', | ||
' ', | ||
' ', | ||
'</div>' | ||
].join('\r\n'), | ||
output: [ | ||
'<div>', | ||
'</div>' | ||
].join('\r\n'), | ||
errors: [{message}] | ||
}, | ||
{ | ||
code: ` | ||
<div> | ||
\ \t | ||
<Foo /> | ||
</div>`, | ||
output: ` | ||
<div> | ||
<Foo /> | ||
</div>`, | ||
errors: [{message}] | ||
}, | ||
{ | ||
code: ` | ||
<div> | ||
<Foo /> | ||
</div>`, | ||
output: ` | ||
<div> | ||
<Foo /> | ||
</div>`, | ||
errors: [{message}] | ||
}, | ||
{ | ||
code: ` | ||
<div> | ||
<Foo /> | ||
\ \r \t | ||
</div>`, | ||
output: ` | ||
<div> | ||
<Foo /> | ||
</div>`, | ||
errors: [{message}, {message}] | ||
}, | ||
{ | ||
code: ` | ||
<div> | ||
<Foo /> | ||
\ \t | ||
</div>`, | ||
output: ` | ||
<div> | ||
<Foo /> | ||
</div>`, | ||
errors: [{message}] | ||
}, | ||
{ | ||
code: ` | ||
<div> | ||
\r \t | ||
foo | ||
\r \t | ||
</div>`, | ||
output: ` | ||
<div> | ||
foo | ||
</div>`, | ||
errors: [{message}, {message}] | ||
}, | ||
{ | ||
code: ` | ||
<div> | ||
foo | ||
\r \t | ||
</div>`, | ||
output: ` | ||
<div> | ||
foo | ||
</div>`, | ||
errors: [{message}] | ||
}, | ||
|
||
{ | ||
code: [ | ||
'<div>', | ||
' ', | ||
' <Foo />', | ||
' ', | ||
'</div>' | ||
].join('\r\n'), | ||
output: [ | ||
'<div>', | ||
' <Foo />', | ||
'</div>' | ||
].join('\r\n'), | ||
errors: [{message}, {message}] | ||
}, | ||
{ | ||
code: ` | ||
<div> | ||
<> | ||
\ \t \r | ||
</> | ||
</div>`, | ||
output: ` | ||
<div> | ||
<> | ||
</> | ||
</div>`, | ||
errors: [{message}, {message}, {message}], | ||
parser: 'babel-eslint' | ||
}, | ||
{ | ||
code: ` | ||
<div> | ||
{'foo'} | ||
foo | ||
{'bar'} | ||
</div>`, | ||
output: ` | ||
<div> | ||
{'foo'} | ||
foo | ||
{'bar'} | ||
</div>`, | ||
errors: [{message}, {message}], | ||
parser: 'babel-eslint' | ||
} | ||
] | ||
}); |