2

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!

Gama11
  • 31,714
  • 9
  • 78
  • 100
Nelson Fleig
  • 111
  • 1
  • 7

2 Answers2

2

ESLint + Prettier

'react/jsx-first-prop-new-line': [1, 'multiline'],
'react/jsx-max-props-per-line': [1, {'maximum': 1}]
keikai
  • 14,085
  • 9
  • 49
  • 68
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'],
jinusean
  • 131
  • 2
  • 2