question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

jsx-max-props-per-line

See original GitHub issue

Hey All, new to typescript and JS has this jsx rule for formatting the structure of JSX props. I would like this:

<img src={logo} className={style.appLogo} alt="logo" />

to look like:

      <img 
        src={logo} 
        className={style.appLogo} 
        alt="logo"
     />
    // or
    <img src={logo} 
         className={style.appLogo} 
         alt="logo" />

with the closing tag and opening prop optionally on a new line.

I think it would work with jsx-alignment for aligning the props.

Is there any possibility to get something like this setup already? Note that if I have multiple props, or long props, that softwrap it results in the first formatting above. However I’d like to define the maximum number of props on a line before it wraps (1 in the above examples).

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:10
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
dandonahoecommented, Mar 6, 2019

Very much want this. Keeps everyone on the team writing in a consistent readable style.

0reactions
adidahiyacommented, Aug 21, 2019

Closing due to the deprecation timeline and maintenance burden of formatting rules, see #210

Read more comments on GitHub >

github_iconTop Results From Across the Web

eslint-plugin-react/jsx-max-props-per-line.md at master - GitHub
This rule checks all JSX elements and verifies that the number of props per line do not exceed the maximum allowed. Props are...
Read more >
`[react/jsx-max-props-per-line]` eslint rule, compound settings
It enforces maximum 1 prop per line in case of multi-line tags. And with its printWidth property you may get similar effect to...
Read more >
Prettier react/jsx-max-props-per-line format with VSCode ...
In my experience Prettier and ESLint auto-formatting can work well together. dorsta 51. score:0. If you are looking to only change line for...
Read more >
Ryan Florence on Twitter: ""Not only are we going to limit the ...
eslint-plugin-react/jsx-one-expression-per-line.md at master ... "Sorry, no className or style props because they are too 'complex'" ... huh??
Read more >
eslint-plugin-react/README.md - UNPKG
204, | | | [react/jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md) | Limit maximum of props on a single line in JSX |.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found