quote-props
对象字面量属性名可以通过两种方式定义:使用字面量或使用字符串。例如,这两个对象是等效的
var object1 = {
property: true
};
var object2 = {
"property": true
};
在很多情况下,使用标识符还是字符串并不重要。即使如此,您可能也决定在代码中强制执行一致的风格。
但是,在某些情况下,您必须使用引号
- 如果您使用的是 ECMAScript 3 JavaScript 引擎(例如 IE8),并且想要使用关键字(例如
if
)作为属性名。此限制在 ECMAScript 5 中已移除。 - 您想要在属性名中使用非标识符字符,例如具有空格的属性,如
"one two"
。
另一个引号有意义的例子是使用数字字面量作为属性键时
var object = {
1e2: 1,
100: 2
};
乍一看这可能没问题,但这段代码实际上在 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 @stylistic/quote-props: ["error", "always"]*/
var object = {
foo: "bar",
baz: 42
};
使用默认 "always"
选项时,此规则的正确代码示例
/*eslint @stylistic/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
使用 "as-needed"
选项时,此规则的不正确代码示例
/*eslint @stylistic/quote-props: ["error", "as-needed"]*/
var object = {
"a": 0,
"0": 0,
"true": 0,
"null": 0
};
使用 "as-needed"
选项时,此规则的正确代码示例
/*eslint @stylistic/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;
}
};
consistent
使用 "consistent"
选项时,此规则的不正确代码示例
/*eslint @stylistic/quote-props: ["error", "consistent"]*/
var object1 = {
foo: "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
baz: 42
};
使用 "consistent"
选项时,此规则的正确代码示例
/*eslint @stylistic/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
使用 "consistent-as-needed"
选项时,此规则的不正确代码示例
/*eslint @stylistic/quote-props: ["error", "consistent-as-needed"]*/
var object1 = {
foo: "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
'foo': 'bar',
'baz': 42
};
使用 "consistent-as-needed"
选项时,此规则的正确代码示例
/*eslint @stylistic/quote-props: ["error", "consistent-as-needed"]*/
var object1 = {
"foo": "bar",
"baz": 42,
"qux-lorem": true
};
var object2 = {
foo: 'bar',
baz: 42
};
keywords
使用 "as-needed", { "keywords": true }
选项时,此规则的额外不正确代码示例
/*eslint @stylistic/quote-props: ["error", "as-needed", { "keywords": true }]*/
var x = {
while: 1,
volatile: "foo"
};
此规则使用 "consistent-as-needed", { "keywords": true }
选项的额外错误代码示例
/*eslint @stylistic/quote-props: ["error", "consistent-as-needed", { "keywords": true }]*/
var x = {
"prop": 1,
"bar": "foo"
};
不必要的
此规则使用 "as-needed", { "unnecessary": false }
选项的额外正确代码示例
/*eslint @stylistic/quote-props: ["error", "as-needed", { "keywords": true, "unnecessary": false }]*/
var x = {
"while": 1,
"foo": "bar" // Would normally have caused a warning
};
数字
此规则使用 "as-needed", { "numbers": true }
选项的额外错误代码示例
/*eslint @stylistic/quote-props: ["error", "as-needed", { "numbers": true }]*/
var x = {
100: 1
}
何时不使用它
如果您不关心属性名称是否始终用引号括起来,并且您不针对旧版 ES3 环境,请关闭此规则。