@stylistic/js/

comma-spacing

カンマの周りのスペースは、項目のリストの可読性を向上させます。言語のスタイルガイドのほとんどは、カンマの後にスペースを追加し、前には追加しないことを規定していますが、プロジェクトの好みによって主観的です。

var foo = 1, bar = 2;
var foo = 1 ,bar = 2;

ルールの詳細

このルールは、変数宣言、配列リテラル、オブジェクトリテラル、関数パラメータ、およびシーケンスにおけるカンマの前後のスペースの一貫性を強制します。

このルールは、次のいずれの場合にも適用されません。

• 2つのカンマの間
• 開始ブラケット [ とカンマの間（array-bracket-spacing ルールとの競合を避けるため）
• カンマと閉じブラケット ] の間（array-bracket-spacing ルールとの競合を避けるため）
• カンマと閉じ中括弧 } の間（object-curly-spacing ルールとの競合を避けるため）
• カンマと閉じ括弧 ) の間（space-in-parens ルールとの競合を避けるため）

オプション

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

• "before": false (デフォルト) は、カンマの前のスペースを許可しません。
• "before": true は、カンマの前に1つ以上のスペースを要求します。
• "after": true (デフォルト) は、カンマの後に1つ以上のスペースを要求します。
• "after": false は、カンマの後のスペースを許可しません。

後

デフォルトの { "before": false, "after": true } オプションを使用した場合の、このルールに対する不正なコードの例

/*eslint @stylistic/js/comma-spacing: ["error", { "before": false, "after": true }]*/

var foo = 1 
,
bar = 2;
var arr = [1 
,
 2];
var obj = {"foo": "bar" 
,
"baz": "qur"};
foo(a 
,
b);
new Foo(a 
,
b);
function baz(a 
,
b){}
a 
,
b

不正

デフォルトの { "before": false, "after": true } オプションを使用した場合の、このルールに対する正しいコードの例

/*eslint @stylistic/js/comma-spacing: ["error", { "before": false, "after": true }]*/

var foo = 1, bar = 2
    , baz = 3;
var arr = [1, 2];
var arr = [1,, 3]
var obj = {"foo": "bar", "baz": "qur"};
foo(a, b);
new Foo(a, b);
function qur(a, b){}
a, b

正しい

デフォルトの { "before": false, "after": true } オプションを使用した場合の、このルールに対する追加の正しいコードの例

/*eslint @stylistic/js/comma-spacing: ["error", { "before": false, "after": true }]*/

// this rule does not enforce spacing between two commas
var arr = [
    ,,
    , ,
];

// this rule does not enforce spacing after `[` and before `]`
var arr = [,];
var arr = [ , ];
var arr = [a, b,];
[,] = arr;
[ , ] = arr;
[a, b,] = arr;

// this rule does not enforce spacing before `}`
var obj = {x, y,};
var {z, q,} = obj;
import {foo, bar,} from "mod";

// this rule does not enforce spacing before `)`
foo(a, b,)

正しい

前

{ "before": true, "after": false } オプションを使用した場合の、このルールに対する不正なコードの例

/*eslint @stylistic/js/comma-spacing: ["error", { "before": true, "after": false }]*/

var foo = 1
,
 bar = 2;
var arr = [1 
,
 2];
var obj = {"foo": "bar"
,
 "baz": "qur"};
new Foo(a
,
b);
function baz(a
,
b){}
a
,
 b

不正

{ "before": true, "after": false } オプションを使用した場合の、このルールに対する正しいコードの例

/*eslint @stylistic/js/comma-spacing: ["error", { "before": true, "after": false }]*/

var foo = 1 ,bar = 2 ,
    baz = true;
var arr = [1 ,2];
var arr = [1 ,,3]
var obj = {"foo": "bar" ,"baz": "qur"};
foo(a ,b);
new Foo(a ,b);
function qur(a ,b){}
a ,b

正しい

使用しない場合

プロジェクトでカンマの間隔を一定のパターンに従わない場合は、このルールをオフにしてください。