Suggestions for ESlint Rules

Suggestions for ESlint Rules

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

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