key-spacing

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

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

🌐 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：不允许在对象字面中的键和冒号之间有空格。
  • true：要求在对象字面中的键和冒号之间至少有一个空格。
• "afterColon": true (default) | false
  • true：要求冒号和对象字面中的值之间至少有一个空格。
  • false：不允许冒号和对象字面中的值之间有空格。
• "mode": "strict" (default) | "minimum"
  • "strict"：在对象字面量中强制在冒号前后加一个空格。
  • "minimum"：在对象字面量的冒号前后强制使用一个或多个空格。
• "align": "value" | "colon"
  • "value"：强制对象字面中值的水平对齐。
  • "colon" 强制在对象字面量中水平对齐冒号和值。
• "align" 使用对象值时，在对齐对象字面量中的值时可以实现精细的间距控制。
• "singleLine" 指定了单行对象字面量的间距风格。
• "multiLine" 指定多行对象字面量的间距样式。

请注意，你可以使用顶层选项或分组选项（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 配置用于同一对象中的属性组。例如：

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 中引入。

资源

• 规则源码
• 测试源码