eslint/docs/src/rules/comma-dangle.md

   1 ---
   2 title: comma-dangle
   3 layout: doc
   4 rule_type: layout
   5 ---
   6
   7
   8
   9 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.
  10
  11 ```js
  12 var foo = {
  13     bar: "baz",
  14     qux: "quux",
  15 };
  16 ```
  17
  18 Trailing commas simplify adding and removing items to objects and arrays, since only the lines you are modifying must be touched.
  19 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:
  20
  21 Less clear:
  22
  23 ```diff
  24  var foo = {
  25 -    bar: "baz",
  26 -    qux: "quux"
  27 +    bar: "baz"
  28  };
  29 ```
  30
  31 More clear:
  32
  33 ```diff
  34  var foo = {
  35      bar: "baz",
  36 -    qux: "quux",
  37  };
  38 ```
  39
  40 ## Rule Details
  41
  42 This rule enforces consistent use of trailing commas in object and array literals.
  43
  44 ## Options
  45
  46 This rule has a string option or an object option:
  47
  48 ```json
  49 {
  50     "comma-dangle": ["error", "never"],
  51     // or
  52     "comma-dangle": ["error", {
  53         "arrays": "never",
  54         "objects": "never",
  55         "imports": "never",
  56         "exports": "never",
  57         "functions": "never"
  58     }]
  59 }
  60 ```
  61
  62 * `"never"` (default) disallows trailing commas
  63 * `"always"` requires trailing commas
  64 * `"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 `}`
  65 * `"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 `}`
  66
  67 You can also use an object option to configure this rule for each type of syntax.
  68 Each of the following options can be set to `"never"`, `"always"`, `"always-multiline"`, `"only-multiline"`, or `"ignore"`.
  69 The default for each option is `"never"` unless otherwise specified.
  70
  71 * `arrays` is for array literals and array patterns of destructuring. (e.g. `let [a,] = [1,];`)
  72 * `objects` is for object literals and object patterns of destructuring. (e.g. `let {a,} = {a: 1};`)
  73 * `imports` is for import declarations of ES Modules. (e.g. `import {a,} from "foo";`)
  74 * `exports` is for export declarations of ES Modules. (e.g. `export {a,};`)
  75 * `functions` is for function declarations and function calls. (e.g. `(function(a,){ })(b,);`)
  76     * `functions` should only be enabled when linting ECMAScript 2017 or higher.
  77
  78 ### never
  79
  80 Examples of **incorrect** code for this rule with the default `"never"` option:
  81
  82 :::incorrect
  83
  84 ```js
  85 /*eslint comma-dangle: ["error", "never"]*/
  86
  87 var foo = {
  88     bar: "baz",
  89     qux: "quux",
  90 };
  91
  92 var arr = [1,2,];
  93
  94 foo({
  95   bar: "baz",
  96   qux: "quux",
  97 });
  98 ```
  99
 100 :::
 101
 102 Examples of **correct** code for this rule with the default `"never"` option:
 103
 104 :::correct
 105
 106 ```js
 107 /*eslint comma-dangle: ["error", "never"]*/
 108
 109 var foo = {
 110     bar: "baz",
 111     qux: "quux"
 112 };
 113
 114 var arr = [1,2];
 115
 116 foo({
 117   bar: "baz",
 118   qux: "quux"
 119 });
 120 ```
 121
 122 :::
 123
 124 ### always
 125
 126 Examples of **incorrect** code for this rule with the `"always"` option:
 127
 128 :::incorrect
 129
 130 ```js
 131 /*eslint comma-dangle: ["error", "always"]*/
 132
 133 var foo = {
 134     bar: "baz",
 135     qux: "quux"
 136 };
 137
 138 var arr = [1,2];
 139
 140 foo({
 141   bar: "baz",
 142   qux: "quux"
 143 });
 144 ```
 145
 146 :::
 147
 148 Examples of **correct** code for this rule with the `"always"` option:
 149
 150 :::correct
 151
 152 ```js
 153 /*eslint comma-dangle: ["error", "always"]*/
 154
 155 var foo = {
 156     bar: "baz",
 157     qux: "quux",
 158 };
 159
 160 var arr = [1,2,];
 161
 162 foo({
 163   bar: "baz",
 164   qux: "quux",
 165 });
 166 ```
 167
 168 :::
 169
 170 ### always-multiline
 171
 172 Examples of **incorrect** code for this rule with the `"always-multiline"` option:
 173
 174 :::incorrect
 175
 176 ```js
 177 /*eslint comma-dangle: ["error", "always-multiline"]*/
 178
 179 var foo = {
 180     bar: "baz",
 181     qux: "quux"
 182 };
 183
 184 var foo = { bar: "baz", qux: "quux", };
 185
 186 var arr = [1,2,];
 187
 188 var arr = [1,
 189     2,];
 190
 191 var arr = [
 192     1,
 193     2
 194 ];
 195
 196 foo({
 197   bar: "baz",
 198   qux: "quux"
 199 });
 200 ```
 201
 202 :::
 203
 204 Examples of **correct** code for this rule with the `"always-multiline"` option:
 205
 206 :::correct
 207
 208 ```js
 209 /*eslint comma-dangle: ["error", "always-multiline"]*/
 210
 211 var foo = {
 212     bar: "baz",
 213     qux: "quux",
 214 };
 215
 216 var foo = {bar: "baz", qux: "quux"};
 217 var arr = [1,2];
 218
 219 var arr = [1,
 220     2];
 221
 222 var arr = [
 223     1,
 224     2,
 225 ];
 226
 227 foo({
 228   bar: "baz",
 229   qux: "quux",
 230 });
 231 ```
 232
 233 :::
 234
 235 ### only-multiline
 236
 237 Examples of **incorrect** code for this rule with the `"only-multiline"` option:
 238
 239 :::incorrect
 240
 241 ```js
 242 /*eslint comma-dangle: ["error", "only-multiline"]*/
 243
 244 var foo = { bar: "baz", qux: "quux", };
 245
 246 var arr = [1,2,];
 247
 248 var arr = [1,
 249     2,];
 250
 251 ```
 252
 253 :::
 254
 255 Examples of **correct** code for this rule with the `"only-multiline"` option:
 256
 257 :::correct
 258
 259 ```js
 260 /*eslint comma-dangle: ["error", "only-multiline"]*/
 261
 262 var foo = {
 263     bar: "baz",
 264     qux: "quux",
 265 };
 266
 267 var foo = {
 268     bar: "baz",
 269     qux: "quux"
 270 };
 271
 272 var foo = {bar: "baz", qux: "quux"};
 273 var arr = [1,2];
 274
 275 var arr = [1,
 276     2];
 277
 278 var arr = [
 279     1,
 280     2,
 281 ];
 282
 283 var arr = [
 284     1,
 285     2
 286 ];
 287
 288 foo({
 289   bar: "baz",
 290   qux: "quux",
 291 });
 292
 293 foo({
 294   bar: "baz",
 295   qux: "quux"
 296 });
 297 ```
 298
 299 :::
 300
 301 ### functions
 302
 303 Examples of **incorrect** code for this rule with the `{"functions": "never"}` option:
 304
 305 :::incorrect
 306
 307 ```js
 308 /*eslint comma-dangle: ["error", {"functions": "never"}]*/
 309
 310 function foo(a, b,) {
 311 }
 312
 313 foo(a, b,);
 314 new foo(a, b,);
 315 ```
 316
 317 :::
 318
 319 Examples of **correct** code for this rule with the `{"functions": "never"}` option:
 320
 321 :::correct
 322
 323 ```js
 324 /*eslint comma-dangle: ["error", {"functions": "never"}]*/
 325
 326 function foo(a, b) {
 327 }
 328
 329 foo(a, b);
 330 new foo(a, b);
 331 ```
 332
 333 :::
 334
 335 Examples of **incorrect** code for this rule with the `{"functions": "always"}` option:
 336
 337 :::incorrect
 338
 339 ```js
 340 /*eslint comma-dangle: ["error", {"functions": "always"}]*/
 341
 342 function foo(a, b) {
 343 }
 344
 345 foo(a, b);
 346 new foo(a, b);
 347 ```
 348
 349 :::
 350
 351 Examples of **correct** code for this rule with the `{"functions": "always"}` option:
 352
 353 :::correct
 354
 355 ```js
 356 /*eslint comma-dangle: ["error", {"functions": "always"}]*/
 357
 358 function foo(a, b,) {
 359 }
 360
 361 foo(a, b,);
 362 new foo(a, b,);
 363 ```
 364
 365 :::
 366
 367 ## When Not To Use It
 368
 369 You can turn this rule off if you are not concerned with dangling commas.