/
Suggestions for ESlint Rules

Suggestions for ESlint Rules

Nov 30, 2018
  • 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:

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

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

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

  • afterColon

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

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

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

/*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:

/*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:

/*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:

/*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:

/*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: 

/*"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:

/*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:

/*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": 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:

/*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:

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

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

eol-last

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

Examples of incorrect code for this rule:

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

function doSmth() {
  var foo = 2;
}

Examples of correct code for this rule:

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

function doSmth() {
  var foo = 2;
}\n

no-multiple-empty-lines

Examples of incorrect code for this rule:

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


var foo = 5;


var bar = 3;

Examples of correct code for this rule:

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

var foo = 5;
н
var bar = 3;

no-this-before-super

Examples of incorrect code for this rule:

/*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

Currently off. Examples of incorrect code for this rule:

/*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:

/*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:

/*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:

/*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:

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

<a b='c' />

Examples of correct code for this rule:

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

<a b="c" />

prefer-const

Examples of incorrect code for this rule:

// 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:

// 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:

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:

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:

/*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:

/*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:

/* "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:

<App>Hello</App>


react/jsx-closing-bracket-location

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

/* "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:

<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:

/* "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:

/* "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:

/* "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:

/* "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:

/* "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:

/* "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:

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

Examples of correct code for this rule:

/*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:

/*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

//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 reachable. Conditional 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:

function foo(bar,
  baz
) {}

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

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

Examples of correct code for this rule:

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:

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

Examples of correct code for this rule:

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,
}],