# key-spacing

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

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

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

# 规则详情

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

# 选项

此规则有一个对象选项:

  • "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" 指定多行对象字面的间距样式。

请注意,您可以使用顶级选项或分组选项(singleLinemultiLine),但不能同时使用两者。

# beforeColon

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

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

var obj = { "foo" : 42 };

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

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

var obj = { "foo": 42 };

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

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

var obj = { "foo": 42 };

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

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

var obj = { "foo" : 42 };

# afterColon

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

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

var obj = { "foo":42 };

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

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

var obj = { "foo": 42 };

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

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

var obj = { "foo": 42 };

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

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

var obj = { "foo":42 };

# mode

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

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

call({
    foobar: 42,
    bat:    2 * 2
});

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

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

call({
    foobar: 42,
    bat: 2 * 2
});

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

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

call({
    foobar: 42,
    bat:    2 * 2
});

# align

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

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

var obj = {
    a: value,
    bcde:  42,
    fg :   foo()
};

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

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

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

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

call({
    foobar: 42,
    bat:    2 * 2
});

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

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

call({
    foobar: 42,
    bat   : 2 * 2
});

# align

align 选项可以通过 beforeColonafterColonmodeon 选项进行附加配置。

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

// Defaults
align: {
    "beforeColon": false,
    "afterColon": true,
    "on": "colon",
    "mode": "strict"
}

带有示例 { "align": { } } 选项的此规则的正确代码示例:

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

var obj = {
    "one"   : 1,
    "seven" : 7
}
/*eslint key-spacing: ["error", {
    "align": {
        "beforeColon": false,
        "afterColon": false,
        "on": "value"
    }
}]*/

var obj = {
    "one":  1,
    "seven":7
}

# align 和 multiLine

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

multiLine 用于任何时候对象字面量跨越多行。当同一对象中有一组属性时,使用 align 配置。例如:

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

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

  key4: 4 // uses multiLine
}

带有示例 { "align": { }, "multiLine": { } } 选项的此规则的错误代码示例:

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

带有示例 { "align": { }, "multiLine": { } } 选项的此规则的正确代码示例:

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

# singleLine 和 multiLine

带有示例 { "singleLine": { }, "multiLine": { } } 选项的此规则的正确代码示例:

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

# 何时不使用

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

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