Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new rule: no-comment-textnodes #616

Merged
merged 1 commit into from
Jun 5, 2016
Merged

Add new rule: no-comment-textnodes #616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions docs/rules/no-comment-textnodes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
# Prevent comments from being inserted as text nodes (no-comment-textnodes)

This rule prevents comment strings (e.g. beginning with `//` or `/*`) from being accidentally
injected as a text node in JSX statements.

## Rule Details

The following patterns are considered warnings:

```js
var Hello = React.createClass({
render: function() {
return (
<div>// empty div</div>
);
}
});

var Hello = React.createClass({
render: function() {
return (
<div>
/* empty div */
</div>
);
}
});
```

The following patterns are not considered warnings:

```js
var Hello = React.createClass({
displayName: 'Hello',
render: function() {
return <div>{/* empty div */}</div>;
}
});

var Hello = React.createClass({
displayName: 'Hello',
render: function() {
return <div /* empty div */></div>;
}
});

var Hello = React.createClass({
displayName: 'Hello',
render: function() {
return <div className={'foo' /* temp class */}</div>;
}
});
```

## Legitimate uses

It's possible you may want to legitimately output comment start characters (`//` or `/*`)
in a JSX text node. In which case, you can do the following:

```js
var Hello = React.createClass({
render: function() {
return (
<div>{'/* This will be output as a text node */'}</div>
);
}
});
```
1 change: 1 addition & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ module.exports = {
'display-name': require('./lib/rules/display-name'),
'wrap-multilines': require('./lib/rules/wrap-multilines'),
'self-closing-comp': require('./lib/rules/self-closing-comp'),
'no-comment-textnodes': require('./lib/rules/no-comment-textnodes'),
'no-danger': require('./lib/rules/no-danger'),
'no-set-state': require('./lib/rules/no-set-state'),
'no-is-mounted': require('./lib/rules/no-is-mounted'),
Expand Down
38 changes: 38 additions & 0 deletions lib/rules/no-comment-textnodes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* @fileoverview Comments inside children section of tag should be placed inside braces.
* @author Ben Vinegar
*/
'use strict';

// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------

module.exports = function(context) {
function reportLiteralNode(node) {
context.report(node, 'Comments inside children section of tag should be placed inside braces');
}

// --------------------------------------------------------------------------
// Public
// --------------------------------------------------------------------------

return {
Literal: function(node) {
if (/\s*\/(\/|\*)/.test(node.value)) {
// inside component, e.g. <div>literal</div>
if (node.parent.type !== 'JSXAttribute' &&
node.parent.type !== 'JSXExpressionContainer' &&
node.parent.type.indexOf('JSX') !== -1) {
reportLiteralNode(node);
}
}
}
};
};

module.exports.schema = [{
type: 'object',
properties: {},
additionalProperties: false
}];
204 changes: 204 additions & 0 deletions tests/lib/rules/no-comment-textnodes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
/**
* @fileoverview Tests for no-comment-textnodes
* @author Ben Vinegar
*/
'use strict';

// ------------------------------------------------------------------------------
// Requirements
// ------------------------------------------------------------------------------

var rule = require('../../../lib/rules/no-comment-textnodes');
var RuleTester = require('eslint').RuleTester;

// ------------------------------------------------------------------------------
// Tests
// ------------------------------------------------------------------------------

var ruleTester = new RuleTester();
ruleTester.run('jsx-needs-i18n', rule, {

valid: [
{
code: [
'class Comp1 extends Component {',
' render() {',
' return (',
' <div>',
' {/* valid */}',
' </div>',
' );',
' }',
'}'
].join('\n'),
args: [1],
parser: 'babel-eslint'
}, {
code: [
'class Comp1 extends Component {',
' render() {',
' return (<div>{/* valid */}</div>);',
' }',
'}'
].join('\n'),
args: [1],
parser: 'babel-eslint'
}, {
code: [
'class Comp1 extends Component {',
' render() {',
' const bar = (<div>{/* valid */}</div>);',
' return bar;',
' }',
'}'
].join('\n'),
args: [1],
parser: 'babel-eslint'
}, {
code: [
'var Hello = React.createClass({',
' foo: (<div>{/* valid */}</div>),',
' render() {',
' return this.foo;',
' },',
'});'
].join('\n'),
args: [1],
parser: 'babel-eslint'
}, {
code: [
'class Comp1 extends Component {',
' render() {',
' return (',
' <div>',
' {/* valid */}',
' {/* valid 2 */}',
' {/* valid 3 */}',
' </div>',
' );',
' }',
'}'
].join('\n'),
args: [1],
parser: 'babel-eslint'
}, {
code: [
'class Comp1 extends Component {',
' render() {',
' return (',
' <div>',
' </div>',
' );',
' }',
'}'
].join('\n'),
args: [1],
parser: 'babel-eslint'
}, {
code: [
'var foo = require(\'foo\');'
].join('\n'),
args: [1],
parser: 'babel-eslint'
}, {
code: [
'<Foo bar=\'test\'>',
' {/* valid */}',
'</Foo>'
].join('\n'),
args: [1],
parser: 'babel-eslint'
},

// inside element declarations
{
code: [
'<Foo /* valid */ placeholder={\'foo\'}/>'
].join('\n'),
args: [1],
parser: 'babel-eslint'
},
{
code: [
'<Foo title={\'foo\' /* valid */}/>'
].join('\n'),
args: [1],
parser: 'babel-eslint'
}
],

invalid: [
{
code: [
'class Comp1 extends Component {',
' render() {',
' return (<div>// invalid</div>);',
' }',
'}'
].join('\n'),
args: [1],
parser: 'babel-eslint',
errors: [{message: 'Comments inside children section of tag should be placed inside braces'}]
}, {
code: [
'class Comp1 extends Component {',
' render() {',
' return (<div>/* invalid */</div>);',
' }',
'}'
].join('\n'),
args: [1],
parser: 'babel-eslint',
errors: [{message: 'Comments inside children section of tag should be placed inside braces'}]
}, {
code: [
'class Comp1 extends Component {',
' render() {',
' return (',
' <div>',
' // invalid',
' </div>',
' );',
' }',
'}'
].join('\n'),
args: [1],
parser: 'babel-eslint',
errors: [{message: 'Comments inside children section of tag should be placed inside braces'}]
}, {
code: [
'class Comp1 extends Component {',
' render() {',
' return (',
' <div>',
' asdjfl',
' /* invalid */',
' foo',
' </div>',
' );',
' }',
'}'
].join('\n'),
args: [1],
parser: 'babel-eslint',
errors: [{message: 'Comments inside children section of tag should be placed inside braces'}]
}, {
code: [
'class Comp1 extends Component {',
' render() {',
' return (',
' <div>',
' {\'asdjfl\'}',
' // invalid',
' {\'foo\'}',
' </div>',
' );',
' }',
'}'
].join('\n'),
args: [1],
parser: 'babel-eslint',
errors: [{message: 'Comments inside children section of tag should be placed inside braces'}]
}
]
});