@stylistic/

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宣言用です。(例：`import {a,} from "foo";`)
• exports は、ESモジュールのexport宣言用です。(例：`export {a,};`)
• functions は、関数宣言と関数呼び出し用です。(例：`(function(a,){ })(b,);`)
  • functions は、ECMAScript 2017 以降をリントする場合にのみ有効にする必要があります。

never

デフォルトの`"never"`オプションでこのルールに**違反**しているコードの例

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

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

var arr = [1,2
,
];

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

違反

デフォルトの`"never"`オプションでこのルールに**準拠**しているコードの例

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

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

var arr = [1,2];

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

準拠

always

`"always"`オプションでこのルールに**違反**しているコードの例

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

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

};

var arr = [1,2
]
;

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

}
)
;

違反

`"always"`オプションでこのルールに**準拠**しているコードの例

/*eslint @stylistic/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/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/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/comma-dangle: ["error", "only-multiline"]*/

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

var arr = [1,2
,
];

var arr = [1,
    2
,
];

違反

`"only-multiline"`オプションでこのルールに**準拠**しているコードの例

/*eslint @stylistic/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/comma-dangle: ["error", {"functions": "never"}]*/

function foo(a, b
,
) {
}

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

違反

`{"functions": "never"}`オプションでこのルールに**準拠**しているコードの例

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

function foo(a, b) {
}

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

準拠

`{"functions": "always"}`オプションでこのルールに**違反**しているコードの例

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

function foo(a, b
)
 {
}

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

違反

`{"functions": "always"}`オプションでこのルールに**準拠**しているコードの例

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

function foo(a, b,) {
}

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

準拠

使用しない場合

末尾カンマが問題にならない場合は、このルールを無効にすることができます。

TypeScript固有

ts/comma-dangle

オプション

`js/comma-dangle`ルールでサポートされているオプションに加えて、このルールは次のオプションを追加します。

• `enums` は、列挙型の末尾カンマ用です。(例：`enum Foo = {Bar,}`)
• `generics` は、ジェネリック型の末尾カンマ用です。(例：`function foo() {}`)
• `tuples` は、タプルの末尾カンマ用です。(例：`type Foo = [string,]`)