comma-dangle

Require or disallow trailing commas

comma-dangle

Trailing commas in object and array literals are valid in ES5 (and ES3). This rule enforces consistent use.

Rule Type: Layout
Fixable: Yes (automatically fixable)
Deprecated: Consider using Prettier

Why This Rule Exists

Trailing commas have advantages:

Cleaner diffs:

// Without trailing comma
var foo = {
    bar: "baz",
-   qux: "quux"
+   qux: "quux",
+   added: "new"
};

// With trailing comma
var foo = {
    bar: "baz",
    qux: "quux",
+   added: "new",
};

Easier refactoring:

• Add/remove items by editing one line
• Less chance of syntax errors

Rule Details

This rule enforces consistent trailing comma usage.

Options

String Option

• "never" (default) - Disallow trailing commas
• "always" - Require trailing commas
• "always-multiline" - Require when last element is on different line
• "only-multiline" - Allow but don’t require when multiline

Object Option

Configure for each syntax type:

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

Examples

"never"

Incorrect:

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

var arr = [1,2,];

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

Correct:

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

var arr = [1,2];

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

"always"

Incorrect:

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

var arr = [1,2];

Correct:

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

var arr = [1,2,];

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

"always-multiline"

Most popular option - requires trailing commas for multiline, forbids for single-line.

Incorrect:

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

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

var arr = [1,2,];

var arr = [
    1,
    2
];

Correct:

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

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

var arr = [1,2];

var arr = [
    1,
    2,
];

"only-multiline"

Allow but don’t require trailing commas when multiline.

Incorrect:

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

Correct:

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

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

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

Functions

Function trailing commas require ES2017+.

Incorrect with {"functions": "never"}:

function foo(a, b,) {
}

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

Correct:

function foo(a, b) {
}

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

Configuration Examples

// Never use trailing commas
{
  "rules": {
    "comma-dangle": ["error", "never"]
  }
}

// Always use trailing commas
{
  "rules": {
    "comma-dangle": ["error", "always"]
  }
}

// Only for multiline (recommended)
{
  "rules": {
    "comma-dangle": ["error", "always-multiline"]
  }
}

// Different rules per type
{
  "rules": {
    "comma-dangle": ["error", {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "never"
    }]
  }
}

When Not to Use It

Most teams now use Prettier for formatting. If you use Prettier, disable this rule.

Disable if:

• You use Prettier or another formatter
• You need IE8 compatibility (very rare now)
• Your team hasn’t agreed on trailing comma style

Related Rules

• comma-spacing
• comma-style