key-spacing

強制物件實體屬性中鍵和值之間的一致間距

此規則已在 ESLint v8.53.0 中棄用。請使用 @stylistic/eslint-plugin-js 中的對應規則。

此規則強制物件實體屬性中冒號周圍的間距。它可以個別驗證每個屬性，或者可以確保物件實體中相鄰屬性的水平對齊。

規則詳情

此規則強制物件實體屬性中鍵和值之間的一致間距。對於長行，可以在允許空白的任何位置新增新行。

選項

此規則具有物件選項

• "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 } 選項的不正確程式碼範例

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

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

對於此規則，使用預設 { "beforeColon": false } 選項的正確程式碼範例

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

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

對於此規則，使用 { "beforeColon": true } 選項的不正確程式碼範例

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

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

對於此規則，使用 { "beforeColon": true } 選項的正確程式碼範例

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

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

afterColon

對於此規則，使用預設 { "afterColon": true } 選項的不正確程式碼範例

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

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

對於此規則，使用預設 { "afterColon": true } 選項的正確程式碼範例

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

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

對於此規則，使用 { "afterColon": false } 選項的不正確程式碼範例

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

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

對於此規則，使用 { "afterColon": false } 選項的正確程式碼範例

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

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

mode

對於此規則，使用預設 { "mode": "strict" } 選項的不正確程式碼範例

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

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

對於此規則，使用預設 { "mode": "strict" } 選項的正確程式碼範例

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

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

對於此規則，使用 { "mode": "minimum" } 選項的正確程式碼範例

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

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

align

對於此規則，使用 { "align": "value" } 選項的不正確程式碼範例

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

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

對於此規則，使用 { "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" };
1
2
3
4
5
6
7
8
9
10
11
12
13
14

對於此規則，使用 { "align": "colon" } 選項的不正確程式碼範例

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

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

對於此規則，使用 { "align": "colon" } 選項的正確程式碼範例

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

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

align

align 選項可以透過 beforeColon、afterColon、mode 和 on 選項進行額外設定。

如果 align 定義為物件，但並非所有參數都已提供，則未定義的參數將預設為以下內容

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

對於此規則，使用範例 { "align": { } } 選項的正確程式碼範例

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

multiLine 和 align 選項可以不同，這允許對檔案的 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
}

1
2
3
4
5
6
7
8
9

對於此規則，使用範例 { "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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

對於此規則，使用範例 { "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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

何時不使用它

如果您有其他屬性間距慣例可能與可用的選項不一致，或者您想要同時允許多種樣式，您可以安全地停用此規則。

版本

此規則是在 ESLint v0.9.0 中引入的。

資源

• 規則來源
• 測試來源