Prettier is still breaking HTML in 2019

VSCode, macOS

"printWidth": 80

<h1 [ngStyle]="{
  'color': h1Style ? 'gray' : 'black',
  'font-size': !h1Style ? '1em' : '4em'
}">Home</h1>

save result = broken html

<h1
  [ngStyle]="{
    color: h1Style ? 'gray' : 'black',
    'font-size': !h1Style ? '1em' : '4em'
  }"
>
  Home
</h1>

if edit line length < 80

<h1 [ngStyle]="{color: h1Style ? 'gray' : 'black',
'font-size': !h1Style ? '1em' : '4em'}">Home</h1>

save result = still broken html

<h1
  [ngStyle]="{
    color: h1Style ? 'gray' : 'black',
    'font-size': !h1Style ? '1em' : '4em'
  }"
>
  Home
</h1>

[azz]

Not sure what specifically is broken there? Maybe you’re after html-whitespace-sensitivity=strict?

Prettier 1.16.4 Playground link

--html-whitespace-sensitivity strict
--parser html

Input:

<h1 [ngStyle]="{
  'color': h1Style ? 'gray' : 'black',
  'font-size': !h1Style ? '1em' : '4em'
}">Home</h1>

Output:

<h1
  [ngStyle]="{
  'color': h1Style ? 'gray' : 'black',
  'font-size': !h1Style ? '1em' : '4em'
}"
  >Home</h1
>

[azz]

Yeah that’s the expected behaviour.