Suggestions for ESlint Rules
- Anastasia Hahanova
- Oleksandr Yehorov
- 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
returnstatement.
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"*/
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,
}],