comma-dangle

Require or disallow trailing commas

🔧

Some problems reported by this rule are automatically fixable by the --fix command line option

This rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js.

Trailing commas in object literals are valid according to the ECMAScript 5 (and ECMAScript 3!) spec. However, IE8 (when not in IE8 document mode) and below will throw an error when it encounters trailing commas in JavaScript.

var foo = {
    bar: "baz",
    qux: "quux",
};
1
2
3
4

Trailing commas simplify adding and removing items to objects and arrays, since only the lines you are modifying must be touched. Another argument in favor of trailing commas is that it improves the clarity of diffs when an item is added or removed from an object or array:

Less clear:

 var foo = {
-    bar: "baz",
-    qux: "quux"
+    bar: "baz"
 };
1
2
3
4
5

More clear:

 var foo = {
     bar: "baz",
-    qux: "quux",
 };
1
2
3
4

Rule Details

This rule enforces consistent use of trailing commas in object and array literals.

Options

This rule has a string option or an object option:

{
    "comma-dangle": ["error", "never"],
    // or
    "comma-dangle": ["error", {
        "arrays": "never",
        "objects": "never",
        "imports": "never",
        "exports": "never",
        "functions": "never"
    }]
}
1
2
3
4
5
6
7
8
9
10
11

"never" (default) disallows trailing commas
"always" requires trailing commas
"always-multiline" requires trailing commas when the last element or property is in a different line than the closing ] or } and disallows trailing commas when the last element or property is on the same line as the closing ] or }
"only-multiline" allows (but does not require) trailing commas when the last element or property is in a different line than the closing ] or } and disallows trailing commas when the last element or property is on the same line as the closing ] or }

You can also use an object option to configure this rule for each type of syntax. Each of the following options can be set to "never", "always", "always-multiline", "only-multiline", or "ignore". The default for each option is "never" unless otherwise specified.

arrays is for array literals and array patterns of destructuring. (e.g. let [a,] = [1,];)
objects is for object literals and object patterns of destructuring. (e.g. let {a,} = {a: 1};)
imports is for import declarations of ES Modules. (e.g. import {a,} from "foo";)
exports is for export declarations of ES Modules. (e.g. export {a,};)
functions is for function declarations and function calls. (e.g. (function(a,){ })(b,);)
- functions should only be enabled when linting ECMAScript 2017 or higher.

never

Examples of incorrect code for this rule with the default "never" option:

Open in Playground

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

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

var arr = [1,2,];

foo({
  bar: "baz",
  qux: "quux",
});
1
2
3
4
5
6
7
8
9
10
11
12
13

Examples of correct code for this rule with the default "never" option:

Open in Playground

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

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

var arr = [1,2];

foo({
  bar: "baz",
  qux: "quux"
});
1
2
3
4
5
6
7
8
9
10
11
12
13

always

Examples of incorrect code for this rule with the "always" option:

Open in Playground

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

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

var arr = [1,2];

foo({
  bar: "baz",
  qux: "quux"
});
1
2
3
4
5
6
7
8
9
10
11
12
13

Examples of correct code for this rule with the "always" option:

Open in Playground

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

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

var arr = [1,2,];

foo({
  bar: "baz",
  qux: "quux",
});
1
2
3
4
5
6
7
8
9
10
11
12
13

always-multiline

Examples of incorrect code for this rule with the "always-multiline" option:

Open in Playground

/*eslint 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"
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Examples of correct code for this rule with the "always-multiline" option:

Open in Playground

/*eslint 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",
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

only-multiline

Examples of incorrect code for this rule with the "only-multiline" option:

Open in Playground

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

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

var arr = [1,2,];

var arr = [1,
    2,];

1
2
3
4
5
6
7
8
9

Examples of correct code for this rule with the "only-multiline" option:

Open in Playground

/*eslint 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"
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

functions

Examples of incorrect code for this rule with the {"functions": "never"} option:

Open in Playground

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

function foo(a, b,) {
}

foo(a, b,);
new foo(a, b,);
1
2
3
4
5
6
7

Examples of correct code for this rule with the {"functions": "never"} option:

Open in Playground

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

function foo(a, b) {
}

foo(a, b);
new foo(a, b);
1
2
3
4
5
6
7

Examples of incorrect code for this rule with the {"functions": "always"} option:

Open in Playground

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

function foo(a, b) {
}

foo(a, b);
new foo(a, b);
1
2
3
4
5
6
7

Examples of correct code for this rule with the {"functions": "always"} option:

Open in Playground

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

function foo(a, b,) {
}

foo(a, b,);
new foo(a, b,);
1
2
3
4
5
6
7

When Not To Use It

You can turn this rule off if you are not concerned with dangling commas.

Version

This rule was introduced in ESLint v0.16.0.

Resources

Edit this page