ESLint 样式

外观

@stylistic/js/

key-spacing ​

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

规则详情 ​

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

选项 ​

此规则有一个对象选项

  • "beforeColon": false (默认) | true
    • false: 禁止在对象字面量中的键和冒号之间使用空格。
    • true: 要求在对象字面量中的键和冒号之间至少使用一个空格。
  • "afterColon": true (默认) | false
    • true: 要求在对象字面量中的冒号和值之间至少使用一个空格。
    • false: 禁止在对象字面量中的冒号和值之间使用空格。
  • "mode": "strict" (默认) | "minimum"
    • "strict": 强制在对象字面量中的冒号前后使用一个空格。
    • "minimum": 强制在对象字面量中的冒号前后使用一个或多个空格。
  • "align": "value" | "colon"
    • "value": 强制在对象字面量中对齐值。
    • "colon" 强制在对象字面量中对齐冒号和值。
  • "align" 使用对象值允许在对象字面量中对齐值时进行细粒度的空格控制。
  • "singleLine" 指定单行对象字面量的空格样式。
  • "multiLine" 指定多行对象字面量的间距样式。

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

beforeColon ​

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

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

var obj = { "foo"
 
: 42 };
incorrect

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

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

var obj = { "foo": 42 };
correct

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

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

var obj = { 
"foo"
: 42 };
incorrect

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

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

var obj = { "foo" : 42 };
correct

afterColon ​

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

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

var obj = { "foo":
42
 };
incorrect

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

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

var obj = { "foo": 42 };
correct

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

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

var obj = { "foo"
: 
42 };
incorrect

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

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

var obj = { "foo":42 };
correct

mode ​

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

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

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

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

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

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

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

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

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

align ​

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

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

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

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

js
/*eslint @stylistic/js/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" };
correct

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

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

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

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

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

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

align ​

align 选项可以通过 beforeColon、afterColon、mode 和 on 选项进行额外的配置。

如果 align 被定义为一个对象，但没有提供所有参数，未定义的参数将默认为以下值

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

此规则的正确代码示例，包含示例 { "align": { } } 选项

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

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

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

align 和 multiLine ​

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

multiLine 用于任何对象字面量跨越多行的情况。align 配置用于同一对象中的一组属性。例如

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

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

  key4: 4 // uses multiLine
}

此规则的错误代码示例，包含示例 { "align": { }, "multiLine": { } } 选项

js
/*eslint @stylistic/js/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
}
incorrect

此规则的正确代码示例，包含示例 { "align": { }, "multiLine": { } } 选项

js
/*eslint @stylistic/js/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
}
correct

singleLine 和 multiLine ​

此规则的正确代码示例，包含示例 { "singleLine": { }, "multiLine": { } } 选项

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

何时不使用它 ​

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