Versions Compared

Old Version 11

changes.mady.by.user Anastasia Hahanova

Saved on

compared with

New Version 12

changes.mady.by.user Anastasia Hahanova

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Example of component

Best practices fo writing code

Suggestions for ESlint Rules

ESlint Rules (json)

  • key-spacing
  • padding-line-between-statements
  • comma-dangle
  • max-len
  • no-this-before-super
  • refer-destructuring
  • prefer-object-spread
  • jsx-quotes
  • prefer-const

...

react/jsx-closing-tag-location

...

react/jsx-wrap-multilines

...

key-spacing

currently: "key-spacing": "off"

  • beforeColon

Examples of incorrect code for this rule with the default { "beforeColon": false } option:

Code Block
/*eslint key-spacing: ["error", { "beforeColon": false }]*/
var obj = { "foo" : 42 };

Examples of correct code for this rule with the default { "beforeColon": false } option:

Code Block
/*eslint key-spacing: ["error", { "beforeColon": false }]*/
var obj = { "foo": 42 };

  • afterColon

Examples of incorrect code for this rule with the default { "afterColon": true } option:

Code Block
/*eslint key-spacing: ["error", { "afterColon": true }]*/
var obj = { "foo":42 };

Examples of correct code for this rule with the default { "afterColon": true } option:

Code Block
/*eslint key-spacing: ["error", { "afterColon": true }]*/
var obj = { "foo": 42 };

padding-line-between-statements

  • one or more blank lines are required between a variable declaration and a return statement.

Examples of incorrect code for the [{ blankLine: "always", prev: "*", next: "return" }] configuration:

Code Block
/*eslint padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: "*", next: "return" }
]*/

function foo() {
    bar();
    return;
}

Examples of correct code for the [{ blankLine: "always", prev: "*", next: "return" }] configuration:

Code Block
/*eslint padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: "*", next: "return" }
]*/

function foo() {
    bar();

    return;
}

function foo() {
    return;
}

  • This configuration would require blank lines after every sequence of variable declarations, like the newline-after-var rule.

Examples of incorrect code for the [{ blankLine: "always", prev: ["const", "let", "var"], next: "*"}, { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"]}] configuration:

Code Block
/*eslint padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: ["const", "let", "var"], next: "*"},
    { blankLine: "any",    prev: ["const", "let", "var"], next: ["const", "let", "var"]}
]*/

function foo() {
    var a = 0;
    var b = 0;
    bar();
}

function foo() {
    let a = 0;
    const b = 0;
    bar();
}

function foo() {
    const a = 0;
    const b = 0;
    bar();
}

Examples of correct code for the [{ blankLine: "always", prev: ["const", "let", "var"], next: "*"}, { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"]}] configuration:

Code Block
/*eslint padding-line-between-statements: [
    "error",
    { blankLine: "always", prev: ["const", "let", "var"], next: "*"},
    { blankLine: "any",    prev: ["const", "let", "var"], next: ["const", "let", "var"]}
]*/

function foo() {
    var a = 0;
    var b = 0;

    bar();
}

function foo() {
    let a = 0;
    const b = 0;

    bar();
}

function foo() {
    const a = 0;
    const b = 0;

    bar();
}

comma-dangle

currently: 

Code Block
/*"only-multiline" allows (but does not require) trailing commas when the last element or property is 
in a different line than the closing ] or } and disallows trailing commas when the last element or property 
is on the same line as the closing ] or }*/
"comma-dangle": [
	"error",
	{
		"arrays": "only-multiline",
		"objects": "only-multiline",
		"imports": "only-multiline",
		"exports": "only-multiline",
		"functions": "only-multiline"
	}
]

  • always-multiline

Examples of incorrect code for this rule with the "always-multiline" option:

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"
});

Examples of correct code for this rule with the "always-multiline" option:

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
      }

Examples of incorrect code for this rule with the default { "code": 80 } option:

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

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

Examples of correct code for this rule with the default { "code": 80 } option:

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:

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 "prefer-destructuring": ["error", {"array": false, "object": true}, {"enforceForRenamedProperties": false}],*/

var foo = 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:

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

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
// it's initialized and never reassigned.
let a = 3;
console.log(a);


let a;
a = 0;
console.log(a);

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, "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

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

Code Block
/* "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>
    );
  }
});

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": "never", "children": true}] */

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

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

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

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