jsx-max-props-per-line

[andy9775]

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).

[webberwang]

Yeah a feature like this would be great

[natlang]

Is this possible?

[ryanburr]

@andy9775 The jsx-alignment rule also checks that mutli-line attributes are on their own line. This would conflict with the { "when": "always" } rule that is implemented by the eslint-plugin-react lib.

If eslint-plugin-react is the behavior you are looking for, I think removing the attribute rules from the jsx-alignment rule and splitting them into two separate rules (jsx-first-prop-new-line and jsx-max-props-per-line) makes the most sense.

[dandonahoe]

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

[adidahiya]

I would just add this functionality to the jsx-alignment rule instead of creating a new rule. But this is low priority due to palantir/tslint#4534

Have you all tried prettier for JSX formatting?

[sevenLee]

@ryanburr as you mentioned to use jsx-first-prop-new-line and jsx-max-props-per-line to replace jsx-alignment in tslint-react, but they are all in eslint rule, how should I implement them in tslint? any body could give me some tips? Thanks!

[ryanburr]

@sevenLee I don't think it should replace the entire jsx-alignment rule, but it will have to be modified since it contains attribute rules.

Per @adidahiya suggestion, rather than creating new rules for jsx-first-prop-new-line and jsx-max-props-per-line within the tslint-react library, it would be better to modify the jsx-alignment rule to include more attribute configuration.

Take all of this with a grain of salt though as @adidahiya also pointed out, TSLint will be deprecated sometime this year, so it might make sense to start to transition to ESLint or Prettier for jsx formatting.

[adidahiya]

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