eslint/docs/src/rules/operator-linebreak.md

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