[Airbnb Style Guide] 3.5 Group your shorthand properties at the beginning of your object declaration

[eventualbuddha]

We don't do this yet, and there's no ESLint rule to enforce it. We should probably write one.

Refs #764

[eventualbuddha]

In practice this is harmful in a TypeScript codebase. TypeScript often makes use of discriminated unions, i.e. variants of a type that all share a property whose value tells TypeScript which variant this particular object is. For example:

interface HandMarkedPaperBallotPage {
  type: 'hmpb'
  precinctId: string
  ballotStyleId: string
  pageNumber: number
  marks: readonly Mark[]
  // �…
}

interface BallotMarkingDeviceBallotPage {
  type: 'bmd'
  precinctId: string
  ballotStyleId: string
  votes: Record<string, string>
  // �…
}

type PageInterpretation =
  | HandMarkedPaperBallotPage
  | BallotMarkingDeviceBallotPage

const precinctId = '23'
const ballotStyleId = '1'
const pageNumber = 1

const interpretation1: PageInterpretation = {
  type: 'bmd',
  precinctId,
  ballotStyleId,
}

const interpretation2: PageInterpretation = {
  |
}

The object expression assigned to intepretation1 above would be considered invalid by this rule. However, putting the type property (the discriminating property) first helps both a human reader and TypeScript understand quickly which variant it is working with. This aids quick comprehension for a human, and for TypeScript better IDE help:

Without a leading discriminator (shows all properties for all variants):

With a leading discriminator (shows only the properties for the detected variant):

[eventualbuddha]

Here's another example where this rule negatively impacts readability:

DateTime.fromObject({
  year,
  month,
  day: lastDayOfMonth && day > lastDayOfMonth ? lastDayOfMonth : day,
  hour,
  minute: name === 'minute' ? partValue : newValue.minute,
  zone: newValue.zone,
})

hour would be required to move above day.

[eventualbuddha]

Another example where the expected order is not preserved:

fetchMock.patchOnce('/config/election', {
  body,
  status: 400,
})

I'd expect status to be first because that's how HTTP responses work.

[eventualbuddha]

Wrote up an even longer version of these complaints as an issue with Airbnb: airbnb/javascript#2465.