@stylistic/js/

comma-dangle

オブジェクトリテラルの末尾のカンマは、ECMAScript 5 (および ECMAScript 3!) 仕様に従って有効です。ただし、IE8 (IE8 ドキュメントモードではない場合) およびそれ以前のバージョンでは、JavaScript で末尾のカンマを検出するとエラーがスローされます。

var foo = {
    bar: "baz",
    qux: "quux",
};

末尾のカンマは、オブジェクトや配列への項目の追加や削除を簡略化します。変更する必要があるのは変更している行のみです。末尾のカンマを支持するもう 1 つの議論は、オブジェクトまたは配列から項目を追加または削除した場合の差分の明確さが向上することです。

不明確

 var foo = {
-    bar: "baz",
-    qux: "quux"
+    bar: "baz"
 };

より明確

 var foo = {
     bar: "baz",
-    qux: "quux",
 };

ルールの詳細

このルールは、オブジェクトリテラルと配列リテラルでの末尾のカンマの一貫した使用を強制します。

オプション

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

{
    "comma-dangle": ["error", "never"],
    // or
    "comma-dangle": ["error", {
        "arrays": "never",
        "objects": "never",
        "imports": "never",
        "exports": "never",
        "functions": "never"
    }]
}

• "never" (デフォルト) は、末尾のカンマを許可しません。
• "always" は、末尾のカンマを必須にします。
• "always-multiline" は、最後の要素またはプロパティが閉じの ] または } と異なる行にある場合に末尾のカンマを必須とし、最後の要素またはプロパティが閉じの ] または } と同じ行にある場合に末尾のカンマを許可しません。
• "only-multiline" は、最後の要素またはプロパティが閉じの ] または } と異なる行にある場合に末尾のカンマを許可 (必須ではない) し、最後の要素またはプロパティが閉じの ] または } と同じ行にある場合に末尾のカンマを許可しません。

オブジェクトオプションを使用して、構文の種類ごとにこのルールを設定することもできます。次の各オプションは、"never"、"always"、"always-multiline"、"only-multiline"、または "ignore" に設定できます。各オプションのデフォルトは、特に指定がない限り "never" です。

• arrays は、配列リテラルと分割代入の配列パターン用です。(例：let [a,] = [1,];)
• objects は、オブジェクトリテラルと分割代入のオブジェクトパターン用です。(例：let {a,} = {a: 1};)
• imports は、ES モジュールのインポート宣言用です。(例：import {a,} from "foo";)
• exports は、ES モジュールのエクスポート宣言用です。(例：export {a,};)
• functions は、関数宣言と関数呼び出し用です。(例：(function(a,){ })(b,);)
  • functions は、ECMAScript 2017 以降をリントする場合にのみ有効にする必要があります。

never

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

/*eslint @stylistic/js/comma-dangle: ["error", "never"]*/

var foo = {
    bar: "baz",
    qux: "quux"
,
};

var arr = [1,2
,
];

foo({
  bar: "baz",
  qux: "quux"
,
});

不正

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

/*eslint @stylistic/js/comma-dangle: ["error", "never"]*/

var foo = {
    bar: "baz",
    qux: "quux"
};

var arr = [1,2];

foo({
  bar: "baz",
  qux: "quux"
});

正

always

"always" オプションを使用したこのルールの不正なコードの例

/*eslint @stylistic/js/comma-dangle: ["error", "always"]*/

var foo = {
    bar: "baz",
    qux: "quux"

};

var arr = [1,2
]
;

foo({
  bar: "baz",
  qux: "quux"

}
)
;

不正

"always" オプションを使用したこのルールの正しいコードの例

/*eslint @stylistic/js/comma-dangle: ["error", "always"]*/

var foo = {
    bar: "baz",
    qux: "quux",
};

var arr = [1,2,];

foo({
  bar: "baz",
  qux: "quux",
}
)
;

正

always-multiline

"always-multiline" オプションを使用したこのルールの不正なコードの例

/*eslint @stylistic/js/comma-dangle: ["error", "always-multiline"]*/

var foo = {
    bar: "baz",
    qux: "quux"

};

var foo = { bar: "baz", qux: "quux"
,
 };

var arr = [1,2
,
];

var arr = [1,
    2
,
];

var arr = [
    1,
    2

];

foo({
  bar: "baz",
  qux: "quux"

});

不正

"always-multiline" オプションを使用したこのルールの正しいコードの例

/*eslint @stylistic/js/comma-dangle: ["error", "always-multiline"]*/

var foo = {
    bar: "baz",
    qux: "quux",
};

var foo = {bar: "baz", qux: "quux"};
var arr = [1,2];

var arr = [1,
    2];

var arr = [
    1,
    2,
];

foo({
  bar: "baz",
  qux: "quux",
});

正

only-multiline

"only-multiline" オプションを使用したこのルールの不正なコードの例

/*eslint @stylistic/js/comma-dangle: ["error", "only-multiline"]*/

var foo = { bar: "baz", qux: "quux"
,
 };

var arr = [1,2
,
];

var arr = [1,
    2
,
];

不正

"only-multiline" オプションを使用したこのルールの正しいコードの例

/*eslint @stylistic/js/comma-dangle: ["error", "only-multiline"]*/

var foo = {
    bar: "baz",
    qux: "quux",
};

var foo = {
    bar: "baz",
    qux: "quux"
};

var foo = {bar: "baz", qux: "quux"};
var arr = [1,2];

var arr = [1,
    2];

var arr = [
    1,
    2,
];

var arr = [
    1,
    2
];

foo({
  bar: "baz",
  qux: "quux",
});

foo({
  bar: "baz",
  qux: "quux"
});

正

functions

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

/*eslint @stylistic/js/comma-dangle: ["error", {"functions": "never"}]*/

function foo(a, b
,
) {
}

foo(a, b
,
);
new foo(a, b
,
);

不正

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

/*eslint @stylistic/js/comma-dangle: ["error", {"functions": "never"}]*/

function foo(a, b) {
}

foo(a, b);
new foo(a, b);

正

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

/*eslint @stylistic/js/comma-dangle: ["error", {"functions": "always"}]*/

function foo(a, b
)
 {
}

foo(a, b
)
;
new foo(a, b
)
;

不正

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

/*eslint @stylistic/js/comma-dangle: ["error", {"functions": "always"}]*/

function foo(a, b,) {
}

foo(a, b,);
new foo(a, b,);

正

使用しない場合

末尾のカンマを気にしない場合は、このルールをオフにすることができます。