...
- 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
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 |
---|
{
"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:
Code Block |
---|
/*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:
Code Block |
---|
/*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:
Code Block |
---|
/*eslint eol-last: ["error", "always"]*/
function doSmth() {
var foo = 2;
} |
Examples of correct code for this rule:
Code Block |
---|
/*eslint eol-last: ["error", "always"]*/
function doSmth() {
var foo = 2;
}\n |
no-multiple-empty-lines
Examples of incorrect code for this rule:
Code Block |
---|
/*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:
Code Block |
---|
/*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:
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();
}
} |
prefer-destructuring
Examples of incorrect code for this rule:
Code Block |
---|
/*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-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:
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' /> |
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>;
},
}); |
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 |
---|
/* "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:
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> |
Examples of correct 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> |
react/jsx-wrap-multilines
Examples of incorrect code for this rule with ["error","parens-new-line"]
option:
Code Block |
---|
/* "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:
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
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
This rule covers SonarCloud rule: Functions should not be defined inside loops
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
This rule covers SonarCloud rule: Files should not have too many lines
max-lines: ["error", 1000]
prefer-destructuring
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
This rule covers SonarCloud rule: Default export names and file names should match
"filenames/match-exported": "error"
max-depth
This rule covers SonarCloud rule: Control flow statements "if", "for", "while", "switch" and "try" should not be nested too deeply"filenames/match-exported": "error".
- 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 |
---|
{
"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:
Code Block |
---|
/*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:
Code Block |
---|
/*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:
Code Block |
---|
/*eslint eol-last: ["error", "always"]*/
function doSmth() {
var foo = 2;
} |
Examples of correct code for this rule:
Code Block |
---|
/*eslint eol-last: ["error", "always"]*/
function doSmth() {
var foo = 2;
}\n |
no-multiple-empty-lines
Examples of incorrect code for this rule:
Code Block |
---|
/*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:
Code Block |
---|
/*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:
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();
}
} |
prefer-destructuring
Currently off. Examples of incorrect code for this rule:
Code Block |
---|
/*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-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:
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' /> |
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>;
},
}); |
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 |
---|
/* "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:
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> |
Examples of correct 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> |
react/jsx-wrap-multilines
Examples of incorrect code for this rule with ["error","parens-new-line"]
option:
Code Block |
---|
/* "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:
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) |
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 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:
Code Block |
---|
function foo(bar,
baz
) {}
var foo = function(
bar, baz
) {};
var foo = (
bar,
baz) => {}; |
Examples of correct code for this rule:
Code Block |
---|
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"*/
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,
}],