Как отформатировать html свойства для вертикального списка в VSCode

Question

Запись атрибутов html в одну строку в React быстро выходит из-под контроля. Есть ли какая-нибудь горячая клавиша или плагин, чтобы взять html атрибутов в одну строку и расположить их вертикально?

Для простого примера, как мне преобразовать это:

<input onChange={handleChange('name')} type="text" className="form-control" />

В это:

<input 
  onChange={handleChange('name')} 
  type="text" 
  className="form-control" 
/>

Спасибо!

Answer 1

ESLint + красивее

'react/jsx-first-prop-new-line': [1, 'multiline'],
'react/jsx-max-props-per-line': [1, {'maximum': 1}]

Answer 2

Вы можете сделать это лучше, посмотрев на do c здесь https://prettier.io/docs/en/options.html опция

--jsx-bracket-same-line : false //to make it in multi lines