@stylistic/js/

key-spacing

このルールは、オブジェクトリテラルのプロパティのコロン周辺のスペースを強制します。各プロパティを個別に検証したり、オブジェクトリテラル内の隣接するプロパティの水平方向の配置を保証したりできます。

ルールの詳細

このルールは、オブジェクトリテラルのプロパティのキーと値の間の一貫したスペースを強制します。長い行の場合、空白が許可されている場所であればどこでも改行を追加できます。

オプション

このルールにはオブジェクトオプションがあります

• "beforeColon": false (デフォルト) | true
  • false: オブジェクトリテラルのキーとコロンの間にスペースを許可しません。
  • true: オブジェクトリテラルのキーとコロンの間に少なくとも1つのスペースが必要です。
• "afterColon": true (デフォルト) | false
  • true: オブジェクトリテラルのコロンと値の間に少なくとも1つのスペースが必要です。
  • false: オブジェクトリテラルのコロンと値の間にスペースを許可しません。
• "mode": "strict" (デフォルト) | "minimum"
  • "strict": オブジェクトリテラル内のコロンの前後に厳密に1つのスペースを強制します。
  • "minimum": オブジェクトリテラル内のコロンの前後に1つ以上のスペースを強制します。
• "align": "value" | "colon"
  • "value": オブジェクトリテラルの値の水平方向の配置を強制します。
  • "colon": オブジェクトリテラルのコロンと値の両方の水平方向の配置を強制します。
• オブジェクト値を伴う"align"は、オブジェクトリテラルで値を整列させる場合に、きめ細かいスペース設定を可能にします。
• "singleLine"は、単一行のオブジェクトリテラルのスペーススタイルを指定します。
• "multiLine"は、複数行のオブジェクトリテラルのスペーススタイルを指定します。

トップレベルのオプションまたはグループ化されたオプション（singleLineとmultiLine）のいずれかを使用できますが、両方を同時に使用することはできませんのでご注意ください。

beforeColon

デフォルトの{ "beforeColon": false }オプションを使用したこのルールの不正なコードの例

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

var obj = { "foo"
 
: 42 };

不正

デフォルトの{ "beforeColon": false }オプションを使用したこのルールの正しいコードの例

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

var obj = { "foo": 42 };

正しい

{ "beforeColon": true }オプションを使用したこのルールの不正なコードの例

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

var obj = { 
"foo"
: 42 };

不正

{ "beforeColon": true }オプションを使用したこのルールの正しいコードの例

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

var obj = { "foo" : 42 };

正しい

afterColon

デフォルトの{ "afterColon": true }オプションを使用したこのルールの不正なコードの例

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

var obj = { "foo":
42
 };

不正

デフォルトの{ "afterColon": true }オプションを使用したこのルールの正しいコードの例

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

var obj = { "foo": 42 };

正しい

{ "afterColon": false }オプションを使用したこのルールの不正なコードの例

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

var obj = { "foo"
: 
42 };

不正

{ "afterColon": false }オプションを使用したこのルールの正しいコードの例

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

var obj = { "foo":42 };

正しい

mode

デフォルトの{ "mode": "strict" }オプションを使用したこのルールの不正なコードの例

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

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

不正

デフォルトの{ "mode": "strict" }オプションを使用したこのルールの正しいコードの例

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

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

正しい

{ "mode": "minimum" }オプションを使用したこのルールの正しいコードの例

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

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

正しい

align

{ "align": "value" }オプションを使用したこのルールの不正なコードの例

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

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

不正

{ "align": "value" }オプションを使用したこのルールの正しいコードの例

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

正しい

{ "align": "colon" }オプションを使用したこのルールの不正なコードの例

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

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

不正

{ "align": "colon" }オプションを使用したこのルールの正しいコードの例

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

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

正しい

align

alignオプションは、beforeColon、afterColon、mode、およびonオプションを通じて追加の設定を受け入れることができます。

alignがオブジェクトとして定義されていても、すべてのパラメータが提供されていない場合、未定義のパラメータは以下にデフォルト設定されます

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

サンプルの{ "align": { } }オプションを使用したこのルールの正しいコードの例

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

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

正しい

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

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

正しい

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
}

サンプルの{ "align": { }, "multiLine": { } }オプションを使用したこのルールの不正なコードの例

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

不正

サンプルの{ "align": { }, "multiLine": { } }オプションを使用したこのルールの正しいコードの例

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

正しい

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

正しい

使用しない場合

利用可能なオプションと一致しない可能性のあるプロパティの間隔に関する別の規則がある場合、または複数のスタイルを同時に許可したい場合は、このルールを安全に無効にできます。