ESLint スタイリスティック

外観

@stylistic/

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" は、1行のオブジェクトリテラルに対する間隔スタイルを指定します。
  • "multiLine" は、複数行のオブジェクトリテラルに対する間隔スタイルを指定します。

トップレベルのオプションとグループ化されたオプション (singleLine と multiLine) のどちらかを使用できますが、両方を同時に使用することはできません。

beforeColon ​

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

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

var obj = { "foo"
 
: 42 };
不正

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

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

var obj = { "foo": 42 };
正しい

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

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

var obj = { 
"foo"
: 42 };
不正

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

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

var obj = { "foo" : 42 };
正しい

afterColon ​

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

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

var obj = { "foo":
42
 };
不正

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

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

var obj = { "foo": 42 };
正しい

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

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

var obj = { "foo"
: 
42 };
不正

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

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

var obj = { "foo":42 };
正しい

mode ​

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

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

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

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

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

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

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

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

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

align ​

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

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

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

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

js
/*eslint @stylistic/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" } オプションを使用したこのルールの不正なコードの例

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

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

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

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

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

align ​

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

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

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

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

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

var obj = {
    "one"   : 1,
    "seven" : 7
}
正しい
js
/*eslint @stylistic/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 設定は、同じオブジェクト内にプロパティのグループがある場合に使用されます。例えば

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/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": { } } オプションを使用したこのルールの正しいコードの例

js
/*eslint @stylistic/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": { } } オプションを使用したこのルールの正しいコードの例

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
};
正しい

使用しない場合 ​

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

TypeScript 固有 ​

ts/key-spacing ​

MITライセンスの下でリリースされています。

Copyright OpenJS Foundation およびその他の貢献者, www.openjsf.org.
Copyright © 2023-PRESENT ESLint スタイリスティックの貢献者.