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

Folio Development Teams

Suggestions for ESlint Rules

key-spacing

afterColon

padding-line-between-statements

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

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

comma-dangle

always-multiline

max-len

eol-last

no-multiple-empty-lines

no-this-before-super

prefer-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-tag-location

react/jsx-wrap-multilines

react/jsx-curly-spacing

no-array-constructor [sonar]

no-loop-func [sonar]

max-lines [sonar]

prefer-destructuring [sonar]

eslint-plugin-filenames [sonar]

max-depth [sonar]

no-constant-condition [sonar]

function-paren-newline

no-else-return

afterColon

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

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

always-multiline

eol-last

prefer-const

promise/prefer-await-to-then

no-array-constructor [sonar]

no-loop-func [sonar]

max-lines [sonar]

prefer-destructuring [sonar]

eslint-plugin-filenames [sonar]

max-depth [sonar]

no-constant-condition [sonar]

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