eslint/docs/rules/operator-linebreak.md

   1 # enforce consistent linebreak style for operators (operator-linebreak)
   2
   3 When a statement is too long to fit on a single line, line breaks are generally inserted next to the operators separating expressions. The first style coming to mind would be to place the operator at the end of the line, following the English punctuation rules.
   4
   5 ```js
   6 var fullHeight = borderTop +
   7                  innerHeight +
   8                  borderBottom;
   9 ```
  10
  11 Some developers find that placing operators at the beginning of the line makes the code more readable.
  12
  13 ```js
  14 var fullHeight = borderTop
  15                + innerHeight
  16                + borderBottom;
  17 ```
  18
  19 ## Rule Details
  20
  21 This rule enforces a consistent linebreak style for operators.
  22
  23 ## Options
  24
  25 This rule has two options, a string option and an object option.
  26
  27 String option:
  28
  29 * `"after"` requires linebreaks to be placed after the operator
  30 * `"before"` requires linebreaks to be placed before the operator
  31 * `"none"` disallows linebreaks on either side of the operator
  32
  33 Object option:
  34
  35 * `"overrides"` overrides the global setting for specified operators
  36
  37 The default configuration is `"after", { "overrides": { "?": "before", ":": "before" } }`
  38
  39 ### after
  40
  41 Examples of **incorrect** code for this rule with the `"after"` option:
  42
  43 ```js
  44 /*eslint operator-linebreak: ["error", "after"]*/
  45
  46 foo = 1
  47 +
  48 2;
  49
  50 foo = 1
  51     + 2;
  52
  53 foo
  54     = 5;
  55
  56 if (someCondition
  57     || otherCondition) {
  58 }
  59
  60 answer = everything
  61   ? 42
  62   : foo;
  63
  64 class Foo {
  65     a
  66         = 1;
  67     [b]
  68         = 2;
  69     [c
  70     ]
  71         = 3;
  72 }
  73 ```
  74
  75 Examples of **correct** code for this rule with the `"after"` option:
  76
  77 ```js
  78 /*eslint operator-linebreak: ["error", "after"]*/
  79
  80 foo = 1 + 2;
  81
  82 foo = 1 +
  83       2;
  84
  85 foo =
  86     5;
  87
  88 if (someCondition ||
  89     otherCondition) {
  90 }
  91
  92 answer = everything ?
  93   42 :
  94   foo;
  95
  96 class Foo {
  97     a =
  98         1;
  99     [b] =
 100         2;
 101     [c
 102     ] =
 103         3;
 104     d = 4;
 105 }
 106 ```
 107
 108 ### before
 109
 110 Examples of **incorrect** code for this rule with the `"before"` option:
 111
 112 ```js
 113 /*eslint operator-linebreak: ["error", "before"]*/
 114
 115 foo = 1 +
 116       2;
 117
 118 foo =
 119     5;
 120
 121 if (someCondition ||
 122     otherCondition) {
 123 }
 124
 125 answer = everything ?
 126   42 :
 127   foo;
 128
 129 class Foo {
 130     a =
 131         1;
 132     [b] =
 133         2;
 134     [c
 135     ] =
 136         3;
 137 }
 138 ```
 139
 140 Examples of **correct** code for this rule with the `"before"` option:
 141
 142 ```js
 143 /*eslint operator-linebreak: ["error", "before"]*/
 144
 145 foo = 1 + 2;
 146
 147 foo = 1
 148     + 2;
 149
 150 foo
 151     = 5;
 152
 153 if (someCondition
 154     || otherCondition) {
 155 }
 156
 157 answer = everything
 158   ? 42
 159   : foo;
 160
 161 class Foo {
 162     a
 163         = 1;
 164     [b]
 165         = 2;
 166     [c
 167     ]
 168         = 3;
 169     d = 4;
 170 }
 171 ```
 172
 173 ### none
 174
 175 Examples of **incorrect** code for this rule with the `"none"` option:
 176
 177 ```js
 178 /*eslint operator-linebreak: ["error", "none"]*/
 179
 180 foo = 1 +
 181       2;
 182
 183 foo = 1
 184     + 2;
 185
 186 if (someCondition ||
 187     otherCondition) {
 188 }
 189
 190 if (someCondition
 191     || otherCondition) {
 192 }
 193
 194 answer = everything
 195   ? 42
 196   : foo;
 197
 198 answer = everything ?
 199   42 :
 200   foo;
 201
 202 class Foo {
 203     a =
 204         1;
 205     [b] =
 206         2;
 207     [c
 208     ] =
 209         3;
 210     d
 211         = 4;
 212     [e]
 213         = 5;
 214     [f
 215     ]
 216         = 6;
 217 }
 218 ```
 219
 220 Examples of **correct** code for this rule with the `"none"` option:
 221
 222 ```js
 223 /*eslint operator-linebreak: ["error", "none"]*/
 224
 225 foo = 1 + 2;
 226
 227 foo = 5;
 228
 229 if (someCondition || otherCondition) {
 230 }
 231
 232 answer = everything ? 42 : foo;
 233
 234 class Foo {
 235     a = 1;
 236     [b] = 2;
 237     [c
 238     ] = 3;
 239     d = 4;
 240     [e] = 5;
 241     [f
 242     ] = 6;
 243 }
 244 ```
 245
 246 ### overrides
 247
 248 Examples of additional **incorrect** code for this rule with the `{ "overrides": { "+=": "before" } }` option:
 249
 250 ```js
 251 /*eslint operator-linebreak: ["error", "after", { "overrides": { "+=": "before" } }]*/
 252
 253 var thing = 'thing';
 254 thing +=
 255   's';
 256 ```
 257
 258 Examples of additional **correct** code for this rule with the `{ "overrides": { "+=": "before" } }` option:
 259
 260 ```js
 261 /*eslint operator-linebreak: ["error", "after", { "overrides": { "+=": "before" } }]*/
 262
 263 var thing = 'thing';
 264 thing
 265   += 's';
 266 ```
 267
 268 Examples of additional **correct** code for this rule with the `{ "overrides": { "?": "ignore", ":": "ignore" } }` option:
 269
 270 ```js
 271 /*eslint operator-linebreak: ["error", "after", { "overrides": { "?": "ignore", ":": "ignore" } }]*/
 272
 273 answer = everything ?
 274   42
 275   : foo;
 276
 277 answer = everything
 278   ?
 279   42
 280   :
 281   foo;
 282 ```
 283
 284 Examples of **incorrect** code for this rule with the default `"after", { "overrides": { "?": "before", ":": "before" } }` option:
 285
 286 ```js
 287 /*eslint operator-linebreak: ["error", "after", { "overrides": { "?": "before", ":": "before" } }]*/
 288
 289 foo = 1
 290 +
 291 2;
 292
 293 foo = 1
 294     + 2;
 295
 296 foo
 297     = 5;
 298
 299 if (someCondition
 300     || otherCondition) {
 301 }
 302
 303 answer = everything ?
 304   42 :
 305   foo;
 306 ```
 307
 308 Examples of **correct** code for this rule with the default `"after", { "overrides": { "?": "before", ":": "before" } }` option:
 309
 310 ```js
 311 /*eslint operator-linebreak: ["error", "after", { "overrides": { "?": "before", ":": "before" } }]*/
 312
 313 foo = 1 + 2;
 314
 315 foo = 1 +
 316       2;
 317
 318 foo =
 319     5;
 320
 321 if (someCondition ||
 322     otherCondition) {
 323 }
 324
 325 answer = everything
 326   ? 42
 327   : foo;
 328 ```
 329
 330 ## When Not To Use It
 331
 332 If your project will not be using a common operator line break style, turn this rule off.
 333
 334 ## Related Rules
 335
 336 * [comma-style](comma-style.md)