Versions Compared

Version Old Version 6 New Version 7
Changes made by

Anastasia Hahanova

Anastasia Hahanova

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
  • key-spacing
  • padding-line-between-statements
  • comma-dangle
  • max-len
  • no-this-before-super
  • refer-destructuring
  • prefer-object-spread
  • jsx-quotes
  • prefer-const
  • react/sort-comp
  • react/jsx-one-expression-per-line
  • react/jsx-closing-bracket-location

  • react/jsx-closing-tag-location

  • react/jsx-wrap-multilines

  • react/jsx-curly-spacing

key-spacing

currently: "key-spacing": "off"

...

Code Block
/*eslint comma-dangle: ["error", "always-multiline"]*/

var foo = {
    bar: "baz",
    qux: "quux",
};

var foo = {bar: "baz", qux: "quux"};
var arr = [1,2];

var arr = [1,
    2];

var arr = [
    1,
    2,
];

foo({
  bar: "baz",
  qux: "quux",
});


max-len

currently: "max-len": "off"

Code Block
     {
        "code": 120,
        "ignoreComments": true,
        "ignoreTrailingComments": true,
        "ignoreUrls": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreRegExpLiterals": true
      }

...

Code Block
/*eslint max-len: ["error", { "code": 80 }]*/

var foo = {
  "bar": "This is a bar.",
  "baz": { "qux": "This is a qux" },
  "easier": "to read"
};

...

no-this-before-super

Examples of incorrect code for this rule with   ["error", {  order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ], groups: <groups> }] option:

Code Block
/*eslint "react/sort-comp": [<enabled>, { order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ] }]*/

var Hello = createReactClass({
  onClick: function() {},
	render: function() {
    return <div>Hello</div>;
  },
});

Examples of correct code for this rule with   ["error", {  order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ], groups: <groups> }] option:

Code Block
/*eslint no-this-before-super: "error"*/
/*eslint-env es6*/

class A extends B {
    constructor() {
        this.a = 0;
        super();
    }
}


class A extends B {
    constructor() {
        super.foo();
        super();
    }
}

prefer-destructuring

Examples of incorrect code for this rule:

Code Block
/*eslint "react/sortprefer-compdestructuring": [<enabled>"error", { order"array": [ 'static-methods', 'lifecycle', 'render', 'everything-else' ] }]false, "object": true}, {"enforceForRenamedProperties": false}],*/

var Hellofoo = createReactClass({
  render: function() {
    return <div>Hello</div>;
  },
  onClick: function() {}
});

...

object.foo;
var foo = object['foo'];

Examples of correct code for this rule:

Code Block
/*eslint "prefer-destructuring": ["error", {"array": false, "object": true}, {"enforceForRenamedProperties": false}],*/

var { foo } = object;

var foo = object.bar;

let foo;
({ foo } = object);

prefer-object-spread

Examples of incorrect code for this rule with  ["error", { "allow": "literal" }] option:

Code Block
/*eslint "react/jsxprefer-one-expression-per-lineobject-spread": ["error", { "allow": "literal" }] */
<App><Hello /></App>

<App><Hello />
</App>

<App>
  <Hello>
  </Hello></App>

<App>
  <Hello /> World
</App>

...

 */

Object.assign({}, foo)

Object.assign({}, {foo: 'bar'})

Object.assign({ foo: 'bar'}, baz)

Object.assign({ foo: 'bar' }, Object.assign({ bar: 'foo' }))

Object.assign({}, { foo, bar, baz })

Object.assign({}, { ...baz })

// Object.assign with a single argument that is an object literal
Object.assign({});

Object.assign({ foo: bar });

Examples of correct code for this rule:

Code Block
/*eslint "prefer-object-spread": "error" */

Object.assign(...foo);

// Any Object.assign call without an object literal as the first argument
Object.assign(foo, { bar: baz });

Object.assign(foo, Object.assign(bar));

Object.assign(foo, { bar, baz })

Object.assign(foo, { ...baz });

jsx-quotes

Examples of incorrect code for this rule:

Code Block
/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b='c' />

Examples of correct code for this rule:

Code Block
/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b="c" />

prefer-const

Examples of incorrect code for this rule:

Code Block
/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b='c' />

Examples of correct code for this rule:

Code Block


// using const.
const a = 0;

// it's never initialized.
let a;
console.log(a);

react/sort-comp

Examples of incorrect code for this rule with   ["error", {  order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ], groups: <groups> }] option:

Code Block
/*eslint "react/sort-comp": [<enabled>, { order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ] }]*/

var Hello = createReactClass({
  onClick: function() {},
	render: function() {
    return <div>Hello</div>;
  },
});

Examples of correct code for this rule with   ["error", {  order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ], groups: <groups> }] option:

Code Block
/*eslint "react/sort-comp": [<enabled>, { order: [ 'static-methods', 'lifecycle', 'render', 'everything-else' ] }]*/

var Hello = createReactClass({
  render: function() {
    return <div>Hello</div>;
  },
  onClick: function() {}
});

react/jsx-one-expression-per-line

Examples of incorrect code for this rule with  ["error", { "allow": "literal" }] option:

Code Block
/* "react/jsx-one-expression-per-line": ["error", { "allow": "literal" }] */
<App><Hello /></App>

<App><Hello />
</App>

<App>
  <Hello>
  </Hello></App>

<App>
  <Hello /> World
</App>

Examples of correct code for this rule with ["error", { "allow": "literal" }] option:

Code Block
<App>Hello</App>


react/jsx-closing-bracket-location

Examples of incorrect code for this rule with [ 2, "tag-aligned"] option:

Code Block
/* "react/jsx-closing-bracket-location": [ 2, "tag-aligned"] */

<Hello
  lastName="Smith"
  firstName="John" />;

<Hello
  lastName="Smith"
  firstName="John"
  />;

Examples of correct code for this rule with [ 2, "tag-aligned"] option:

Code Block
<Hello firstName="John" lastName="Smith" />;

<Hello
  firstName="John"
  lastName="Smith"
/>;

react/jsx-closing-tag-location

Examples of incorrect code for this rule with [ 2, "

...

Code Block
<App>Hello</App>

react/jsx-closing-bracket-location

Examples of incorrect code for this rule withtag-aligned"] option:

Code Block
/* "react/jsx-closing-tag-location": [ 2, "tag-aligned"] */

<Hello>
  marklar
  </Hello>

<Hello>
  marklar</Hello>

Examples of correct code for this rule with [ 2, "tag-aligned"] option:

Code Block
/* "react/jsx-closing-brackettag-location": [ 2, "tag-aligned"] */

<Hello
  lastName="Smith"
  firstName="John" />;

<Hello
  lastName="Smith"
  firstName="John"
  />;

...

 */

<Hello>
  marklar
</Hello>

<Hello>marklar</Hello>

react/jsx-wrap-multilines

Examples of incorrect code for this rule with ["error","parens-new-line"] option:

Code Block
<Hello firstName="John" lastName="Smith" />;

<Hello
  firstName="John"
  lastName="Smith"
/>;

react/jsx-closing-tag-location

Examples of incorrect code for this rule with [ 2, "tag-aligned"] option:

Code Block
/* "react/jsx-closing-tag-location": [ 2, "tag-aligned"] */

<Hello>
  marklar
  </Hello>

<Hello>
  marklar</Hello>

Examples of correct code for this rule with [ 2, "tag-aligned"] option:

Code Block
/* "react/jsx-closing-tag-location": [ 2, "tag-aligned"] */

<Hello>
  marklar
</Hello>

<Hello>marklar</Hello>

react/jsx-wrap-multilines

...

/* "react/jsx-wrap-multilines": ["error","parens-new-line"] */

var Hello = createReactClass({
  render: function() {
    return <div>
      <p>Hello {this.props.name}</p>
    </div>;
  }
});


var Hello = createReactClass({
  render: function() {
    return (<div>
      <p>Hello {this.props.name}</p>
    </div>);
  }
});

Examples of correct code for this rule with [

...

2, "

...

tag-

...

aligned"] option:

Code Block
/* "react/jsx-wrap-multilines": ["error","parens-new-line"] */

var singleLineJSX = <p>Hello</p>

var Hello = createReactClass({
  render: function() {
    return (
      <div>
        <p>Hello {this.props.name}</p>
      </div>
    );
  }
});


var Hello = createReactClass({
  render: function() {
    return (<div>
      <p>Hello {this.props.name}</p>
    </div>);
  }
})


react/jsx-curly-spacing

Examples of incorrect code for this rule with {"when": "never", "children": true} option:

Code Block
/* "react/jsx-curly-spacing": ["error", {"when": "always", "children": true}] */

<Hello name={ firstname } />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello>{ firstname }</Hello>;

Examples of correct code for this rule with [ 2{"when": "never", "tag-aligned"]children": true} option:

Code Block
/* "react/jsx-wrapcurly-multilinesspacing": ["error","parens-new-line"] */

var singleLineJSX = <p>Hello</p>

var Hello = createReactClass({
  render: function() {
    return (
      <div>
        <p>Hello {this.props.name}</p>
      </div>
    );
  }
}) {"when": "always", "children": true}] */

<Hello name={firstname} />;
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
<Hello name={
  firstname
} />;
<Hello>{firstname}</Hello>;
<Hello>{
  firstname
}</Hello>;