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

   1 ---
   2 title: comma-spacing
   3 rule_type: layout
   4 related_rules:
   5 - array-bracket-spacing
   6 - comma-style
   7 - object-curly-spacing
   8 - space-in-brackets
   9 - space-in-parens
  10 - space-infix-ops
  11 - space-after-keywords
  12 - space-unary-ops
  13 - space-return-throw-case
  14 further_reading:
  15 - https://www.crockford.com/code.html
  16 - https://dojotoolkit.org/reference-guide/1.9/developer/styleguide.html
  17 ---
  18
  19
  20
  21 Spacing around commas improves readability of a list of items. Although most of the style guidelines for languages prescribe adding a space after a comma and not before it, it is subjective to the preferences of a project.
  22
  23 ```js
  24 var foo = 1, bar = 2;
  25 var foo = 1 ,bar = 2;
  26 ```
  27
  28 ## Rule Details
  29
  30 This rule enforces consistent spacing before and after commas in variable declarations, array literals, object literals, function parameters, and sequences.
  31
  32 This rule does not apply in either of the following cases:
  33
  34 * between two commas
  35 * between opening bracket `[` and comma, to avoid conflicts with the [`array-bracket-spacing`](array-bracket-spacing) rule
  36 * between comma and closing bracket `]`, to avoid conflicts with the [`array-bracket-spacing`](array-bracket-spacing) rule
  37 * between comma and closing brace `}`, to avoid conflicts with the [`object-curly-spacing`](object-curly-spacing) rule
  38 * between comma and closing parentheses `)`, to avoid conflicts with the [`space-in-parens`](space-in-parens) rule
  39
  40 ## Options
  41
  42 This rule has an object option:
  43
  44 * `"before": false` (default) disallows spaces before commas
  45 * `"before": true` requires one or more spaces before commas
  46 * `"after": true` (default) requires one or more spaces after commas
  47 * `"after": false` disallows spaces after commas
  48
  49 ### after
  50
  51 Examples of **incorrect** code for this rule with the default `{ "before": false, "after": true }` options:
  52
  53 :::incorrect
  54
  55 ```js
  56 /*eslint comma-spacing: ["error", { "before": false, "after": true }]*/
  57
  58 var foo = 1 ,bar = 2;
  59 var arr = [1 , 2];
  60 var obj = {"foo": "bar" ,"baz": "qur"};
  61 foo(a ,b);
  62 new Foo(a ,b);
  63 function foo(a ,b){}
  64 a ,b
  65 ```
  66
  67 :::
  68
  69 Examples of **correct** code for this rule with the default `{ "before": false, "after": true }` options:
  70
  71 :::correct
  72
  73 ```js
  74 /*eslint comma-spacing: ["error", { "before": false, "after": true }]*/
  75
  76 var foo = 1, bar = 2
  77     , baz = 3;
  78 var arr = [1, 2];
  79 var arr = [1,, 3]
  80 var obj = {"foo": "bar", "baz": "qur"};
  81 foo(a, b);
  82 new Foo(a, b);
  83 function foo(a, b){}
  84 a, b
  85 ```
  86
  87 :::
  88
  89 Additional examples of **correct** code for this rule with the default `{ "before": false, "after": true }` options:
  90
  91 :::correct
  92
  93 ```js
  94 /*eslint comma-spacing: ["error", { "before": false, "after": true }]*/
  95
  96 // this rule does not enforce spacing between two commas
  97 var arr = [
  98     ,,
  99     , ,
 100 ];
 101
 102 // this rule does not enforce spacing after `[` and before `]`
 103 var arr = [,];
 104 var arr = [ , ];
 105 var arr = [a, b,];
 106 [,] = arr;
 107 [ , ] = arr;
 108 [a, b,] = arr;
 109
 110 // this rule does not enforce spacing before `}`
 111 var obj = {x, y,};
 112 var {z, q,} = obj;
 113 import {foo, bar,} from "mod";
 114
 115 // this rule does not enforce spacing before `)`
 116 foo(a, b,)
 117 ```
 118
 119 :::
 120
 121 ### before
 122
 123 Examples of **incorrect** code for this rule with the `{ "before": true, "after": false }` options:
 124
 125 :::incorrect
 126
 127 ```js
 128 /*eslint comma-spacing: ["error", { "before": true, "after": false }]*/
 129
 130 var foo = 1, bar = 2;
 131 var arr = [1 , 2];
 132 var obj = {"foo": "bar", "baz": "qur"};
 133 new Foo(a,b);
 134 function foo(a,b){}
 135 a, b
 136 ```
 137
 138 :::
 139
 140 Examples of **correct** code for this rule with the `{ "before": true, "after": false }` options:
 141
 142 :::correct
 143
 144 ```js
 145 /*eslint comma-spacing: ["error", { "before": true, "after": false }]*/
 146
 147 var foo = 1 ,bar = 2 ,
 148     baz = true;
 149 var arr = [1 ,2];
 150 var arr = [1 ,,3]
 151 var obj = {"foo": "bar" ,"baz": "qur"};
 152 foo(a ,b);
 153 new Foo(a ,b);
 154 function foo(a ,b){}
 155 a ,b
 156 ```
 157
 158 :::
 159
 160 ## When Not To Use It
 161
 162 If your project will not be following a consistent comma-spacing pattern, turn this rule off.