Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1215 from rsolomon/jsx-closing-tag-location
[New] Add indentation rule for closing tag of multi-line jsx
- Loading branch information
Showing
5 changed files
with
192 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
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,38 @@ | ||
# Validate closing tag location in JSX (react/jsx-closing-tag-location) | ||
|
||
Enforce the closing tag location for multiline JSX elements. | ||
|
||
**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line. | ||
|
||
## Rule Details | ||
|
||
This rule checks all JSX multiline elements with children (non-self-closing) and verifies the location of the closing tag. The expectation is that the closing tag is aligned with the opening tag on its own line. | ||
|
||
The following patterns are considered warnings: | ||
|
||
```jsx | ||
<Hello> | ||
marklar | ||
</Hello> | ||
``` | ||
|
||
```jsx | ||
<Hello> | ||
marklar</Hello> | ||
``` | ||
|
||
The following are not considered warnings: | ||
|
||
```jsx | ||
<Hello> | ||
marklar | ||
</Hello> | ||
``` | ||
|
||
```jsx | ||
<Hello>marklar</Hello> | ||
``` | ||
|
||
## When not to use | ||
|
||
If you do not care about closing tag JSX alignment then you can disable this rule. |
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,87 @@ | ||
/** | ||
* @fileoverview Validate closing tag location in JSX | ||
* @author Ross Solomon | ||
*/ | ||
'use strict'; | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
module.exports = { | ||
meta: { | ||
docs: { | ||
description: 'Validate closing tag location for multiline JSX', | ||
category: 'Stylistic Issues', | ||
recommended: false | ||
}, | ||
fixable: 'whitespace' | ||
}, | ||
|
||
create: function(context) { | ||
var sourceCode = context.getSourceCode(); | ||
|
||
/** | ||
* Checks if the node is the first in its line, excluding whitespace. | ||
* @param {ASTNode} node The node to check | ||
* @return {Boolean} true if its the first node in its line | ||
*/ | ||
function isNodeFirstInLine(node) { | ||
let token = node; | ||
let lines; | ||
do { | ||
token = sourceCode.getTokenBefore(token); | ||
lines = token.type === 'JSXText' | ||
? token.value.split('\n') | ||
: null; | ||
} while ( | ||
token.type === 'JSXText' && | ||
/^\s*$/.test(lines[lines.length - 1]) | ||
); | ||
|
||
var startLine = node.loc.start.line; | ||
var endLine = token ? token.loc.end.line : -1; | ||
return startLine !== endLine; | ||
} | ||
|
||
return { | ||
JSXClosingElement: function(node) { | ||
if (!node.parent) { | ||
return; | ||
} | ||
|
||
const opening = node.parent.openingElement; | ||
if (opening.loc.start.line === node.loc.start.line) { | ||
return; | ||
} | ||
|
||
if (opening.loc.start.column === node.loc.start.column) { | ||
return; | ||
} | ||
|
||
let message; | ||
if (!isNodeFirstInLine(node)) { | ||
message = 'Closing tag of a multiline JSX expression must be on its own line.'; | ||
} else { | ||
message = 'Expected closing tag to match indentation of opening.'; | ||
} | ||
|
||
context.report({ | ||
node: node, | ||
loc: node.loc, | ||
message, | ||
fix: function(fixer) { | ||
const indent = Array(opening.loc.start.column + 1).join(' '); | ||
if (isNodeFirstInLine(node)) { | ||
return fixer.replaceTextRange( | ||
[node.start - node.loc.start.column, node.start], | ||
indent | ||
); | ||
} | ||
|
||
return fixer.insertTextBefore(node, `\n${indent}`); | ||
} | ||
}); | ||
} | ||
}; | ||
} | ||
}; |
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,65 @@ | ||
/** | ||
* @fileoverview Validate closing tag location in JSX | ||
* @author Ross Solomon | ||
*/ | ||
'use strict'; | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const rule = require('../../../lib/rules/jsx-closing-tag-location'); | ||
const RuleTester = require('eslint').RuleTester; | ||
const parserOptions = { | ||
sourceType: 'module', | ||
ecmaFeatures: { | ||
jsx: true | ||
} | ||
}; | ||
|
||
const MESSAGE_MATCH_INDENTATION = [{message: 'Expected closing tag to match indentation of opening.'}]; | ||
const MESSAGE_OWN_LINE = [{message: 'Closing tag of a multiline JSX expression must be on its own line.'}]; | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Tests | ||
// ------------------------------------------------------------------------------ | ||
|
||
const ruleTester = new RuleTester({parserOptions}); | ||
ruleTester.run('jsx-closing-tag-location', rule, { | ||
valid: [{ | ||
code: [ | ||
'<App>', | ||
' foo', | ||
'</App>' | ||
].join('\n') | ||
}, { | ||
code: [ | ||
'<App>foo</App>' | ||
].join('\n') | ||
}], | ||
|
||
invalid: [{ | ||
code: [ | ||
'<App>', | ||
' foo', | ||
' </App>' | ||
].join('\n'), | ||
output: [ | ||
'<App>', | ||
' foo', | ||
'</App>' | ||
].join('\n'), | ||
errors: MESSAGE_MATCH_INDENTATION | ||
}, { | ||
code: [ | ||
'<App>', | ||
' foo</App>' | ||
].join('\n'), | ||
output: [ | ||
'<App>', | ||
' foo', | ||
'</App>' | ||
].join('\n'), | ||
errors: MESSAGE_OWN_LINE | ||
}] | ||
}); |