在线文档教程
Eslint
规则 | Rules

quote-props

需要引用对象字面值属性名称(quote-props)

--fix命令行上的选项可以自动修复一些被这条规则反映的问题。

对象字面值属性名称可以用两种方式定义:使用文字或使用字符串。例如,这两个对象是等价的:

var object1 = { property: true }; var object2 = { "property": true };

在许多情况下,如果您选择使用标识符而不是字符串,反之亦然,这并不重要。即便如此,您可能会决定在您的代码中执行一致的样式。

但是,有些情况下,您必须使用引号:

1. 如果您使用的是 ECMAScript 3 JavaScript引擎(如 IE8),并且希望将关键字(如if)用作属性名称。ECMAScript 5中删除了此限制。

2. 你想在属性名称中使用非标识符字符,例如拥有一个类似"one two"空间的属性。

另一个引用重要的示例是将数字文字用作属性键的情况:

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

这看起来可能一见钟情,但是这个代码事实上在 ECMAScript 5严格模式下会引发语法错误。这是因为1e2100习惯作为属性名之前被迫字符串。两者String(1e2)String(100)碰巧等于"100",这会导致“在严格模式下不允许的对象文本中的重复数据属性”错误。像这样的问题对于调试可能会很棘手,所以有些人喜欢在所有属性名称周围加引号。

规则细节

此规则需要引用对象字面值属性名称。

选项

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

字符串选项:

  • "always" (默认)需要围绕所有对象字面值属性名称进行引号

  • "as-needed" 不允许围绕非严格要求的对象字面值属性名称进行引号

  • "consistent" 强制执行一致的引用风格需要引用对象字面值属性名称

  • "consistent-as-needed" 如果任何名称严格需要引号,则需要在所有对象字面值属性名称周围加引号,否则不允许围绕对象属性名称引用引号

对象选项:

  • "keywords": true需要用作对象属性名称的语言关键字周围的引号(仅适用于使用as-neededor的情况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, "qux-lorem": true };

具有默认"always"选项的此规则的正确代码示例:

/*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

此规则的错误代码示例包含以下"as-needed"选项:

/*eslint quote-props: ["error", "as-needed"]*/ var object = { "a": 0, "0": 0, "true": 0, "null": 0 };

此规则的正确代码示例包含以下"as-needed"选项:

/*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; } };

consistent

此规则的错误代码示例包含以下"consistent"选项:

/*eslint quote-props: ["error", "consistent"]*/ var object1 = { foo: "bar", "baz": 42, "qux-lorem": true }; var object2 = { 'foo': 'bar', baz: 42 };

此规则的正确代码示例包含以下"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 };

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 };

此规则的正确代码示例包含以下"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 };

keywords

使用以下"as-needed", { "keywords": true }选项的此规则的其他不正确代码示例:

/*eslint quote-props: ["error", "as-needed", { "keywords": true }]*/ var x = { while: 1, volatile: "foo" };

使用以下"consistent-as-needed", { "keywords": true }选项的此规则的其他不正确代码示例:

/*eslint quote-props: ["error", "consistent-as-needed", { "keywords": true }]*/ var x = { "prop": 1, "bar": "foo" };

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 };

numbers

使用以下"as-needed", { "numbers": true }选项的此规则的其他不正确代码示例:

/*eslint quote-props: ["error", "as-needed", { "numbers": true }]*/ var x = { 100: 1 }

何时不使用它

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

进一步阅读

版本

这条规则是在 ESLint 0.0.6中引入的。

资源