While formatting preferences are very personal, a number of style guides require
or disallow spaces between curly braces in the following situations:
// simple object literals
var obj ={foo:"bar"};
// nested object literals
var obj ={foo:{zoo:"bar"}};
// destructuring assignment (EcmaScript 6)
var{ x, y }= y;
// import/export declarations (EcmaScript 6)
import{ foo }from"bar";
export{ foo };
Rule Details
This rule enforce consistent spacing inside braces of object literals, destructuring assignments, and import/export specifiers.
Options
This rule has two options, a string option and an object option.
String option:
"never" (default) disallows spacing inside of braces
"always" requires spacing inside of braces (except {})
Object option:
"arraysInObjects": true requires spacing inside of braces of objects beginning and/or ending with an array element (applies when the first option is set to never)
"arraysInObjects": false disallows spacing inside of braces of objects beginning and/or ending with an array element (applies when the first option is set to always)
"objectsInObjects": true requires spacing inside of braces of objects beginning and/or ending with an object element (applies when the first option is set to never)
"objectsInObjects": false disallows spacing inside of braces of objects beginning and/or ending with an object element (applies when the first option is set to always)
never
Examples of incorrect code for this rule with the default "never" option:
enforce the consistent use of either backticks, double, or single quotes (quotes)
JavaScript allows you to define strings in one of three ways: double quotes, single quotes, and backticks (as of ECMAScript 6). For example:
/*eslint-env es6*/
var double ="double";
var single ='single';
var backtick =`backtick`;// ES6 only
Each of these lines creates a string and, in some cases, can be used interchangeably. The choice of how to define strings in a codebase is a stylistic one outside of template literals (which allow embedded of expressions to be interpreted).
Many codebases require strings to be defined in a consistent manner.
Rule Details
This rule enforces the consistent use of either backticks, double, or single quotes.
Options
This rule has two options, a string option and an object option.
String option:
"double" (default) requires the use of double quotes wherever possible
"single" requires the use of single quotes wherever possible
"backtick" requires the use of backticks wherever possible
Object option:
"avoidEscape": true allows strings to use single-quotes or double-quotes so long as the string contains a quote that would have to be escaped otherwise
"allowTemplateLiterals": true allows strings to use backticks
Deprecated: The object property avoid-escape is deprecated; please use the object property avoidEscape instead.
double
Examples of incorrect code for this rule with the default "double" option:
/*eslint quotes: ["error", "double"]*/
var single ='single';
var unescaped ='a string containing "double" quotes';
Examples of correct code for this rule with the default "double" option:
/*eslint quotes: ["error", "double"]*/
/*eslint-env es6*/
var double ="double";
var backtick =`back\ntick`;// backticks are allowed due to newline
var backtick = tag`backtick`;// backticks are allowed due to tag
single
Examples of incorrect code for this rule with the "single" option:
/*eslint quotes: ["error", "single"]*/
var double ="double";
var unescaped ="a string containing 'single' quotes";
Examples of correct code for this rule with the "single" option:
/*eslint quotes: ["error", "single"]*/
/*eslint-env es6*/
var single ='single';
var backtick =`back${x}tick`;// backticks are allowed due to substitution
backticks
Examples of incorrect code for this rule with the "backtick" option:
/*eslint quotes: ["error", "backtick"]*/
var single ='single';
var double ="double";
var unescaped ='a string containing `backticks`';
Examples of correct code for this rule with the "backtick" option:
/*eslint quotes: ["error", "backtick"]*/
/*eslint-env es6*/
var backtick =`backtick`;
avoidEscape
Examples of additional correct code for this rule with the "double", { "avoidEscape": true } options:
If you do not need consistency in your string styles, you can safely disable this rule.
Source: http://eslint.org/docs/rules/
enforce consistent indentation (indent)
There are several common guidelines which require specific indentation of nested blocks and statements, like:
functionhello(indentSize, type){
if(indentSize ===4&& type !=='tab'){
console.log('Each next indentation will increase on 4 spaces');
}
}
These are the most common scenarios recommended in different style guides:
Two spaces, not longer and no tabs: Google, npm, Node.js, Idiomatic, Felix
Tabs: jQuery
Four spaces: Crockford
Rule Details
This rule enforces a consistent indentation style. The default style is 4 spaces.
Options
This rule has a mixed option:
For example, for 2-space indentation:
{
"indent": ["error", 2]
}
Or for tabbed indentation:
{
"indent": ["error", "tab"]
}
Examples of incorrect code for this rule with the default options:
/*eslint indent: "error"*/
if(a){
b=c;
functionfoo(d){
e=f;
}
}
Examples of correct code for this rule with the default options:
/*eslint indent: "error"*/
if(a){
b=c;
functionfoo(d){
e=f;
}
}
This rule has an object option:
"SwitchCase" (default: 0) enforces indentation level for case clauses in switch statements
"VariableDeclarator" (default: 1) enforces indentation level for var declarators; can also take an object to define separate rules for var, let and const declarations.
"outerIIFEBody" (default: 1) enforces indentation level for file-level IIFEs.
"MemberExpression" (off by default) enforces indentation level for multi-line property chains (except in variable declarations and assignments)
"FunctionDeclaration" takes an object to define rules for function declarations.
parameters (off by default) enforces indentation level for parameters in a function declaration. This can either be a number indicating indentation level, or the string "first" indicating that all parameters of the declaration must be aligned with the first parameter.
body (default: 1) enforces indentation level for the body of a function declaration.
"FunctionExpression" takes an object to define rules for function expressions.
parameters (off by default) enforces indentation level for parameters in a function expression. This can either be a number indicating indentation level, or the string "first" indicating that all parameters of the expression must be aligned with the first parameter.
body (default: 1) enforces indentation level for the body of a function expression.
"CallExpression" takes an object to define rules for function call expressions.
arguments (off by default) enforces indentation level for arguments in a call expression. This can either be a number indicating indentation level, or the string "first" indicating that all arguments of the expression must be aligned with the first argument.
"ArrayExpression" (default: 1) enforces indentation level for elements in arrays. It can also be set to the string "first", indicating that all the elements in the array should be aligned with the first element.
"ObjectExpression" (default: 1) enforces indentation level for properties in objects. It can be set to the string "first", indicating that all properties in the object should be aligned with the first property.
Level of indentation denotes the multiple of the indent specified. Example:
Indent of 4 spaces with VariableDeclarator set to 2 will indent the multi-line variable declarations with 8 spaces.
Indent of 2 spaces with VariableDeclarator set to 2 will indent the multi-line variable declarations with 4 spaces.
Indent of 2 spaces with VariableDeclarator set to {"var": 2, "let": 2, "const": 3} will indent the multi-line variable declarations with 4 spaces for var and let, 6 spaces for const statements.
Indent of tab with VariableDeclarator set to 2 will indent the multi-line variable declarations with 2 tabs.
Indent of 2 spaces with SwitchCase set to 0 will not indent case clauses with respect to switch statements.
Indent of 2 spaces with SwitchCase set to 1 will indent case clauses with 2 spaces with respect to switch statements.
Indent of 2 spaces with SwitchCase set to 2 will indent case clauses with 4 spaces with respect to switch statements.
Indent of tab with SwitchCase set to 2 will indent case clauses with 2 tabs with respect to switch statements.
Indent of 2 spaces with MemberExpression set to 0 will indent the multi-line property chains with 0 spaces.
Indent of 2 spaces with MemberExpression set to 1 will indent the multi-line property chains with 2 spaces.
Indent of 2 spaces with MemberExpression set to 2 will indent the multi-line property chains with 4 spaces.
Indent of 4 spaces with MemberExpression set to 0 will indent the multi-line property chains with 0 spaces.
Indent of 4 spaces with MemberExpression set to 1 will indent the multi-line property chains with 4 spaces.
Indent of 4 spaces with MemberExpression set to 2 will indent the multi-line property chains with 8 spaces.
tab
Examples of incorrect code for this rule with the "tab" option:
/*eslint indent: ["error", "tab"]*/
if(a){
b=c;
functionfoo(d){
e=f;
}
}
Examples of correct code for this rule with the "tab" option:
/*eslint indent: ["error", "tab"]*/
if(a){
/*tab*/b=c;
/*tab*/functionfoo(d){
/*tab*//*tab*/e=f;
/*tab*/}
}
SwitchCase
Examples of incorrect code for this rule with the 2, { "SwitchCase": 1 } options:
Require or disallow a space before function parenthesis (space-before-function-paren)
When formatting a function, whitespace is allowed between the function name or function keyword and the opening paren. Named functions also require a space between the function keyword and the function name, but anonymous functions require no whitespace. For example:
functionwithoutSpace(x){
// ...
}
functionwithSpace(x){
// ...
}
varanonymousWithoutSpace=function(){};
varanonymousWithSpace=function(){};
Style guides may require a space after the function keyword for anonymous functions, while others specify no whitespace. Similarly, the space after a function name may or may not be required.
Rule Details
This rule aims to enforce consistent spacing before function parentheses and as such, will warn whenever whitespace doesn't match the preferences specified.
Options
This rule has a string option or an object option:
{
"space-before-function-paren":["error","always"],
// or
"space-before-function-paren":["error",{
"anonymous":"always",
"named":"always",
"asyncArrow":"ignore"
}],
}
always (default) requires a space followed by the ( of arguments.
never disallows any space followed by the ( of arguments.
The string option does not check async arrow function expressions for backward compatibility.
You can also use a separate option for each type of function.
Each of the following options can be set to "always", "never", or "ignore".
Default is "always" basically.
anonymous is for anonymous function expressions (e.g. function () {}).
named is for named function expressions (e.g. function foo () {}).
asyncArrow is for async arrow function expressions (e.g. async () => {}).
asyncArrow is set to "ignore" by default for backwards compatibility.
"always"
Examples of incorrect code for this rule with the default "always" option:
/*eslint space-before-function-paren: "error"*/
/*eslint-env es6*/
functionfoo(){
// ...
}
varbar=function(){
// ...
};
varbar=functionfoo(){
// ...
};
classFoo{
constructor(){
// ...
}
}
var foo ={
bar(){
// ...
}
};
Examples of correct code for this rule with the default "always" option:
/*eslint space-before-function-paren: "error"*/
/*eslint-env es6*/
functionfoo(){
// ...
}
varbar=function(){
// ...
};
varbar=functionfoo(){
// ...
};
classFoo{
constructor(){
// ...
}
}
var foo ={
bar(){
// ...
}
};
// async arrow function expressions are ignored by default.
varfoo=async()=>1
varfoo=async()=>1
"never"
Examples of incorrect code for this rule with the "never" option:
ECMAScript 6 allows programmers to create variables with block scope instead of function scope using the let
and const keywords. Block scope is common in many other programming languages and helps programmers avoid mistakes
such as:
var count = people.length;
var enoughFood = count > sandwiches.length;
if(enoughFood){
var count = sandwiches.length;// accidentally overriding the count variable
console.log("We have "+ count +" sandwiches for everyone. Plenty for all!");
}
// our count variable is no longer accurate
console.log("We have "+ count +" people and "+ sandwiches.length +" sandwiches!");
Rule Details
This rule is aimed at discouraging the use of var and encouraging the use of const or let instead.
Examples
Examples of incorrect code for this rule:
/*eslint no-var: "error"*/
var x ="y";
varCONFIG={};
Examples of correct code for this rule:
/*eslint no-var: "error"*/
/*eslint-env es6*/
let x ="y";
constCONFIG={};
When Not To Use It
In addition to non-ES6 environments, existing JavaScript projects that are beginning to introduce ES6 into their
codebase may not want to apply this rule if the cost of migrating from var to let is too costly.
Source: http://eslint.org/docs/rules/
This is a boolean option and it is true by default. When set to false, this option allows the use of this without restriction and checks for dynamically assigned this values such as when using Array.prototype.map with a context argument. Normally, the rule will flag the use of this whenever a function does not use bind() to specify the value of this constantly.
Examples of incorrect code for the { "allowUnboundThis": false } option:
This rule should not be used in ES3/5 environments.
In ES2015 (ES6) or later, if you don't want to be notified about function expressions in an argument list, you can safely disable this rule.
Source: http://eslint.org/docs/rules/
enforce consistent indentation (indent)
There are several common guidelines which require specific indentation of nested blocks and statements, like:
functionhello(indentSize, type){
if(indentSize ===4&& type !=='tab'){
console.log('Each next indentation will increase on 4 spaces');
}
}
These are the most common scenarios recommended in different style guides:
Two spaces, not longer and no tabs: Google, npm, Node.js, Idiomatic, Felix
Tabs: jQuery
Four spaces: Crockford
Rule Details
This rule enforces a consistent indentation style. The default style is 4 spaces.
Options
This rule has a mixed option:
For example, for 2-space indentation:
{
"indent": ["error", 2]
}
Or for tabbed indentation:
{
"indent": ["error", "tab"]
}
Examples of incorrect code for this rule with the default options:
/*eslint indent: "error"*/
if(a){
b=c;
functionfoo(d){
e=f;
}
}
Examples of correct code for this rule with the default options:
/*eslint indent: "error"*/
if(a){
b=c;
functionfoo(d){
e=f;
}
}
This rule has an object option:
"SwitchCase" (default: 0) enforces indentation level for case clauses in switch statements
"VariableDeclarator" (default: 1) enforces indentation level for var declarators; can also take an object to define separate rules for var, let and const declarations.
"outerIIFEBody" (default: 1) enforces indentation level for file-level IIFEs.
"MemberExpression" (off by default) enforces indentation level for multi-line property chains (except in variable declarations and assignments)
"FunctionDeclaration" takes an object to define rules for function declarations.
parameters (off by default) enforces indentation level for parameters in a function declaration. This can either be a number indicating indentation level, or the string "first" indicating that all parameters of the declaration must be aligned with the first parameter.
body (default: 1) enforces indentation level for the body of a function declaration.
"FunctionExpression" takes an object to define rules for function expressions.
parameters (off by default) enforces indentation level for parameters in a function expression. This can either be a number indicating indentation level, or the string "first" indicating that all parameters of the expression must be aligned with the first parameter.
body (default: 1) enforces indentation level for the body of a function expression.
"CallExpression" takes an object to define rules for function call expressions.
arguments (off by default) enforces indentation level for arguments in a call expression. This can either be a number indicating indentation level, or the string "first" indicating that all arguments of the expression must be aligned with the first argument.
"ArrayExpression" (default: 1) enforces indentation level for elements in arrays. It can also be set to the string "first", indicating that all the elements in the array should be aligned with the first element.
"ObjectExpression" (default: 1) enforces indentation level for properties in objects. It can be set to the string "first", indicating that all properties in the object should be aligned with the first property.
Level of indentation denotes the multiple of the indent specified. Example:
Indent of 4 spaces with VariableDeclarator set to 2 will indent the multi-line variable declarations with 8 spaces.
Indent of 2 spaces with VariableDeclarator set to 2 will indent the multi-line variable declarations with 4 spaces.
Indent of 2 spaces with VariableDeclarator set to {"var": 2, "let": 2, "const": 3} will indent the multi-line variable declarations with 4 spaces for var and let, 6 spaces for const statements.
Indent of tab with VariableDeclarator set to 2 will indent the multi-line variable declarations with 2 tabs.
Indent of 2 spaces with SwitchCase set to 0 will not indent case clauses with respect to switch statements.
Indent of 2 spaces with SwitchCase set to 1 will indent case clauses with 2 spaces with respect to switch statements.
Indent of 2 spaces with SwitchCase set to 2 will indent case clauses with 4 spaces with respect to switch statements.
Indent of tab with SwitchCase set to 2 will indent case clauses with 2 tabs with respect to switch statements.
Indent of 2 spaces with MemberExpression set to 0 will indent the multi-line property chains with 0 spaces.
Indent of 2 spaces with MemberExpression set to 1 will indent the multi-line property chains with 2 spaces.
Indent of 2 spaces with MemberExpression set to 2 will indent the multi-line property chains with 4 spaces.
Indent of 4 spaces with MemberExpression set to 0 will indent the multi-line property chains with 0 spaces.
Indent of 4 spaces with MemberExpression set to 1 will indent the multi-line property chains with 4 spaces.
Indent of 4 spaces with MemberExpression set to 2 will indent the multi-line property chains with 8 spaces.
tab
Examples of incorrect code for this rule with the "tab" option:
/*eslint indent: ["error", "tab"]*/
if(a){
b=c;
functionfoo(d){
e=f;
}
}
Examples of correct code for this rule with the "tab" option:
/*eslint indent: ["error", "tab"]*/
if(a){
/*tab*/b=c;
/*tab*/functionfoo(d){
/*tab*//*tab*/e=f;
/*tab*/}
}
SwitchCase
Examples of incorrect code for this rule with the 2, { "SwitchCase": 1 } options:
require or disallow semicolons instead of ASI (semi)
JavaScript is unique amongst the C-like languages in that it doesn't require semicolons at the end of each statement. In many cases, the JavaScript engine can determine that a semicolon should be in a certain spot and will automatically add it. This feature is known as automatic semicolon insertion (ASI) and is considered one of the more controversial features of JavaScript. For example, the following lines are both valid:
var name ="ESLint"
var website ="eslint.org";
On the first line, the JavaScript engine will automatically insert a semicolon, so this is not considered a syntax error. The JavaScript engine still knows how to interpret the line and knows that the line end indicates the end of the statement.
In the debate over ASI, there are generally two schools of thought. The first is that we should treat ASI as if it didn't exist and always include semicolons manually. The rationale is that it's easier to always include semicolons than to try to remember when they are or are not required, and thus decreases the possibility of introducing an error.
However, the ASI mechanism can sometimes be tricky to people who are using semicolons. For example, consider this code:
return
{
name:"ESLint"
};
This may look like a return statement that returns an object literal, however, the JavaScript engine will interpret this code as:
return;
{
name:"ESLint";
}
Effectively, a semicolon is inserted after the return statement, causing the code below it (a labeled literal inside a block) to be unreachable. This rule and the [no-unreachable](no-unreachable.md) rule will protect your code from such cases.
On the other side of the argument are those who says that since semicolons are inserted automatically, they are optional and do not need to be inserted manually. However, the ASI mechanism can also be tricky to people who don't use semicolons. For example, consider this code:
var globalCounter ={}
(function(){
var n =0
globalCounter.increment=function(){
return++n
}
})()
In this example, a semicolon will not be inserted after the first line, causing a run-time error (because an empty object is called as if it's a function). The [no-unexpected-multiline](no-unexpected-multiline.md) rule can protect your code from such cases.
Although ASI allows for more freedom over your coding style, it can also make your code behave in an unexpected way, whether you use semicolons or not. Therefore, it is best to know when ASI takes place and when it does not, and have ESLint protect your code from these potentially unexpected cases. In short, as once described by Isaac Schlueter, a \n character always ends a statement (just like a semicolon) unless one of the following is true:
The statement has an unclosed paren, array literal, or object literal or ends in some other way that is not a valid way to end a statement. (For instance, ending with . or ,.)
The line is -- or ++ (in which case it will decrement/increment the next token.)
It is a for(), while(), do, if(), or else, and there is no {
The next line starts with [, (, +, *, /, -, ,, ., or some other binary operator that can only be found between two tokens in a single expression.
Rule Details
This rule enforces consistent use of semicolons.
Options
This rule has two options, a string option and an object option.
String option:
"always" (default) requires semicolons at the end of statements
"never" disallows semicolons as the end of statements (except to disambiguate statements beginning with [, (, /, +, or -)
Object option:
"omitLastInOneLineBlock": true ignores the last semicolon in a block in which its braces (and therefore the content of the block) are in the same line
always
Examples of incorrect code for this rule with the default "always" option:
/*eslint semi: ["error", "always"]*/
var name ="ESLint"
object.method=function(){
// ...
}
Examples of correct code for this rule with the default "always" option:
/*eslint semi: "error"*/
var name ="ESLint";
object.method=function(){
// ...
};
never
Examples of incorrect code for this rule with the "never" option:
/*eslint semi: ["error", "never"]*/
var name ="ESLint";
object.method=function(){
// ...
};
Examples of correct code for this rule with the "never" option:
/*eslint semi: ["error", "never"]*/
var name ="ESLint"
object.method=function(){
// ...
}
var name ="ESLint"
;(function(){
// ...
})()
omitLastInOneLineBlock
Examples of additional correct code for this rule with the "always", { "omitLastInOneLineBlock": true } options:
There are several common guidelines which require specific indentation of nested blocks and statements, like:
functionhello(indentSize, type){
if(indentSize ===4&& type !=='tab'){
console.log('Each next indentation will increase on 4 spaces');
}
}
These are the most common scenarios recommended in different style guides:
Two spaces, not longer and no tabs: Google, npm, Node.js, Idiomatic, Felix
Tabs: jQuery
Four spaces: Crockford
Rule Details
This rule enforces a consistent indentation style. The default style is 4 spaces.
Options
This rule has a mixed option:
For example, for 2-space indentation:
{
"indent": ["error", 2]
}
Or for tabbed indentation:
{
"indent": ["error", "tab"]
}
Examples of incorrect code for this rule with the default options:
/*eslint indent: "error"*/
if(a){
b=c;
functionfoo(d){
e=f;
}
}
Examples of correct code for this rule with the default options:
/*eslint indent: "error"*/
if(a){
b=c;
functionfoo(d){
e=f;
}
}
This rule has an object option:
"SwitchCase" (default: 0) enforces indentation level for case clauses in switch statements
"VariableDeclarator" (default: 1) enforces indentation level for var declarators; can also take an object to define separate rules for var, let and const declarations.
"outerIIFEBody" (default: 1) enforces indentation level for file-level IIFEs.
"MemberExpression" (off by default) enforces indentation level for multi-line property chains (except in variable declarations and assignments)
"FunctionDeclaration" takes an object to define rules for function declarations.
parameters (off by default) enforces indentation level for parameters in a function declaration. This can either be a number indicating indentation level, or the string "first" indicating that all parameters of the declaration must be aligned with the first parameter.
body (default: 1) enforces indentation level for the body of a function declaration.
"FunctionExpression" takes an object to define rules for function expressions.
parameters (off by default) enforces indentation level for parameters in a function expression. This can either be a number indicating indentation level, or the string "first" indicating that all parameters of the expression must be aligned with the first parameter.
body (default: 1) enforces indentation level for the body of a function expression.
"CallExpression" takes an object to define rules for function call expressions.
arguments (off by default) enforces indentation level for arguments in a call expression. This can either be a number indicating indentation level, or the string "first" indicating that all arguments of the expression must be aligned with the first argument.
"ArrayExpression" (default: 1) enforces indentation level for elements in arrays. It can also be set to the string "first", indicating that all the elements in the array should be aligned with the first element.
"ObjectExpression" (default: 1) enforces indentation level for properties in objects. It can be set to the string "first", indicating that all properties in the object should be aligned with the first property.
Level of indentation denotes the multiple of the indent specified. Example:
Indent of 4 spaces with VariableDeclarator set to 2 will indent the multi-line variable declarations with 8 spaces.
Indent of 2 spaces with VariableDeclarator set to 2 will indent the multi-line variable declarations with 4 spaces.
Indent of 2 spaces with VariableDeclarator set to {"var": 2, "let": 2, "const": 3} will indent the multi-line variable declarations with 4 spaces for var and let, 6 spaces for const statements.
Indent of tab with VariableDeclarator set to 2 will indent the multi-line variable declarations with 2 tabs.
Indent of 2 spaces with SwitchCase set to 0 will not indent case clauses with respect to switch statements.
Indent of 2 spaces with SwitchCase set to 1 will indent case clauses with 2 spaces with respect to switch statements.
Indent of 2 spaces with SwitchCase set to 2 will indent case clauses with 4 spaces with respect to switch statements.
Indent of tab with SwitchCase set to 2 will indent case clauses with 2 tabs with respect to switch statements.
Indent of 2 spaces with MemberExpression set to 0 will indent the multi-line property chains with 0 spaces.
Indent of 2 spaces with MemberExpression set to 1 will indent the multi-line property chains with 2 spaces.
Indent of 2 spaces with MemberExpression set to 2 will indent the multi-line property chains with 4 spaces.
Indent of 4 spaces with MemberExpression set to 0 will indent the multi-line property chains with 0 spaces.
Indent of 4 spaces with MemberExpression set to 1 will indent the multi-line property chains with 4 spaces.
Indent of 4 spaces with MemberExpression set to 2 will indent the multi-line property chains with 8 spaces.
tab
Examples of incorrect code for this rule with the "tab" option:
/*eslint indent: ["error", "tab"]*/
if(a){
b=c;
functionfoo(d){
e=f;
}
}
Examples of correct code for this rule with the "tab" option:
/*eslint indent: ["error", "tab"]*/
if(a){
/*tab*/b=c;
/*tab*/functionfoo(d){
/*tab*//*tab*/e=f;
/*tab*/}
}
SwitchCase
Examples of incorrect code for this rule with the 2, { "SwitchCase": 1 } options:
Require Variable Declarations to be at the top of their scope (vars-on-top)
The vars-on-top rule generates warnings when variable declarations are not used serially at the top of a function scope or the top of a program.
By default variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.
This rule forces the programmer to represent that behaviour by manually moving the variable declaration to the top of its containing scope.
Rule Details
This rule aims to keep all variable declarations in the leading series of statements.
Allowing multiple declarations helps promote maintainability and is thus allowed.
Examples of incorrect code for this rule:
/*eslint vars-on-top: "error"*/
// Variable declarations in a block:
functiondoSomething(){
var first;
if(true){
first =true;
}
var second;
}
// Variable declaration in for initializer:
functiondoSomething(){
for(var i=0; i<10; i++){}
}
/*eslint vars-on-top: "error"*/
// Variables after other statements:
f();
var a;
Examples of correct code for this rule:
/*eslint vars-on-top: "error"*/
functiondoSomething(){
var first;
var second;//multiple declarations are allowed at the top
require or disallow trailing commas (comma-dangle)
Trailing commas in object literals are valid according to the ECMAScript 5 (and ECMAScript 3!) spec. However, IE8 (when not in IE8 document mode) and below will throw an error when it encounters trailing commas in JavaScript.
var foo ={
bar:"baz",
qux:"quux",
};
Trailing commas simplify adding and removing items to objects and arrays, since only the lines you are modifying must be touched.
Another argument in favor of trailing commas is that it improves the clarity of diffs when an item is added or removed from an object or array:
Less clear:
var foo = {
- bar: "baz",
- qux: "quux"
+ bar: "baz"
};
More clear:
var foo = {
bar: "baz",
- qux: "quux",
};
Rule Details
This rule enforces consistent use of trailing commas in object and array literals.
Options
This rule has a string option or an object option:
{
"comma-dangle": ["error", "never"],
// or
"comma-dangle": ["error", {
"arrays": "never",
"objects": "never",
"imports": "never",
"exports": "never",
"functions": "ignore",
}]
}
"never" (default) disallows trailing commas
"always" requires trailing commas
"always-multiline" requires 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 }
"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 }
Trailing commas in function declarations and function calls are valid syntax since ECMAScript 2017; however, the string option does not check these situations for backwards compatibility.
You can also use an object option to configure this rule for each type of syntax.
Each of the following options can be set to "never", "always", "always-multiline", "only-multiline", or "ignore".
The default for each option is "never" unless otherwise specified.
arrays is for array literals and array patterns of destructuring. (e.g. let [a,] = [1,];)
objects is for object literals and object patterns of destructuring. (e.g. let {a,} = {a: 1};)
imports is for import declarations of ES Modules. (e.g. import {a,} from "foo";)
exports is for export declarations of ES Modules. (e.g. export {a,};)
functions is for function declarations and function calls. (e.g. (function(a,){ })(b,);) functions is set to "ignore" by default for consistency with the string option.
never
Examples of incorrect code for this rule with the default "never" option:
/*eslint comma-dangle: ["error", "never"]*/
var foo ={
bar:"baz",
qux:"quux",
};
var arr =[1,2,];
foo({
bar:"baz",
qux:"quux",
});
Examples of correct code for this rule with the default "never" option:
/*eslint comma-dangle: ["error", "never"]*/
var foo ={
bar:"baz",
qux:"quux"
};
var arr =[1,2];
foo({
bar:"baz",
qux:"quux"
});
always
Examples of incorrect code for this rule with the "always" option:
/*eslint comma-dangle: ["error", "always"]*/
var foo ={
bar:"baz",
qux:"quux"
};
var arr =[1,2];
foo({
bar:"baz",
qux:"quux"
});
Examples of correct code for this rule with the "always" option:
/*eslint comma-dangle: ["error", "always"]*/
var foo ={
bar:"baz",
qux:"quux",
};
var arr =[1,2,];
foo({
bar:"baz",
qux:"quux",
});
always-multiline
Examples of incorrect code for this rule with the "always-multiline" option:
Require Variable Declarations to be at the top of their scope (vars-on-top)
The vars-on-top rule generates warnings when variable declarations are not used serially at the top of a function scope or the top of a program.
By default variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.
This rule forces the programmer to represent that behaviour by manually moving the variable declaration to the top of its containing scope.
Rule Details
This rule aims to keep all variable declarations in the leading series of statements.
Allowing multiple declarations helps promote maintainability and is thus allowed.
Examples of incorrect code for this rule:
/*eslint vars-on-top: "error"*/
// Variable declarations in a block:
functiondoSomething(){
var first;
if(true){
first =true;
}
var second;
}
// Variable declaration in for initializer:
functiondoSomething(){
for(var i=0; i<10; i++){}
}
/*eslint vars-on-top: "error"*/
// Variables after other statements:
f();
var a;
Examples of correct code for this rule:
/*eslint vars-on-top: "error"*/
functiondoSomething(){
var first;
var second;//multiple declarations are allowed at the top
Require Variable Declarations to be at the top of their scope (vars-on-top)
The vars-on-top rule generates warnings when variable declarations are not used serially at the top of a function scope or the top of a program.
By default variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.
This rule forces the programmer to represent that behaviour by manually moving the variable declaration to the top of its containing scope.
Rule Details
This rule aims to keep all variable declarations in the leading series of statements.
Allowing multiple declarations helps promote maintainability and is thus allowed.
Examples of incorrect code for this rule:
/*eslint vars-on-top: "error"*/
// Variable declarations in a block:
functiondoSomething(){
var first;
if(true){
first =true;
}
var second;
}
// Variable declaration in for initializer:
functiondoSomething(){
for(var i=0; i<10; i++){}
}
/*eslint vars-on-top: "error"*/
// Variables after other statements:
f();
var a;
Examples of correct code for this rule:
/*eslint vars-on-top: "error"*/
functiondoSomething(){
var first;
var second;//multiple declarations are allowed at the top
enforce the consistent use of either backticks, double, or single quotes (quotes)
JavaScript allows you to define strings in one of three ways: double quotes, single quotes, and backticks (as of ECMAScript 6). For example:
/*eslint-env es6*/
var double ="double";
var single ='single';
var backtick =`backtick`;// ES6 only
Each of these lines creates a string and, in some cases, can be used interchangeably. The choice of how to define strings in a codebase is a stylistic one outside of template literals (which allow embedded of expressions to be interpreted).
Many codebases require strings to be defined in a consistent manner.
Rule Details
This rule enforces the consistent use of either backticks, double, or single quotes.
Options
This rule has two options, a string option and an object option.
String option:
"double" (default) requires the use of double quotes wherever possible
"single" requires the use of single quotes wherever possible
"backtick" requires the use of backticks wherever possible
Object option:
"avoidEscape": true allows strings to use single-quotes or double-quotes so long as the string contains a quote that would have to be escaped otherwise
"allowTemplateLiterals": true allows strings to use backticks
Deprecated: The object property avoid-escape is deprecated; please use the object property avoidEscape instead.
double
Examples of incorrect code for this rule with the default "double" option:
/*eslint quotes: ["error", "double"]*/
var single ='single';
var unescaped ='a string containing "double" quotes';
Examples of correct code for this rule with the default "double" option:
/*eslint quotes: ["error", "double"]*/
/*eslint-env es6*/
var double ="double";
var backtick =`back\ntick`;// backticks are allowed due to newline
var backtick = tag`backtick`;// backticks are allowed due to tag
single
Examples of incorrect code for this rule with the "single" option:
/*eslint quotes: ["error", "single"]*/
var double ="double";
var unescaped ="a string containing 'single' quotes";
Examples of correct code for this rule with the "single" option:
/*eslint quotes: ["error", "single"]*/
/*eslint-env es6*/
var single ='single';
var backtick =`back${x}tick`;// backticks are allowed due to substitution
backticks
Examples of incorrect code for this rule with the "backtick" option:
/*eslint quotes: ["error", "backtick"]*/
var single ='single';
var double ="double";
var unescaped ='a string containing `backticks`';
Examples of correct code for this rule with the "backtick" option:
/*eslint quotes: ["error", "backtick"]*/
/*eslint-env es6*/
var backtick =`backtick`;
avoidEscape
Examples of additional correct code for this rule with the "double", { "avoidEscape": true } options:
If you do not need consistency in your string styles, you can safely disable this rule.
Source: http://eslint.org/docs/rules/
Enforces spacing around commas (comma-spacing)
Spacing around commas improve readability of a list of items. Although most of the style guidelines for languages prescribe adding a space after a comma and not before it, it is subjective to the preferences of a project.
var foo =1, bar =2;
var foo =1,bar =2;
Rule Details
This rule enforces consistent spacing before and after commas in variable declarations, array literals, object literals, function parameters, and sequences.
This rule does not apply in an ArrayExpression or ArrayPattern in either of the following cases:
adjacent null elements
an initial null element, to avoid conflicts with the [array-bracket-spacing](array-bracket-spacing.md) rule
Options
This rule has an object option:
"before": false (default) disallows spaces before commas
"before": true requires one or more spaces before commas
"after": true (default) requires one or more spaces after commas
"after": false disallows spaces after commas
after
Examples of incorrect code for this rule with the default { "before": false, "after": true } options:
require or disallow padding within blocks (padded-blocks)
Some style guides require block statements to start and end with blank lines. The goal is
to improve readability by visually separating the block content and the surrounding code.
if(a){
b();
}
Since it's good to have a consistent code style, you should either always write
padded blocks or never do it.
Rule Details
This rule enforces consistent empty line padding within blocks.
Options
This rule has one option, which can be a string option or an object option.
String option:
"always" (default) requires empty lines at the beginning and ending of block statements (except switch statements and classes)
"never" disallows empty lines at the beginning and ending of block statements (except switch statements and classes)
Object option:
"blocks" require or disallow padding within block statements
"classes" require or disallow padding within classes
"switches" require or disallow padding within switch statements
always
Examples of incorrect code for this rule with the default "always" option:
/*eslint padded-blocks: ["error", "always"]*/
if(a){
b();
}
if(a){b();}
if(a)
{
b();
}
if(a){
b();
}
if(a){
b();
}
if(a){
// comment
b();
}
Examples of correct code for this rule with the default "always" option:
/*eslint padded-blocks: ["error", "always"]*/
if(a){
b();
}
if(a)
{
b();
}
if(a){
// comment
b();
}
never
Examples of incorrect code for this rule with the "never" option:
/*eslint padded-blocks: ["error", "never"]*/
if(a){
b();
}
if(a)
{
b();
}
if(a){
b();
}
if(a){
b();
}
Examples of correct code for this rule with the "never" option:
/*eslint padded-blocks: ["error", "never"]*/
if(a){
b();
}
if(a)
{
b();
}
blocks
Examples of incorrect code for this rule with the { "blocks": "always" } option:
While formatting preferences are very personal, a number of style guides require
or disallow spaces between curly braces in the following situations:
// simple object literals
var obj ={foo:"bar"};
// nested object literals
var obj ={foo:{zoo:"bar"}};
// destructuring assignment (EcmaScript 6)
var{ x, y }= y;
// import/export declarations (EcmaScript 6)
import{ foo }from"bar";
export{ foo };
Rule Details
This rule enforce consistent spacing inside braces of object literals, destructuring assignments, and import/export specifiers.
Options
This rule has two options, a string option and an object option.
String option:
"never" (default) disallows spacing inside of braces
"always" requires spacing inside of braces (except {})
Object option:
"arraysInObjects": true requires spacing inside of braces of objects beginning and/or ending with an array element (applies when the first option is set to never)
"arraysInObjects": false disallows spacing inside of braces of objects beginning and/or ending with an array element (applies when the first option is set to always)
"objectsInObjects": true requires spacing inside of braces of objects beginning and/or ending with an object element (applies when the first option is set to never)
"objectsInObjects": false disallows spacing inside of braces of objects beginning and/or ending with an object element (applies when the first option is set to always)
never
Examples of incorrect code for this rule with the default "never" option:
enforce the consistent use of either backticks, double, or single quotes (quotes)
JavaScript allows you to define strings in one of three ways: double quotes, single quotes, and backticks (as of ECMAScript 6). For example:
/*eslint-env es6*/
var double ="double";
var single ='single';
var backtick =`backtick`;// ES6 only
Each of these lines creates a string and, in some cases, can be used interchangeably. The choice of how to define strings in a codebase is a stylistic one outside of template literals (which allow embedded of expressions to be interpreted).
Many codebases require strings to be defined in a consistent manner.
Rule Details
This rule enforces the consistent use of either backticks, double, or single quotes.
Options
This rule has two options, a string option and an object option.
String option:
"double" (default) requires the use of double quotes wherever possible
"single" requires the use of single quotes wherever possible
"backtick" requires the use of backticks wherever possible
Object option:
"avoidEscape": true allows strings to use single-quotes or double-quotes so long as the string contains a quote that would have to be escaped otherwise
"allowTemplateLiterals": true allows strings to use backticks
Deprecated: The object property avoid-escape is deprecated; please use the object property avoidEscape instead.
double
Examples of incorrect code for this rule with the default "double" option:
/*eslint quotes: ["error", "double"]*/
var single ='single';
var unescaped ='a string containing "double" quotes';
Examples of correct code for this rule with the default "double" option:
/*eslint quotes: ["error", "double"]*/
/*eslint-env es6*/
var double ="double";
var backtick =`back\ntick`;// backticks are allowed due to newline
var backtick = tag`backtick`;// backticks are allowed due to tag
single
Examples of incorrect code for this rule with the "single" option:
/*eslint quotes: ["error", "single"]*/
var double ="double";
var unescaped ="a string containing 'single' quotes";
Examples of correct code for this rule with the "single" option:
/*eslint quotes: ["error", "single"]*/
/*eslint-env es6*/
var single ='single';
var backtick =`back${x}tick`;// backticks are allowed due to substitution
backticks
Examples of incorrect code for this rule with the "backtick" option:
/*eslint quotes: ["error", "backtick"]*/
var single ='single';
var double ="double";
var unescaped ='a string containing `backticks`';
Examples of correct code for this rule with the "backtick" option:
/*eslint quotes: ["error", "backtick"]*/
/*eslint-env es6*/
var backtick =`backtick`;
avoidEscape
Examples of additional correct code for this rule with the "double", { "avoidEscape": true } options:
If you do not need consistency in your string styles, you can safely disable this rule.
Source: http://eslint.org/docs/rules/
Require Or Disallow Space Before Blocks (space-before-blocks)
Consistency is an important part of any style guide.
While it is a personal preference where to put the opening brace of blocks,
it should be consistent across a whole project.
Having an inconsistent style distracts the reader from seeing the important parts of the code.
Rule Details
This rule will enforce consistency of spacing before blocks. It is only applied on blocks that don’t begin on a new line.
This rule ignores spacing which is between => and a block. The spacing is handled by the arrow-spacing rule.
This rule ignores spacing which is between a keyword and a block. The spacing is handled by the keyword-spacing rule.
Options
This rule takes one argument. If it is "always" then blocks must always have at least one preceding space. If "never"
then all blocks should never have any preceding space. If different spacing is desired for function
blocks, keyword blocks and classes, an optional configuration object can be passed as the rule argument to
configure the cases separately.