Function initLine
has 26 lines of code (exceeds 25 allowed). Consider refactoring. Open
initLine: function() {
var _self = this;
var opts = _.extend({
strokeWidth: 4,
easing: 'easeInOut',
Expected a conditional expression and instead saw an assignment. Open
} else if (self.type = 'infinite') {
- Read upRead up
- Exclude checks
disallow assignment operators in conditional statements (no-cond-assign)
In conditional statements, it is very easy to mistype a comparison operator (such as ==
) as an assignment operator (such as =
). For example:
// Check the user's job title
if (user.jobTitle = "manager") {
// user.jobTitle is now incorrect
}
There are valid reasons to use assignment operators in conditional statements. However, it can be difficult to tell whether a specific assignment was intentional.
Rule Details
This rule disallows ambiguous assignment operators in test conditions of if
, for
, while
, and do...while
statements.
Options
This rule has a string option:
-
"except-parens"
(default) allows assignments in test conditions only if they are enclosed in parentheses (for example, to allow reassigning a variable in the test of awhile
ordo...while
loop) -
"always"
disallows all assignments in test conditions
except-parens
Examples of incorrect code for this rule with the default "except-parens"
option:
/*eslint no-cond-assign: "error"*/
// Unintentional assignment
var x;
if (x = 0) {
var b = 1;
}
// Practical example that is similar to an error
function setHeight(someNode) {
"use strict";
do {
someNode.height = "100px";
} while (someNode = someNode.parentNode);
}
Examples of correct code for this rule with the default "except-parens"
option:
/*eslint no-cond-assign: "error"*/
// Assignment replaced by comparison
var x;
if (x === 0) {
var b = 1;
}
// Practical example that wraps the assignment in parentheses
function setHeight(someNode) {
"use strict";
do {
someNode.height = "100px";
} while ((someNode = someNode.parentNode));
}
// Practical example that wraps the assignment and tests for 'null'
function setHeight(someNode) {
"use strict";
do {
someNode.height = "100px";
} while ((someNode = someNode.parentNode) !== null);
}
always
Examples of incorrect code for this rule with the "always"
option:
/*eslint no-cond-assign: ["error", "always"]*/
// Unintentional assignment
var x;
if (x = 0) {
var b = 1;
}
// Practical example that is similar to an error
function setHeight(someNode) {
"use strict";
do {
someNode.height = "100px";
} while (someNode = someNode.parentNode);
}
// Practical example that wraps the assignment in parentheses
function setHeight(someNode) {
"use strict";
do {
someNode.height = "100px";
} while ((someNode = someNode.parentNode));
}
// Practical example that wraps the assignment and tests for 'null'
function setHeight(someNode) {
"use strict";
do {
someNode.height = "100px";
} while ((someNode = someNode.parentNode) !== null);
}
Examples of correct code for this rule with the "always"
option:
/*eslint no-cond-assign: ["error", "always"]*/
// Assignment replaced by comparison
var x;
if (x === 0) {
var b = 1;
}
Further Reading
Related Rules
- [no-extra-parens](no-extra-parens.md) Source: http://eslint.org/docs/rules/
Unexpected constant condition. Open
} else if (self.type = 'infinite') {
- Read upRead up
- Exclude checks
disallow constant expressions in conditions (no-constant-condition)
A constant expression (for example, a literal) as a test condition might be a typo or development trigger for a specific behavior. For example, the following code looks as if it is not ready for production.
if (false) {
doSomethingUnfinished();
}
Rule Details
This rule disallows constant expressions in the test condition of:
-
if
,for
,while
, ordo...while
statement -
?:
ternary expression
Examples of incorrect code for this rule:
/*eslint no-constant-condition: "error"*/
if (false) {
doSomethingUnfinished();
}
for (;-2;) {
doSomethingForever();
}
while (typeof x) {
doSomethingForever();
}
do{
doSomethingForever();
} while (x = -1);
var result = 0 ? a : b;
Examples of correct code for this rule:
/*eslint no-constant-condition: "error"*/
if (x === 0) {
doSomething();
}
for (;;) {
doSomethingForever();
}
while (typeof x === "undefined") {
doSomething();
}
do{
doSomething();
} while (x);
var result = x !== 0 ? a : b;
Source: http://eslint.org/docs/rules/
'_' is not defined. Open
_.each(this.intervals, function(interval) {
- Read upRead up
- Exclude checks
Disallow Undeclared Variables (no-undef)
This rule can help you locate potential ReferenceErrors resulting from misspellings of variable and parameter names, or accidental implicit globals (for example, from forgetting the var
keyword in a for
loop initializer).
Rule Details
Any reference to an undeclared variable causes a warning, unless the variable is explicitly mentioned in a /*global ...*/
comment.
Examples of incorrect code for this rule:
/*eslint no-undef: "error"*/
var a = someFunction();
b = 10;
Examples of correct code for this rule with global
declaration:
/*global someFunction b:true*/
/*eslint no-undef: "error"*/
var a = someFunction();
b = 10;
The b:true
syntax in /*global */
indicates that assignment to b
is correct.
Examples of incorrect code for this rule with global
declaration:
/*global b*/
/*eslint no-undef: "error"*/
b = 10;
By default, variables declared in /*global */
are read-only, therefore assignment is incorrect.
Options
-
typeof
set to true will warn for variables used inside typeof check (Default false).
typeof
Examples of correct code for the default { "typeof": false }
option:
/*eslint no-undef: "error"*/
if (typeof UndefinedIdentifier === "undefined") {
// do something ...
}
You can use this option if you want to prevent typeof
check on a variable which has not been declared.
Examples of incorrect code for the { "typeof": true }
option:
/*eslint no-undef: ["error", { "typeof": true }] */
if(typeof a === "string"){}
Examples of correct code for the { "typeof": true }
option with global
declaration:
/*global a*/
/*eslint no-undef: ["error", { "typeof": true }] */
if(typeof a === "string"){}
Environments
For convenience, ESLint provides shortcuts that pre-define global variables exposed by popular libraries and runtime environments. This rule supports these environments, as listed in Specifying Environments. A few examples are given below.
browser
Examples of correct code for this rule with browser
environment:
/*eslint no-undef: "error"*/
/*eslint-env browser*/
setTimeout(function() {
alert("Hello");
});
node
Examples of correct code for this rule with node
environment:
/*eslint no-undef: "error"*/
/*eslint-env node*/
var fs = require("fs");
module.exports = function() {
console.log(fs);
};
When Not To Use It
If explicit declaration of global variables is not to your taste.
Compatibility
This rule provides compatibility with treatment of global variables in JSHint and JSLint.
Further Reading
'_' is not defined. Open
var opts = _.extend({
- Read upRead up
- Exclude checks
Disallow Undeclared Variables (no-undef)
This rule can help you locate potential ReferenceErrors resulting from misspellings of variable and parameter names, or accidental implicit globals (for example, from forgetting the var
keyword in a for
loop initializer).
Rule Details
Any reference to an undeclared variable causes a warning, unless the variable is explicitly mentioned in a /*global ...*/
comment.
Examples of incorrect code for this rule:
/*eslint no-undef: "error"*/
var a = someFunction();
b = 10;
Examples of correct code for this rule with global
declaration:
/*global someFunction b:true*/
/*eslint no-undef: "error"*/
var a = someFunction();
b = 10;
The b:true
syntax in /*global */
indicates that assignment to b
is correct.
Examples of incorrect code for this rule with global
declaration:
/*global b*/
/*eslint no-undef: "error"*/
b = 10;
By default, variables declared in /*global */
are read-only, therefore assignment is incorrect.
Options
-
typeof
set to true will warn for variables used inside typeof check (Default false).
typeof
Examples of correct code for the default { "typeof": false }
option:
/*eslint no-undef: "error"*/
if (typeof UndefinedIdentifier === "undefined") {
// do something ...
}
You can use this option if you want to prevent typeof
check on a variable which has not been declared.
Examples of incorrect code for the { "typeof": true }
option:
/*eslint no-undef: ["error", { "typeof": true }] */
if(typeof a === "string"){}
Examples of correct code for the { "typeof": true }
option with global
declaration:
/*global a*/
/*eslint no-undef: ["error", { "typeof": true }] */
if(typeof a === "string"){}
Environments
For convenience, ESLint provides shortcuts that pre-define global variables exposed by popular libraries and runtime environments. This rule supports these environments, as listed in Specifying Environments. A few examples are given below.
browser
Examples of correct code for this rule with browser
environment:
/*eslint no-undef: "error"*/
/*eslint-env browser*/
setTimeout(function() {
alert("Hello");
});
node
Examples of correct code for this rule with node
environment:
/*eslint no-undef: "error"*/
/*eslint-env node*/
var fs = require("fs");
module.exports = function() {
console.log(fs);
};
When Not To Use It
If explicit declaration of global variables is not to your taste.
Compatibility
This rule provides compatibility with treatment of global variables in JSHint and JSLint.
Further Reading
Missing semicolon. Open
}
- Read upRead up
- Exclude checks
Enforce or Disallow Semicolons (semi)
(fixable) The --fix
option on the [command line](../user-guide/command-line-interface#fix) automatically fixes problems reported by this rule.
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()
, orelse
, 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 is aimed at ensuring consistent use of semicolons. You can decide whether or not to require semicolons at the end of statements.
Options
The rule takes one or two options. The first one is a string, which could be "always"
or "never"
. The default is "always"
. The second one is an object for more fine-grained configuration when the first option is "always"
.
You can set the option in configuration like this:
"always"
By using the default option, semicolons must be used any place where they are valid.
semi: ["error", "always"]
The following patterns are considered problems:
/*eslint semi: "error"*/
var name = "ESLint"
object.method = function() {
// ...
}
The following patterns are not considered problems:
/*eslint semi: "error"*/
var name = "ESLint";
object.method = function() {
// ...
};
Fine-grained control
When setting the first option as "always", an additional option can be added to omit the last semicolon in a one-line block, that is, a block in which its braces (and therefore the content of the block) are in the same line:
semi: ["error", "always", { "omitLastInOneLineBlock": true}]
The following patterns are considered problems:
/*eslint semi: ["error", "always", { "omitLastInOneLineBlock": true}] */
if (foo) {
bar()
}
if (foo) { bar(); }
The following patterns are not considered problems:
/*eslint semi: ["error", "always", { "omitLastInOneLineBlock": true}] */
if (foo) { bar() }
if (foo) { bar(); baz() }
"never"
If you want to enforce that semicolons are never used, switch the configuration to:
semi: [2, "never"]
Then, the following patterns are considered problems:
/*eslint semi: ["error", "never"]*/
var name = "ESLint";
object.method = function() {
// ...
};
And the following patterns are not considered problems:
/*eslint semi: ["error", "never"]*/
var name = "ESLint"
object.method = function() {
// ...
}
Even in "never"
mode, semicolons are still allowed to disambiguate statements beginning with [
, (
, /
, +
, or -
:
/*eslint semi: ["error", "never"]*/
var name = "ESLint"
;(function() {
// ...
})()
When Not To Use It
If you do not want to enforce semicolon usage (or omission) in any particular way, then you can turn this rule off.
Further Reading
- An Open Letter to JavaScript Leaders Regarding Semicolons
- JavaScript Semicolon Insertion
- Understanding Automatic Semicolon Insertion in JavaScript
Related Rules
- [no-extra-semi](no-extra-semi.md)
- [no-unexpected-multiline](no-unexpected-multiline.md)
- [semi-spacing](semi-spacing.md) Source: http://eslint.org/docs/rules/
Inconsistently quoted property 'text-align' found. Open
style: {
- Read upRead up
- Exclude checks
Quoting Style for Property Names (quote-props)
Object literal property names can be defined in two ways: using literals or using strings. For example, these two objects are equivalent:
var object1 = {
property: true
};
var object2 = {
"property": true
};
In many cases, it doesn't matter if you choose to use an identifier instead of a string or vice-versa. Even so, you might decide to enforce a consistent style in your code.
There are, however, some occasions when you must use quotes:
- If you are using an ECMAScript 3 JavaScript engine (such as IE8) and you want to use a keyword (such as
if
) as a property name. This restriction was removed in ECMAScript 5. - You want to use a non-identifier character in your property name, such as having a property with a space like
"one two"
.
Another example where quotes do matter is when using numeric literals as property keys:
var object = {
1e2: 1,
100: 2
};
This may look alright at first sight, but this code in fact throws a syntax error in ECMAScript 5 strict mode. This happens because 1e2
and 100
are coerced into strings before getting used as the property name. Both String(1e2)
and String(100)
happen to be equal to "100"
, which causes the "Duplicate data property in object literal not allowed in strict mode" error. Issues like that can be tricky to debug, so some prefer to require quotes around all property names.
Rule Details
This rule aims to enforce use of quotes in property names and as such will flag any properties that don't use quotes (default behavior).
Options
There are four behaviors for this rule: "always"
(default), "as-needed"
, "consistent"
and "consistent-as-needed"
. You can define these options in your configuration as:
{
"quote-props": ["error", "as-needed"]
}
"always"
When configured with "always"
as the first option (the default), quoting for all properties will be enforced. Some believe that ensuring property names in object literals are always wrapped in quotes is generally a good idea, since depending on the property name you may need to quote them anyway. Consider this example:
var object = {
foo: "bar",
baz: 42,
"qux-lorem": true
};
Here, the properties foo
and baz
are not wrapped in quotes, but qux-lorem
is, because it doesn’t work without the quotes. This is rather inconsistent. Instead, you may prefer to quote names of all properties:
var object = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
or, if you prefer single quotes:
var object = {
'foo': 'bar',
'baz': 42,
'qux-lorem': true
};
When configured with "always"
as the first option (the default), quoting for all properties will be enforced. The following patterns are considered problems:
/*eslint quote-props: ["error", "always"]*/
var object = {
foo: "bar",
baz: 42,
"qux-lorem": true
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "always"]*/
/*eslint-env es6*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42,
'qux-lorem': true
};
var object3 = {
foo() {
return;
}
};
"as-needed"
When configured with "as-needed"
as the first option, quotes will be enforced when they are strictly required, and unnecessary quotes will cause warnings. The following patterns are considered problems:
/*eslint quote-props: ["error", "as-needed"]*/
var object = {
"a": 0,
"0": 0,
"true": 0,
"null": 0
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "as-needed"]*/
/*eslint-env es6*/
var object1 = {
"a-b": 0,
"0x0": 0,
"1e2": 0
};
var object2 = {
foo: 'bar',
baz: 42,
true: 0,
0: 0,
'qux-lorem': true
};
var object3 = {
foo() {
return;
}
};
When the "as-needed"
mode is selected, an additional keywords
option can be provided. This flag indicates whether language keywords should be quoted as properties. By default it is set to false
.
{
"quote-props": ["error", "as-needed", { "keywords": true }]
}
When keywords
is set to true
, the following patterns become problems:
/*eslint quote-props: ["error", "as-needed", { "keywords": true }]*/
var x = {
while: 1,
volatile: "foo"
};
Another modifier for this rule is the unnecessary
option which defaults to true
. Setting this to false
will prevent the rule from complaining about unnecessarily quoted properties. This comes in handy when you only care about quoting keywords.
{
"quote-props": ["error", "as-needed", { "keywords": true, "unnecessary": false }]
}
When unnecessary
is set to false
, the following patterns stop being problems:
/*eslint quote-props: ["error", "as-needed", { "keywords": true, "unnecessary": false }]*/
var x = {
"while": 1,
"foo": "bar" // Would normally have caused a warning
};
A numbers
flag, with default value false
, can also be used as a modifier for the "as-needed"
mode. When it is set to true
, numeric literals should always be quoted.
{
"quote-props": ["error", "as-needed", {"numbers": true}]
}
When numbers
is set to true
, the following patterns become problems:
/*eslint quote-props: ["error", "as-needed", { "numbers": true }]*/
var x = {
100: 1
}
and the following patterns stop being problems:
var x = {
"100": 1
}
"consistent"
When configured with "consistent"
, the patterns below are considered problems. Basically "consistent"
means all or no properties are expected to be quoted, in other words quoting style can't be mixed within an object. Please note the latter situation (no quotation at all) isn't always possible as some property names require quoting.
/*eslint quote-props: ["error", "consistent"]*/
var object1 = {
foo: "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
baz: 42
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "consistent"]*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42
};
var object3 = {
foo: 'bar',
baz: 42
};
"consistent-as-needed"
When configured with "consistent-as-needed"
, the behavior is similar to "consistent"
with one difference. Namely, properties' quoting should be consistent (as in "consistent"
) but whenever all quotes are redundant a warning is raised. In other words if at least one property name has to be quoted (like qux-lorem
) then all property names must be quoted, otherwise no properties can be quoted. The following patterns are considered problems:
/*eslint quote-props: ["error", "consistent-as-needed"]*/
var object1 = {
foo: "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "consistent-as-needed"]*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
foo: 'bar',
baz: 42
};
When the "consistent-as-needed"
mode is selected, an additional keywords
option can be provided. This flag indicates whether language keywords can be used unquoted as properties. By default it is set to false
.
{
"quote-props": ["error", "consistent-as-needed", { "keywords": true }]
}
When keywords
is set to true
, the following patterns are considered problems:
/*eslint quote-props: ["error", "consistent-as-needed", { "keywords": true }]*/
var x = {
while: 1,
volatile: "foo"
};
When Not To Use It
If you don't care if property names are consistently wrapped in quotes or not, and you don't target legacy ES3 environments, turn this rule off.
Further Reading
Properties shouldn't be quoted as all quotes are redundant. Open
watch: {
- Read upRead up
- Exclude checks
Quoting Style for Property Names (quote-props)
Object literal property names can be defined in two ways: using literals or using strings. For example, these two objects are equivalent:
var object1 = {
property: true
};
var object2 = {
"property": true
};
In many cases, it doesn't matter if you choose to use an identifier instead of a string or vice-versa. Even so, you might decide to enforce a consistent style in your code.
There are, however, some occasions when you must use quotes:
- If you are using an ECMAScript 3 JavaScript engine (such as IE8) and you want to use a keyword (such as
if
) as a property name. This restriction was removed in ECMAScript 5. - You want to use a non-identifier character in your property name, such as having a property with a space like
"one two"
.
Another example where quotes do matter is when using numeric literals as property keys:
var object = {
1e2: 1,
100: 2
};
This may look alright at first sight, but this code in fact throws a syntax error in ECMAScript 5 strict mode. This happens because 1e2
and 100
are coerced into strings before getting used as the property name. Both String(1e2)
and String(100)
happen to be equal to "100"
, which causes the "Duplicate data property in object literal not allowed in strict mode" error. Issues like that can be tricky to debug, so some prefer to require quotes around all property names.
Rule Details
This rule aims to enforce use of quotes in property names and as such will flag any properties that don't use quotes (default behavior).
Options
There are four behaviors for this rule: "always"
(default), "as-needed"
, "consistent"
and "consistent-as-needed"
. You can define these options in your configuration as:
{
"quote-props": ["error", "as-needed"]
}
"always"
When configured with "always"
as the first option (the default), quoting for all properties will be enforced. Some believe that ensuring property names in object literals are always wrapped in quotes is generally a good idea, since depending on the property name you may need to quote them anyway. Consider this example:
var object = {
foo: "bar",
baz: 42,
"qux-lorem": true
};
Here, the properties foo
and baz
are not wrapped in quotes, but qux-lorem
is, because it doesn’t work without the quotes. This is rather inconsistent. Instead, you may prefer to quote names of all properties:
var object = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
or, if you prefer single quotes:
var object = {
'foo': 'bar',
'baz': 42,
'qux-lorem': true
};
When configured with "always"
as the first option (the default), quoting for all properties will be enforced. The following patterns are considered problems:
/*eslint quote-props: ["error", "always"]*/
var object = {
foo: "bar",
baz: 42,
"qux-lorem": true
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "always"]*/
/*eslint-env es6*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42,
'qux-lorem': true
};
var object3 = {
foo() {
return;
}
};
"as-needed"
When configured with "as-needed"
as the first option, quotes will be enforced when they are strictly required, and unnecessary quotes will cause warnings. The following patterns are considered problems:
/*eslint quote-props: ["error", "as-needed"]*/
var object = {
"a": 0,
"0": 0,
"true": 0,
"null": 0
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "as-needed"]*/
/*eslint-env es6*/
var object1 = {
"a-b": 0,
"0x0": 0,
"1e2": 0
};
var object2 = {
foo: 'bar',
baz: 42,
true: 0,
0: 0,
'qux-lorem': true
};
var object3 = {
foo() {
return;
}
};
When the "as-needed"
mode is selected, an additional keywords
option can be provided. This flag indicates whether language keywords should be quoted as properties. By default it is set to false
.
{
"quote-props": ["error", "as-needed", { "keywords": true }]
}
When keywords
is set to true
, the following patterns become problems:
/*eslint quote-props: ["error", "as-needed", { "keywords": true }]*/
var x = {
while: 1,
volatile: "foo"
};
Another modifier for this rule is the unnecessary
option which defaults to true
. Setting this to false
will prevent the rule from complaining about unnecessarily quoted properties. This comes in handy when you only care about quoting keywords.
{
"quote-props": ["error", "as-needed", { "keywords": true, "unnecessary": false }]
}
When unnecessary
is set to false
, the following patterns stop being problems:
/*eslint quote-props: ["error", "as-needed", { "keywords": true, "unnecessary": false }]*/
var x = {
"while": 1,
"foo": "bar" // Would normally have caused a warning
};
A numbers
flag, with default value false
, can also be used as a modifier for the "as-needed"
mode. When it is set to true
, numeric literals should always be quoted.
{
"quote-props": ["error", "as-needed", {"numbers": true}]
}
When numbers
is set to true
, the following patterns become problems:
/*eslint quote-props: ["error", "as-needed", { "numbers": true }]*/
var x = {
100: 1
}
and the following patterns stop being problems:
var x = {
"100": 1
}
"consistent"
When configured with "consistent"
, the patterns below are considered problems. Basically "consistent"
means all or no properties are expected to be quoted, in other words quoting style can't be mixed within an object. Please note the latter situation (no quotation at all) isn't always possible as some property names require quoting.
/*eslint quote-props: ["error", "consistent"]*/
var object1 = {
foo: "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
baz: 42
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "consistent"]*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42
};
var object3 = {
foo: 'bar',
baz: 42
};
"consistent-as-needed"
When configured with "consistent-as-needed"
, the behavior is similar to "consistent"
with one difference. Namely, properties' quoting should be consistent (as in "consistent"
) but whenever all quotes are redundant a warning is raised. In other words if at least one property name has to be quoted (like qux-lorem
) then all property names must be quoted, otherwise no properties can be quoted. The following patterns are considered problems:
/*eslint quote-props: ["error", "consistent-as-needed"]*/
var object1 = {
foo: "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "consistent-as-needed"]*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
foo: 'bar',
baz: 42
};
When the "consistent-as-needed"
mode is selected, an additional keywords
option can be provided. This flag indicates whether language keywords can be used unquoted as properties. By default it is set to false
.
{
"quote-props": ["error", "consistent-as-needed", { "keywords": true }]
}
When keywords
is set to true
, the following patterns are considered problems:
/*eslint quote-props: ["error", "consistent-as-needed", { "keywords": true }]*/
var x = {
while: 1,
volatile: "foo"
};
When Not To Use It
If you don't care if property names are consistently wrapped in quotes or not, and you don't target legacy ES3 environments, turn this rule off.
Further Reading
Inconsistently quoted property 'transform' found. Open
style: {
- Read upRead up
- Exclude checks
Quoting Style for Property Names (quote-props)
Object literal property names can be defined in two ways: using literals or using strings. For example, these two objects are equivalent:
var object1 = {
property: true
};
var object2 = {
"property": true
};
In many cases, it doesn't matter if you choose to use an identifier instead of a string or vice-versa. Even so, you might decide to enforce a consistent style in your code.
There are, however, some occasions when you must use quotes:
- If you are using an ECMAScript 3 JavaScript engine (such as IE8) and you want to use a keyword (such as
if
) as a property name. This restriction was removed in ECMAScript 5. - You want to use a non-identifier character in your property name, such as having a property with a space like
"one two"
.
Another example where quotes do matter is when using numeric literals as property keys:
var object = {
1e2: 1,
100: 2
};
This may look alright at first sight, but this code in fact throws a syntax error in ECMAScript 5 strict mode. This happens because 1e2
and 100
are coerced into strings before getting used as the property name. Both String(1e2)
and String(100)
happen to be equal to "100"
, which causes the "Duplicate data property in object literal not allowed in strict mode" error. Issues like that can be tricky to debug, so some prefer to require quotes around all property names.
Rule Details
This rule aims to enforce use of quotes in property names and as such will flag any properties that don't use quotes (default behavior).
Options
There are four behaviors for this rule: "always"
(default), "as-needed"
, "consistent"
and "consistent-as-needed"
. You can define these options in your configuration as:
{
"quote-props": ["error", "as-needed"]
}
"always"
When configured with "always"
as the first option (the default), quoting for all properties will be enforced. Some believe that ensuring property names in object literals are always wrapped in quotes is generally a good idea, since depending on the property name you may need to quote them anyway. Consider this example:
var object = {
foo: "bar",
baz: 42,
"qux-lorem": true
};
Here, the properties foo
and baz
are not wrapped in quotes, but qux-lorem
is, because it doesn’t work without the quotes. This is rather inconsistent. Instead, you may prefer to quote names of all properties:
var object = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
or, if you prefer single quotes:
var object = {
'foo': 'bar',
'baz': 42,
'qux-lorem': true
};
When configured with "always"
as the first option (the default), quoting for all properties will be enforced. The following patterns are considered problems:
/*eslint quote-props: ["error", "always"]*/
var object = {
foo: "bar",
baz: 42,
"qux-lorem": true
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "always"]*/
/*eslint-env es6*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42,
'qux-lorem': true
};
var object3 = {
foo() {
return;
}
};
"as-needed"
When configured with "as-needed"
as the first option, quotes will be enforced when they are strictly required, and unnecessary quotes will cause warnings. The following patterns are considered problems:
/*eslint quote-props: ["error", "as-needed"]*/
var object = {
"a": 0,
"0": 0,
"true": 0,
"null": 0
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "as-needed"]*/
/*eslint-env es6*/
var object1 = {
"a-b": 0,
"0x0": 0,
"1e2": 0
};
var object2 = {
foo: 'bar',
baz: 42,
true: 0,
0: 0,
'qux-lorem': true
};
var object3 = {
foo() {
return;
}
};
When the "as-needed"
mode is selected, an additional keywords
option can be provided. This flag indicates whether language keywords should be quoted as properties. By default it is set to false
.
{
"quote-props": ["error", "as-needed", { "keywords": true }]
}
When keywords
is set to true
, the following patterns become problems:
/*eslint quote-props: ["error", "as-needed", { "keywords": true }]*/
var x = {
while: 1,
volatile: "foo"
};
Another modifier for this rule is the unnecessary
option which defaults to true
. Setting this to false
will prevent the rule from complaining about unnecessarily quoted properties. This comes in handy when you only care about quoting keywords.
{
"quote-props": ["error", "as-needed", { "keywords": true, "unnecessary": false }]
}
When unnecessary
is set to false
, the following patterns stop being problems:
/*eslint quote-props: ["error", "as-needed", { "keywords": true, "unnecessary": false }]*/
var x = {
"while": 1,
"foo": "bar" // Would normally have caused a warning
};
A numbers
flag, with default value false
, can also be used as a modifier for the "as-needed"
mode. When it is set to true
, numeric literals should always be quoted.
{
"quote-props": ["error", "as-needed", {"numbers": true}]
}
When numbers
is set to true
, the following patterns become problems:
/*eslint quote-props: ["error", "as-needed", { "numbers": true }]*/
var x = {
100: 1
}
and the following patterns stop being problems:
var x = {
"100": 1
}
"consistent"
When configured with "consistent"
, the patterns below are considered problems. Basically "consistent"
means all or no properties are expected to be quoted, in other words quoting style can't be mixed within an object. Please note the latter situation (no quotation at all) isn't always possible as some property names require quoting.
/*eslint quote-props: ["error", "consistent"]*/
var object1 = {
foo: "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
baz: 42
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "consistent"]*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42
};
var object3 = {
foo: 'bar',
baz: 42
};
"consistent-as-needed"
When configured with "consistent-as-needed"
, the behavior is similar to "consistent"
with one difference. Namely, properties' quoting should be consistent (as in "consistent"
) but whenever all quotes are redundant a warning is raised. In other words if at least one property name has to be quoted (like qux-lorem
) then all property names must be quoted, otherwise no properties can be quoted. The following patterns are considered problems:
/*eslint quote-props: ["error", "consistent-as-needed"]*/
var object1 = {
foo: "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42
};
The following patterns are not considered problems:
/*eslint quote-props: ["error", "consistent-as-needed"]*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
foo: 'bar',
baz: 42
};
When the "consistent-as-needed"
mode is selected, an additional keywords
option can be provided. This flag indicates whether language keywords can be used unquoted as properties. By default it is set to false
.
{
"quote-props": ["error", "consistent-as-needed", { "keywords": true }]
}
When keywords
is set to true
, the following patterns are considered problems:
/*eslint quote-props: ["error", "consistent-as-needed", { "keywords": true }]*/
var x = {
while: 1,
volatile: "foo"
};
When Not To Use It
If you don't care if property names are consistently wrapped in quotes or not, and you don't target legacy ES3 environments, turn this rule off.
Further Reading
Missing semicolon. Open
})
- Read upRead up
- Exclude checks
Enforce or Disallow Semicolons (semi)
(fixable) The --fix
option on the [command line](../user-guide/command-line-interface#fix) automatically fixes problems reported by this rule.
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()
, orelse
, 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 is aimed at ensuring consistent use of semicolons. You can decide whether or not to require semicolons at the end of statements.
Options
The rule takes one or two options. The first one is a string, which could be "always"
or "never"
. The default is "always"
. The second one is an object for more fine-grained configuration when the first option is "always"
.
You can set the option in configuration like this:
"always"
By using the default option, semicolons must be used any place where they are valid.
semi: ["error", "always"]
The following patterns are considered problems:
/*eslint semi: "error"*/
var name = "ESLint"
object.method = function() {
// ...
}
The following patterns are not considered problems:
/*eslint semi: "error"*/
var name = "ESLint";
object.method = function() {
// ...
};
Fine-grained control
When setting the first option as "always", an additional option can be added to omit the last semicolon in a one-line block, that is, a block in which its braces (and therefore the content of the block) are in the same line:
semi: ["error", "always", { "omitLastInOneLineBlock": true}]
The following patterns are considered problems:
/*eslint semi: ["error", "always", { "omitLastInOneLineBlock": true}] */
if (foo) {
bar()
}
if (foo) { bar(); }
The following patterns are not considered problems:
/*eslint semi: ["error", "always", { "omitLastInOneLineBlock": true}] */
if (foo) { bar() }
if (foo) { bar(); baz() }
"never"
If you want to enforce that semicolons are never used, switch the configuration to:
semi: [2, "never"]
Then, the following patterns are considered problems:
/*eslint semi: ["error", "never"]*/
var name = "ESLint";
object.method = function() {
// ...
};
And the following patterns are not considered problems:
/*eslint semi: ["error", "never"]*/
var name = "ESLint"
object.method = function() {
// ...
}
Even in "never"
mode, semicolons are still allowed to disambiguate statements beginning with [
, (
, /
, +
, or -
:
/*eslint semi: ["error", "never"]*/
var name = "ESLint"
;(function() {
// ...
})()
When Not To Use It
If you do not want to enforce semicolon usage (or omission) in any particular way, then you can turn this rule off.
Further Reading
- An Open Letter to JavaScript Leaders Regarding Semicolons
- JavaScript Semicolon Insertion
- Understanding Automatic Semicolon Insertion in JavaScript
Related Rules
- [no-extra-semi](no-extra-semi.md)
- [no-unexpected-multiline](no-unexpected-multiline.md)
- [semi-spacing](semi-spacing.md) Source: http://eslint.org/docs/rules/
Newline required at end of file but not found. Open
window.ProgressBar);
- Read upRead up
- Exclude checks
Require file to end with single newline (eol-last)
(fixable) The --fix
option on the [command line](../user-guide/command-line-interface#fix) automatically fixes problems reported by this rule.
Trailing newlines in non-empty files are a common UNIX idiom. Benefits of trailing newlines include the ability to concatenate or append to files as well as output files to the terminal without interfering with shell prompts.
Rule Details
This rule requires at least one newline at the end of non-empty files.
Prior to v0.16.0 this rule also enforced that there was only a single line at
the end of the file. If you still want this behaviour, consider enabling
[no-multiple-empty-lines](no-multiple-empty-lines.md) with maxEOF
and/or
[no-trailing-spaces](no-trailing-spaces.md).
Examples of incorrect code for this rule:
/*eslint eol-last: "error"*/
function doSmth() {
var foo = 2;
}
Examples of correct code for this rule:
/*eslint eol-last: "error"*/
function doSmth() {
var foo = 2;
}
Options
This rule has a string option:
-
"unix"
(default) enforces line feed (LF) as newline -
"windows"
enforces carriage return line feed (CRLF) as newline Source: http://eslint.org/docs/rules/