Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
  • key-spacing
  • padding-line-between-statements
  • comma-dangle
  • max-len
  • eol-last
  • no-multiple-empty-lines
  • no-this-before-super
  • refer-destructuring
  • prefer-object-spread
  • jsx-quotes
  • prefer-const
  • promise/prefer-await-to-then

  • 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 

  • no-array-constructor
  • no-loop-func
  • no-new-func
  • max-lines
  • prefer-destructuring
  • eslint-plugin-filenames
  • max-depth
  • no-constant-condition

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:

...

  • key-spacing
  • padding-line-between-statements
  • comma-dangle
  • max-len
  • eol-last
  • no-multiple-empty-lines
  • no-this-before-super
  • refer-destructuring
  • prefer-object-spread
  • jsx-quotes
  • prefer-const
  • promise/prefer-await-to-then

  • 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 

  • no-array-constructor
  • no-loop-func
  • no-new-func
  • max-lines
  • prefer-destructuring
  • eslint-plugin-filenames
  • max-depth
  • no-constant-condition
  • function-paren-newline
  • no-else-return

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
  var foo = {bar:
        "bazcode": 120,
qux: "quux"};
var arr = [1,2];

var arr = [1,        "ignoreComments": true,
       2];

var arr = [ "ignoreTrailingComments": true,
       1, "ignoreUrls": true,
  2, ];  foo({   bar"ignoreStrings": "baz"true,
  qux: "quux", });

max-len

currently: "max-len""off"

Code Block
     {"ignoreTemplateLiterals": true,
        "codeignoreRegExpLiterals": true
120,      }

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

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

var foo = {   "ignoreUrlsbar": true,"This is a       "ignoreStringsbar.", "baz": true,
        "ignoreTemplateLiterals{ "qux": true,"This is a qux" },     "ignoreRegExpLiteralsdifficult": true
     "to read" };

Examples of incorrectcorrect 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" },
  "difficulteasier": "to read"
};

eol-last

Covers SonarCloud Issue: Files should contain an empty newline at the end

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

Code Block
/*eslint eol-last: ["error", "always"]*/

function doSmth() {
  var foo = 2;
}

Examples of correct code for this rule:

Code Block
/*eslint maxeol-lenlast: ["error", { "codealways": 80 }]*/

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

eol-last

...

var foo = 2;
}\n

no-multiple-empty-lines

Examples of incorrect code for this rule:

Code Block
/*eslint eol-lastno-multiple-empty-lines: ["error", { "max": 1, "always""maxBOF": 0, "maxBOF": 0}]*/

function doSmth() {
var foo = 5;


var foobar = 23;
}

Examples of correct code for this rule:

Code Block
/*eslint eol-last: ["error", "always" no-multiple-empty-lines: ["error", { "max": 1, "maxBOF": 0, "maxBOF": 0}]*/

functionvar doSmth()foo {= 5;
н
var foobar = 23;
}\n

no-

...

this-

...

before-

...

super

Examples of incorrect code for this rule:

Code Block
/*eslint no-multiplethis-emptybefore-lines: ["error", { "max": 1, "maxBOF": 0, "maxBOF": 0}]*/


var foo = 5;


var bar = 3;

Examples of correct code for this rule:

Code Block
/*eslint no-multiple-empty-lines: ["error", { "max": 1, "maxBOF": 0, "maxBOF": 0}]*/

var foo = 5;
н
var bar = 3;

no-this-before-super

super: "error"*/
/*eslint-env es6*/

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


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

prefer-destructuring

Currently off. 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();
    }
}

...

/*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-destructuringspread": ["error", {"array": false, "object": true */

Object.assign({}, foo)

Object.assign({}, {"enforceForRenamedProperties"foo: 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

...

'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({}, {foo: 'bar'})
 call without an object literal as the first argument
Object.assign(foo, { foobar: baz 'bar'}, baz);

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

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

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


jsx-quotes

Examples of incorrect code for this rule:

Code Block
/*eslint jsx-quotes: ["error", { 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' /> "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);

promise/prefer-await-to-then

Examples of incorrect code for this rule:

Code Block
function example() {
  return myPromise.then(doSomethingSync).then(doSomethingElseAsync)
}

function exampleTwo() {
  return myPromise
    .then(doSomethingSync)
    .then(doSomethingElseAsync)
    .catch(errors)
}

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

promise/prefer-await-to-then

Examples of incorrect code for this rule:

Code Block
function example() {
  return myPromise.then(doSomethingSync).then(doSomethingElseAsync)
}

function exampleTwo() {
  return myPromise
    .then(doSomethingSync)
    .then(doSomethingElseAsync)
    .catch(errors)
}

Examples of correct code for this rule:

Code Block
async function example() {
  let val = await myPromise()
  val = doSomethingSync(val)
  return doSomethingElseAsync(val)
}

async function exampleTwo() {
  try {
    let val = await myPromise()
    val = doSomethingSync(val)
    return await doSomethingElseAsync(val)
  } catch (err) {
    errors(err)
  }
}

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

...

async function example() {
  let val = await myPromise()
  val = doSomethingSync(val)
  return doSomethingElseAsync(val)
}

async function exampleTwo() {
  try {
    let val = await myPromise()
    val = doSomethingSync(val)
    return await doSomethingElseAsync(val)
  } catch (err) {
    errors(err)
  }
}

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
/*eslint "react/sort-comp": [<enabled>, { orderjsx-closing-bracket-location": [ 'static-methods', 'lifecycle', 'render', 'everything-else' ] }]*/

var Hello = createReactClass({
  render: function() {
    return <div>Hello</div>;
  },
  onClick: function() {}
})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 [ "error"2, { "allow": "literal" }] optiontag-aligned"] option:

Code Block
/* "react/jsx-oneclosing-expressiontag-per-linelocation": ["error", { "allow": "literal" }] */
<App><Hello /></App>

<App><Hello />
</App>

<App>
  <Hello> 2, "tag-aligned"] */

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

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

Examples of correct code for this rule with ["error", { "allow": "literal" }with [ 2, "tag-aligned"option:

Code Block
<App>Hello</App>* "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 [ 2"error","tagparens-new-alignedline"] option:

Code Block
/* "react/jsx-closingwrap-bracket-locationmultilines": [ 2"error", "tagparens-new-alignedline"] */

<Hellovar Hello  lastName="Smith" createReactClass({
 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> 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 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": ["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 ["error{"when": "never", "parens-new-line"]children": true} option:

Code Block
/* "react/jsx-wrap-multilinescurly-spacing": ["error", {"when": ["errornever", "parens-new-line"children": true}] */

var<Hello Hello name= createReactClass({ firstname } 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>;

no-array-constructor [sonar]

This rule partly covers SonarCloud rule

Examples of incorrect code for this rule:

Code Block
/*eslint no-array-constructor: "error"*/ 
Array(0, 1, 2)
new Array(0, 1, 2)/>;
<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>;

no-array-constructor [sonar]

This rule partly covers SonarCloud rule

Examples of incorrect code for this rule:

Code Block
/*eslint no-array-constructor: "error"*/ 
Array(0, 1, 2)
new Array(0, 1, 2)

Examples of correct code for this rule:

Code Block
/*eslint no-array-constructor: "error"*/ 
Array(500)

no-loop-func [sonar]

This rule covers SonarCloud rule: Functions should not be defined inside loops

no-new-func [sonar]

This rule covers SonarCloud rule:  Functions should not be called both with and without "new" and Function constructors should not be used. Incorrect code:

Code Block
/*eslint no-new-func: "error"*/

function getNum() {
  return 5;
}

var my2ndNum = new getNum();  // Noncompliant. An empty object is returned, NOT 5

max-lines [sonar]

This rule covers SonarCloud rule: Files should not have too many lines

max-lines: ["error", 1000]

prefer-destructuring [sonar]

This rule covers SonarCloud rule: Destructuring syntax should be used for assignments

Code Block
//Examples of incorrect code for this rule:

// With `array` enabled
var foo = array[0];

// With `object` enabled
var foo = object.foo;
var foo = object['foo'];
//Examples of correct code for this rule:

// With `array` enabled
var [ foo ] = array;
var foo = array[someIndex];

// With `object` enabled
var { foo } = object;

var foo = object.bar;

eslint-plugin-filenames [sonar]

This rule covers SonarCloud rule: Default export names and file names should match

"filenames/match-exported": "error"

max-depth [sonar]

This rule covers SonarCloud rule: Control flow statements "if", "for", "while", "switch" and "try" should not be nested too deeply"filenames/match-exported": "error"

"max-depth": ["error", 3]

no-constant-condition [sonar]

This rule covers SonarCloud rule: Conditionally executed blocks should be reachableConditional expressions which are always true or false can lead to dead code. There shouldn't be expressions like if (false){}

"no-constant-condition": "error"

function-paren-newline

Currently function-paren-newline: ["error", "consistent"]

/* eslint function-paren-newline: ["error", "multiline"] */

Examples of incorrect code for this rule:

Code Block
function foo(bar,
  baz
) {}

var foo = function(
  bar, baz
) {};

var foo = (
  bar,
  baz) => {};

Examples of correct code for this rule:

Code Block
/*eslint no-array-constructor: "error"*/ 
Array(500)

no-loop-func [sonar]

This rule covers SonarCloud rule: Functions should not be defined inside loops

no-new-func [sonar]

This rule covers SonarCloud rule:  Functions should not be called both with and without "new" and Function constructors should not be used. Incorrect code:

Code Block
/*eslint no-new-func: "error"*/

function getNum() {
  return 5;
}

var my2ndNum = new getNum();  // Noncompliant. An empty object is returned, NOT 5

max-lines [sonar]

This rule covers SonarCloud rule: Files should not have too many lines

max-lines: ["error", 1000]

prefer-destructuring [sonar]

This rule covers SonarCloud rule: Destructuring syntax should be used for assignments

Code Block
//Examples of incorrect code for this rule:

// With `array` enabled
var foo = array[0];

// With `object` enabled
var foo = object.foo;
var foo = object['foo'];
//Examples of correct code for this rule:

// With `array` enabled
var [ foo ] = array;
var foo = array[someIndex];

// With `object` enabled
var { foo } = object;

var foo = object.bar;

eslint-plugin-filenames [sonar]

This rule covers SonarCloud rule: Default export names and file names should match

"filenames/match-exported": "error"

max-depth [sonar]

This rule covers SonarCloud rule: Control flow statements "if", "for", "while", "switch" and "try" should not be nested too deeply"filenames/match-exported": "error"

"max-depth": ["error", 3]

no-constant-condition [sonar]

This rule covers SonarCloud rule: Conditionally executed blocks should be reachableConditional expressions which are always true or false can lead to dead code. There shouldn't be expressions like if (false){}

"no-constant-condition": "error"

Some of sonar rules are covered in the eslint plugin - https://github.com/SonarSource/eslint-plugin-sonarjs/blob/master/README.md

...

function foo(bar, baz) {}

var foo = function(
  bar,
  baz
) {};

var foo = (bar, baz) => {};


no-else-return

Currently off


no-else-return: "error"

Examples of incorrect code for this rule:

Code Block
function foo() {
    if (x) {
        return y;
    } else {
        return z;
    }
}

Examples of correct code for this rule:

Code Block
function foo() {
    if (x) {
        return y;
    }

    return z;
}

 enable this  "no-underscore-dangle": "off",

/*eslint no-underscore-dangle: "error"*/

object-curly-newline

currently "object-curly-newline": ["error", { "consistent": true }],

object-curly-newline: ["error", { "multiline": true }, { "ImportDeclaration": "always", "ExportDeclaration": "never" }]


currently "operator-linebreak": ["off"], → 

/*eslint operator-linebreak: ["error", "before"]*/


"prefer-template": "off", → 

/*eslint prefer-template: "error"*/


"quote-props": ["error", "consistent"], ->

/*eslint quote-props: ["error", "as-needed"]*/


"react/destructuring-assignment": ["off"], → [error, always]


curently

"react/sort-comp": ["warn", {
"order": [
"static-methods",
"lifecycle",
"everything-else",
"render"
]


prefer-destruct is off


Some of sonar rules are covered in the eslint plugin - https://github.com/SonarSource/eslint-plugin-sonarjs/blob/master/README.md

"no-empty-function": "error",
"no-empty": "error",
"max-lines-per-function": [
"error",
200
],
"max-params": [
"error",
7
],
"require-yield": "error",
"no-duplicate-imports": "error",
"no-labels": "error"

prefer-destructuring

add stylelint

remove deprecated methods:

"jsx-a11y/href-no-hash": "off", // deprecated rule
"jsx-a11y/label-has-for": "off",
"jsx-a11y/label-has-for": [ "error", {
"required": {
"some": [ "nesting", "id" ]
},
"allowChildren": false,
}],