quote-props

要求在对象文字属性名称周围使用引号

此规则在 ESLint v8.53.0 中已**弃用**。请在 相应的规则中使用 @stylistic/eslint-plugin-js。

对象文字属性名称可以通过两种方式定义：使用字面量或使用字符串。例如，这两个对象是等效的

var object1 = {
    property: true
};

var object2 = {
    "property": true
};
1
2
3
4
5
6
7

在许多情况下，选择使用标识符而不是字符串或反之亦然都没有关系。即便如此，您可能仍决定在代码中强制执行一致的样式。

但是，在某些情况下，您必须使用引号

1. 如果您使用的是 ECMAScript 3 JavaScript 引擎（例如 IE8）并且想要使用关键字（例如 if）作为属性名称。此限制在 ECMAScript 5 中已移除。
2. 您想要在属性名称中使用非标识符字符，例如具有空格的属性，如 "one two"。

使用数字字面量作为属性键时，引号也起作用的另一个示例

var object = {
    1e2: 1,
    100: 2
};
1
2
3
4

乍一看这可能没问题，但这段代码实际上在 ECMAScript 5 严格模式下会抛出语法错误。发生这种情况是因为 1e2 和 100 在用作属性名称之前被强制转换为字符串。String(1e2) 和 String(100) 恰好都等于 "100"，这会导致“对象文字中不允许重复数据属性（在严格模式下）”错误。此类问题可能难以调试，因此有些人更喜欢要求所有属性名称都用引号括起来。

规则详情

此规则要求在对象文字属性名称周围使用引号。

选项

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

字符串选项

• "always"（默认）要求在所有对象文字属性名称周围使用引号
• "as-needed" 不允许在不严格要求的对象文字属性名称周围使用引号
• "consistent" 强制执行一致的引号样式；在给定的对象中，要么所有属性都应加引号，要么所有属性都不应加引号
• "consistent-as-needed" 如果任何名称严格要求使用引号，则要求在所有对象文字属性名称周围使用引号，否则不允许在对象属性名称周围使用引号

对象选项

• "keywords": true 要求在用作对象属性名称的语言关键字周围使用引号（仅在使用 as-needed 或 consistent-as-needed 时适用）
• "unnecessary": true（默认）不允许在不严格要求的对象文字属性名称周围使用引号（仅在使用 as-needed 时适用）
• "unnecessary": false 允许在不严格要求的对象文字属性名称周围使用引号（仅在使用 as-needed 时适用）
• "numbers": true 要求在用作对象属性名称的数字周围使用引号（仅在使用 as-needed 时适用）

always

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

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

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

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

/*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" 选项时，此规则的错误代码示例

/*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" 选项时，此规则的正确代码示例

/*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" 选项时，此规则的错误代码示例

/*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" 选项时，此规则的正确代码示例

/*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" 选项时，此规则的错误代码示例

/*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" 选项时，此规则的正确代码示例

/*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 } 选项时，此规则的其他错误代码示例

/*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 } 选项时，此规则的其他错误代码示例

/*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 } 选项时，此规则的其他正确代码示例

/*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 } 选项时，此规则的其他错误代码示例

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

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

何时不使用它

如果您不关心属性名称是否始终用引号括起来，并且不针对旧版 ES3 环境，请关闭此规则。

版本

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

进一步阅读

ECMAScript 5 兼容性表
kangax.github.io

JavaScript 中未加引号的属性名称/对象键 · Mathias Bynens
mathiasbynens.be

资源

• 规则源代码
• 测试源代码