key-spacing

在对象字面属性中强制执行键和值之间的一致间距

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

¥This rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js.

此规则在对象字面属性中强制冒号周围的间距。它可以单独验证每个属性，也可以确保对象字面量中相邻属性的水平对齐。

¥This rule enforces spacing around the colon in object literal properties. It can verify each property individually, or it can ensure horizontal alignment of adjacent properties in an object literal.

规则详情

¥Rule Details

此规则强制对象字面属性中键和值之间的间距一致。对于长行，可以在允许空格的地方添加新行。

¥This rule enforces consistent spacing between keys and values in object literal properties. In the case of long lines, it is acceptable to add a new line wherever whitespace is allowed.

选项

¥Options

此规则有一个对象选项：

¥This rule has an object option:

• "beforeColon": false (default) | true

  • false：不允许在对象字面中的键和冒号之间有空格。

    ¥false: disallows spaces between the key and the colon in object literals.

  • true：要求在对象字面中的键和冒号之间至少有一个空格。

    ¥true: requires at least one space between the key and the colon in object literals.

• "afterColon": true (default) | false

  • true：要求冒号和对象字面中的值之间至少有一个空格。

    ¥true: requires at least one space between the colon and the value in object literals.

  • false：不允许冒号和对象字面中的值之间有空格。

    ¥false: disallows spaces between the colon and the value in object literals.

• "mode": "strict" (default) | "minimum"

  • "strict"：在对象字面量中强制在冒号前后加一个空格。

    ¥"strict": enforces exactly one space before or after colons in object literals.

  • "minimum"：在对象字面量的冒号前后强制使用一个或多个空格。

    ¥"minimum": enforces one or more spaces before or after colons in object literals.

• "align": "value" | "colon"

  • "value"：强制对象字面中值的水平对齐。

    ¥"value": enforces horizontal alignment of values in object literals.

  • "colon" 强制对象字面量中的冒号和值水平对齐。

    ¥"colon" enforces horizontal alignment of both colons and values in object literals.

• 当值在对象字面量中对齐时，具有对象值的 "align" 允许细粒度间距。

  ¥"align" with an object value allows for fine-grained spacing when values are being aligned in object literals.

• "singleLine" 指定单行对象字面量的间距样式。

  ¥"singleLine" specifies a spacing style for single-line object literals.

• "multiLine" 指定多行对象字面量的间距样式。

  ¥"multiLine" specifies a spacing style for multi-line object literals.

请注意，你可以使用顶层选项或分组选项（singleLine 和 multiLine），但不能同时使用两者。

¥Please note that you can either use the top-level options or the grouped options (singleLine and multiLine) but not both.

beforeColon

使用默认 { "beforeColon": false } 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the default { "beforeColon": false } option:

/*eslint key-spacing: ["error", { "beforeColon": false }]*/

var obj = { "foo" : 42 };
1
2
3

使用默认 { "beforeColon": false } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the default { "beforeColon": false } option:

/*eslint key-spacing: ["error", { "beforeColon": false }]*/

var obj = { "foo": 42 };
1
2
3

使用 { "beforeColon": true } 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the { "beforeColon": true } option:

/*eslint key-spacing: ["error", { "beforeColon": true }]*/

var obj = { "foo": 42 };
1
2
3

使用 { "beforeColon": true } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the { "beforeColon": true } option:

/*eslint key-spacing: ["error", { "beforeColon": true }]*/

var obj = { "foo" : 42 };
1
2
3

afterColon

使用默认 { "afterColon": true } 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the default { "afterColon": true } option:

/*eslint key-spacing: ["error", { "afterColon": true }]*/

var obj = { "foo":42 };
1
2
3

使用默认 { "afterColon": true } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the default { "afterColon": true } option:

/*eslint key-spacing: ["error", { "afterColon": true }]*/

var obj = { "foo": 42 };
1
2
3

使用 { "afterColon": false } 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the { "afterColon": false } option:

/*eslint key-spacing: ["error", { "afterColon": false }]*/

var obj = { "foo": 42 };
1
2
3

使用 { "afterColon": false } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the { "afterColon": false } option:

/*eslint key-spacing: ["error", { "afterColon": false }]*/

var obj = { "foo":42 };
1
2
3

mode

使用默认 { "mode": "strict" } 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the default { "mode": "strict" } option:

/*eslint key-spacing: ["error", { "mode": "strict" }]*/

call({
    foobar: 42,
    bat:    2 * 2
});
1
2
3
4
5
6

使用默认 { "mode": "strict" } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the default { "mode": "strict" } option:

/*eslint key-spacing: ["error", { "mode": "strict" }]*/

call({
    foobar: 42,
    bat: 2 * 2
});
1
2
3
4
5
6

使用 { "mode": "minimum" } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the { "mode": "minimum" } option:

/*eslint key-spacing: ["error", { "mode": "minimum" }]*/

call({
    foobar: 42,
    bat:    2 * 2
});
1
2
3
4
5
6

align

使用 { "align": "value" } 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the { "align": "value" } option:

/*eslint key-spacing: ["error", { "align": "value" }]*/

var obj = {
    a: value,
    bcde:  42,
    fg :   foo()
};
1
2
3
4
5
6
7

使用 { "align": "value" } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the { "align": "value" } option:

/*eslint key-spacing: ["error", { "align": "value" }]*/

var obj = {
    a:    value,
    bcde: 42,

    fg: foo(),
    h:  function() {
        return this.a;
    },
    ijkl: 'Non-consecutive lines form a new group'
};

var obj = { a: "foo", longPropertyName: "bar" };
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用 { "align": "colon" } 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the { "align": "colon" } option:

/*eslint key-spacing: ["error", { "align": "colon" }]*/

call({
    foobar: 42,
    bat:    2 * 2
});
1
2
3
4
5
6

使用 { "align": "colon" } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the { "align": "colon" } option:

/*eslint key-spacing: ["error", { "align": "colon" }]*/

call({
    foobar: 42,
    bat   : 2 * 2
});
1
2
3
4
5
6

align

align 选项可以通过 beforeColon、afterColon、mode 和 on 选项进行附加配置。

¥The align option can take additional configuration through the beforeColon, afterColon, mode, and on options.

如果将 align 定义为对象，但未提供所有参数，则未定义的参数将默认为以下内容：

¥If align is defined as an object, but not all of the parameters are provided, undefined parameters will default to the following:

// Defaults
align: {
    "beforeColon": false,
    "afterColon": true,
    "on": "colon",
    "mode": "strict"
}
1
2
3
4
5
6
7

此规则的正确代码示例以及示例 { "align": { } } 选项：

¥Examples of correct code for this rule with sample { "align": { } } options:

/*eslint key-spacing: ["error", {
    "align": {
        "beforeColon": true,
        "afterColon": true,
        "on": "colon"
    }
}]*/

var obj = {
    "one"   : 1,
    "seven" : 7
}
1
2
3
4
5
6
7
8
9
10
11
12

/*eslint key-spacing: ["error", {
    "align": {
        "beforeColon": false,
        "afterColon": false,
        "on": "value"
    }
}]*/

var obj = {
    "one":  1,
    "seven":7
}
1
2
3
4
5
6
7
8
9
10
11
12

align 和 multiLine

¥align and multiLine

multiLine 和 align 选项可以不同，这允许对文件的 key-spacing 进行微调控制。如果 align 配置为对象，则 align 将不会继承 multiLine。

¥The multiLine and align options can differ, which allows for fine-tuned control over the key-spacing of your files. align will not inherit from multiLine if align is configured as an object.

每当对象字面量跨越多行时，都会使用 multiLine。当同一对象中有一组属性时，使用 align 配置。例如：

¥multiLine is used any time an object literal spans multiple lines. The align configuration is used when there is a group of properties in the same object. For example:

var myObj = {
  key1: 1, // uses multiLine

  key2: 2, // uses align (when defined)
  key3: 3, // uses align (when defined)

  key4: 4 // uses multiLine
}

1
2
3
4
5
6
7
8
9

此规则的错误代码示例以及示例 { "align": { }, "multiLine": { } } 选项：

¥Examples of incorrect code for this rule with sample { "align": { }, "multiLine": { } } options:

/*eslint key-spacing: ["error", {
    "multiLine": {
        "beforeColon": false,
        "afterColon":true
    },
    "align": {
        "beforeColon": true,
        "afterColon": true,
        "on": "colon"
    }
}]*/

var obj = {
    "myObjectFunction": function() {
        // Do something
    },
    "one"             : 1,
    "seven"           : 7
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

此规则的正确代码示例以及示例 { "align": { }, "multiLine": { } } 选项：

¥Examples of correct code for this rule with sample { "align": { }, "multiLine": { } } options:

/*eslint key-spacing: ["error", {
    "multiLine": {
        "beforeColon": false,
        "afterColon": true

    },
    "align": {
        "beforeColon": true,
        "afterColon": true,
        "on": "colon"
    }
}]*/

var obj = {
    "myObjectFunction": function() {
        // Do something
        //
    }, // These are two separate groups, so no alignment between `myObjectFunction` and `one`
    "one"   : 1,
    "seven" : 7 // `one` and `seven` are in their own group, and therefore aligned
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

singleLine 和 multiLine

¥singleLine and multiLine

此规则的正确代码示例以及示例 { "singleLine": { }, "multiLine": { } } 选项：

¥Examples of correct code for this rule with sample { "singleLine": { }, "multiLine": { } } options:

/*eslint "key-spacing": [2, {
    "singleLine": {
        "beforeColon": false,
        "afterColon": true
    },
    "multiLine": {
        "beforeColon": true,
        "afterColon": true,
        "align": "colon"
    }
}]*/
var obj = { one: 1, "two": 2, three: 3 };
var obj2 = {
    "two" : 2,
    three : 3
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

何时不使用

¥When Not To Use It

如果你有另一个可能与可用选项不一致的属性间距约定，或者如果你希望同时允许多个样式，你可以安全地禁用此规则。

¥If you have another convention for property spacing that might not be consistent with the available options, or if you want to permit multiple styles concurrently you can safely disable this rule.

版本

此规则是在 ESLint v0.9.0 中引入。

资源

• 规则源码
• 测试源码