Rule Proposal: `key-linebreak` enforce linebreaks after object key

key-linebreak

Please describe what the rule should do: This rule enforces consistency in linebreaks after an object key.

For context: we’ve come across places in our code where linebreaks occur after object keys, usually as a result of using an autoformatting tool or to avoid violating max-len.

We would like to make a decision on allowing this code style and it would be great if we could enforce consistent behavior using eslint.

Options: This rule has a string option:

• "beside": (default) requires that an object key has a continuation of the value on the same line
• "below": requires that an object key is followed by a linebreak before the value

What category of rule is this? (place an “X” next to just one item)

• Enforces code style
• Warns about a potential error
• Suggests an alternate way of doing something
• Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

"beside" option (default):

// 👍  good
this.state = {
  scanMethod: flowContextLongLongName === FLOW_CONTEXTS.SUSPENSION_APPEAL
    ? DEVICE_OPTIONS.CURRENT_DEVICE
    : DEVICE_OPTIONS.MOBILE_APP,
  scanMethod1: 'string ',
  [dynamic]: 'foo',
  parens: (
    something === somethingElse
  ),
}

// 👎  bad
this.state = {
  scanMethod:
    flowContextLongLongName === FLOW_CONTEXTS.SUSPENSION_APPEAL
      ? DEVICE_OPTIONS.CURRENT_DEVICE
      : DEVICE_OPTIONS.MOBILE_APP,
  scanMethod1:
    'string ',
  [dynamic]:
    'foo',
  parens:
    (
      something === somethingElse
    ),
}

"below" option:

// 👍  good
this.state = {
  scanMethod:
    flowContextLongLongName === FLOW_CONTEXTS.SUSPENSION_APPEAL
      ? DEVICE_OPTIONS.CURRENT_DEVICE
      : DEVICE_OPTIONS.MOBILE_APP,
  scanMethod1:
    'string ',
  [dynamic]:
    'foo',
  parens:
    (
      something === somethingElse
    ),
}

// 👎  bad
this.state = {
  scanMethod: flowContextLongLongName === FLOW_CONTEXTS.SUSPENSION_APPEAL
    ? DEVICE_OPTIONS.CURRENT_DEVICE
    : DEVICE_OPTIONS.MOBILE_APP,
  scanMethod1: 'string ',
  [dynamic]: 'foo',
  parens: (
    something === somethingElse
  ),
}

Why should this rule be included in ESLint (instead of a plugin)? This rule will affect code style in a very broad way and it doesn’t seem like there are any plugins that will be suitable for this case.

cc. @ljharb

[sharmilajesupaul]

@not-an-aardvark thanks for suggesting this, that should work well for this use case.

We could add configuration to key-spacing’s multiline option called linebreak that takes “below”, “beside”, and “consistent” as values?

[ljharb]

If so, then an option name like multiLineObjectValuePlacement or something might work, with possible values of “below”, “beside”, “consistent”, and “ignore” (and “ignore” would be the default, for back compat)?