如何将 html 属性格式化为 VSCode 中的垂直列表

Question

Writing html attributes in a single line in React quickly gets out of control. Is there any hotkey or plugin to take html attributes in a single line and stack them vertically?

For a simple example, how do I convert this:

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

To this:

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

Thanks!

Answer 1

ESLint + Prettier

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

Answer 2

Check out my answer for the full setup here https://stackoverflow.com/a/66059378/10413635

// .eslintrc.js
module.exports = {
  extends: [
    'react-app',
    'prettier',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  rules: {
    'react/jsx-first-prop-new-line': [2, 'multiline'],
    'react/jsx-max-props-per-line': [
      2,
      { maximum: 1, when: 'multiline' },
    ],
    'react/jsx-indent-props': [2, 2],
    'react/jsx-closing-bracket-location': [
      2,
      'tag-aligned',
    ],
  },
}

// .prettierrc
{
 "semi": false,
 "singleQuote": true,
 "printWidth":80 // default
}

// .eslintr rules
'react/jsx-first-prop-new-line': [2, 'multiline'],
'react/jsx-max-props-per-line': [2, { maximum: 1, when: 'multiline' }],
'react/jsx-indent-props': [2, 2],
'react/jsx-closing-bracket-location': [2, 'tag-aligned'],

Answer 3

Writing html attributes in a single line in React quickly gets out of control. Is there any hotkey or plugin to take html attributes in a single line and stack them vertically?

For a simple example, how do I convert this:

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

To this:

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

Thanks!