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
};
1
2
3
4
5
6
7

在许多情况下，选择使用标识符而不是字符串并不重要，反之亦然。即使这样，你也可能决定在代码中强制使用一致的样式。

¥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:

1. 如果你使用的是 ECMAScript 3 JavaScript 引擎（例如 IE8）并且你想使用关键字（例如 if）作为属性名称。这个限制在 ECMAScript 5 中被移除。

   ¥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.

2. 你想在属性名称中使用非标识符字符，例如有一个带有空格的属性，如 "one two"。

   ¥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
};
1
2
3
4

乍一看，这可能没什么问题，但实际上这段代码在 ECMAScript 5 严格模式下会引发语法错误。发生这种情况是因为 1e2 和 100 在用作属性名称之前被强制转换为字符串。String(1e2) 和 String(100) 恰好等于 "100"，导致 “严格模式下不允许对象字面量中的重复数据属性” 错误。像这样的问题可能很难调试，所以有些人更喜欢在所有属性名称周围加上引号。

¥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 requires quotes around object literal property names.

选项

¥Options

该规则有两个选项，一个字符串选项和一个对象选项。

¥This rule has two options, a string option and an object option.

字符串选项：

¥String option:

• "always"（默认）需要在所有对象字面量属性名称周围加上引号

  ¥"always" (default) requires quotes around all object literal property names

• "as-needed" 不允许在非严格要求的对象字面量属性名称周围加上引号

  ¥"as-needed" disallows quotes around object literal property names that are not strictly required

• "consistent" 强制执行一致的引用样式；在给定的对象中，要么所有属性都应该被引用，要么所有属性都不应该被引用

  ¥"consistent" enforces a consistent quote style; in a given object, either all of the properties should be quoted, or none of the properties should be quoted

• 如果任何名称严格需要引号，则 "consistent-as-needed" 要求所有对象字面量属性名称都加上引号，否则不允许在对象属性名称周围加上引号

  ¥"consistent-as-needed" requires quotes around all object literal property names if any name strictly requires quotes, otherwise disallows quotes around object property names

对象选项：

¥Object option:

• "keywords": true 需要在用作对象属性名称的语言关键字周围加上引号（仅在使用 as-needed 或 consistent-as-needed 时适用）

  ¥"keywords": true requires quotes around language keywords used as object property names (only applies when using as-needed or consistent-as-needed)

• "unnecessary": true（默认）不允许在不严格要求的对象字面量属性名称周围使用引号（仅在使用 as-needed 时适用）

  ¥"unnecessary": true (default) disallows quotes around object literal property names that are not strictly required (only applies when using as-needed)

• "unnecessary": false 允许在不严格要求的对象字面量属性名称周围使用引号（仅在使用 as-needed 时适用）

  ¥"unnecessary": false allows quotes around object literal property names that are not strictly required (only applies when using as-needed)

• "numbers": true 需要用引号将用作对象属性名称的数字括起来（仅在使用 as-needed 时适用）

  ¥"numbers": true requires quotes around numbers used as object property names (only applies when using as-needed)

always

使用默认 "always" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the default "always" option:

/*eslint quote-props: ["error", "always"]*/

var object = {
    foo: "bar",
    baz: 42
};
1
2
3
4
5
6

使用默认 "always" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the default "always" option:

/*eslint quote-props: ["error", "always"]*/

var object1 = {
    "foo": "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    'foo': 'bar',
    'baz': 42,
    'qux-lorem': true
};

var object3 = {
    foo() {
        return;
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

as-needed

使用 "as-needed" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the "as-needed" option:

/*eslint quote-props: ["error", "as-needed"]*/

var object = {
    "a": 0,
    "0": 0,
    "true": 0,
    "null": 0
};
1
2
3
4
5
6
7
8

使用 "as-needed" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "as-needed" option:

/*eslint quote-props: ["error", "as-needed"]*/

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;
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

consistent

使用 "consistent" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the "consistent" option:

/*eslint quote-props: ["error", "consistent"]*/

var object1 = {
    foo: "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    'foo': 'bar',
    baz: 42
};
1
2
3
4
5
6
7
8
9
10
11
12

使用 "consistent" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "consistent" option:

/*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
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

consistent-as-needed

使用 "consistent-as-needed" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the "consistent-as-needed" option:

/*eslint quote-props: ["error", "consistent-as-needed"]*/

var object1 = {
    foo: "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    'foo': 'bar',
    'baz': 42
};
1
2
3
4
5
6
7
8
9
10
11
12

使用 "consistent-as-needed" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "consistent-as-needed" option:

/*eslint quote-props: ["error", "consistent-as-needed"]*/

var object1 = {
    "foo": "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    foo: 'bar',
    baz: 42
};
1
2
3
4
5
6
7
8
9
10
11
12

keywords

使用 "as-needed", { "keywords": true } 选项的此规则的其他错误代码示例：

¥Examples of additional incorrect code for this rule with the "as-needed", { "keywords": true } options:

/*eslint quote-props: ["error", "as-needed", { "keywords": true }]*/

var x = {
    while: 1,
    volatile: "foo"
};
1
2
3
4
5
6

使用 "consistent-as-needed", { "keywords": true } 选项的此规则的其他错误代码示例：

¥Examples of additional incorrect code for this rule with the "consistent-as-needed", { "keywords": true } options:

/*eslint quote-props: ["error", "consistent-as-needed", { "keywords": true }]*/

var x = {
    "prop": 1,
    "bar": "foo"
};
1
2
3
4
5
6

unnecessary

使用 "as-needed", { "unnecessary": false } 选项的此规则的附加正确代码示例：

¥Examples of additional correct code for this rule with the "as-needed", { "unnecessary": false } options:

/*eslint quote-props: ["error", "as-needed", { "keywords": true, "unnecessary": false }]*/

var x = {
    "while": 1,
    "foo": "bar"  // Would normally have caused a warning
};
1
2
3
4
5
6

numbers

使用 "as-needed", { "numbers": true } 选项的此规则的其他错误代码示例：

¥Examples of additional incorrect code for this rule with the "as-needed", { "numbers": true } options:

/*eslint quote-props: ["error", "as-needed", { "numbers": true }]*/

var x = {
    100: 1
}
1
2
3
4
5

何时不使用

¥When Not To Use It

如果你不关心属性名称是否始终包含在引号中，并且你不针对旧版 ES3 环境，请关闭此规则。

¥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.

版本

此规则是在 ESLint v0.0.6 中引入。

进阶读物

ECMAScript 5 compatibility table
kangax.github.io

Unquoted property names / object keys in JavaScript · Mathias Bynens
mathiasbynens.be

资源

• 规则源码
• 测试源码