Skip to main content

​
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