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 中，这一限制已被移除。
2. 你想在属性名称中使用非标识符字符，例如在属性中使用一个像 "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"（默认）要求在所有对象字面量属性名周围使用引号
• "as-needed" 不允许在非严格必需的对象字面量属性名周围使用引号
• "consistent" 强制使用一致的引号风格；在给定的对象中，要么所有属性都使用引号，要么所有属性都不使用引号
• "consistent-as-needed" 要求如果某个属性名严格需要引号，则对象字面量的所有属性名都必须使用引号，否则不允许对象属性名使用引号

对象选项：

🌐 Object option:

• "keywords": true 要求在作为对象属性名使用的语言关键字周围加引号（仅在使用 as-needed 或 consistent-as-needed 时适用）
• "unnecessary": true（默认）不允许在对象字面量属性名周围使用不严格要求的引号（仅在使用 as-needed 时适用）
• "unnecessary": false 允许在对象字面量属性名周围使用引号，即使不是严格必须的（仅在使用 as-needed 时适用）
• "numbers": true 要求在作为对象属性名使用的数字周围加上引号（仅在使用 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

资源

• 规则源码
• 测试源码