# quote-props

需要在对象字面属性名称周围加上引号

一些该规则报告的问题可以通过 --fix 命令行选项 自动修复

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

var object1 = {
    property: true
};

var object2 = {
    "property": true
};

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

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

引号确实很重要的另一个示例是使用数字字面作为属性键时:

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

乍一看,这可能没什么问题,但实际上这段代码在 ECMAScript 5 严格模式下会引发语法错误。发生这种情况是因为 1e2100 在用作属性名称之前被强制转换为字符串。String(1e2)String(100) 恰好等于 "100",导致 "Duplicate data property in object literal not allowed in strict mode" 错误。像这样的问题可能很难调试,所以有些人更喜欢在所有属性名称周围加上引号。

# 规则详情

此规则要求在对象字面属性名称周围加上引号。

# 选项

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

字符串选项:

  • "always"(默认)需要在所有对象字面属性名称周围加上引号
  • "as-needed" 不允许在非严格要求的对象字面属性名称周围加上引号
  • "consistent" 强制执行一致的引用样式;在给定的对象中,要么所有的属性都应该被引用,或者任何属性都不应该被引用
  • 如果任何名称严格要求引号,"consistent-as-needed" 要求所有对象字面量属性名称的引号,否则不允许对象属性名称的引号

对象选项:

  • "keywords": true 需要在用作对象属性名称的语言关键字周围加上引号(仅在使用 as-neededconsistent-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
};

此规则使用默认 "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 环境,请关闭此规则。

Last Updated: 5/13/2023, 8:55:38 PM