Enforce JSX new-line style

[deecewan]

Hey,
Not sure if this rule already exists (I couldn't find it based on name), but this is an error:

<MyComponent
	prop={}
>Test</MyComponent>

This is a pass:

<MyComponent
	prop={}
>Test
</MyComponent>

Is there a lint to enforce this? In words, if the component is multiline, the end of the open tag is not followed by anything (only a newline). It would also be good to validate that the children are indented one level further than the parent.

<MyComponent
	prop={}
>
  Test
</MyComponent>

[ljharb]

I'm not sure a rule exists; your third example looks fine to me (the prop alignment would need fixing, ofc, but that's a separate rule) - but your second example; why would someone want that to pass?

[deecewan]

Sorry, that was very poorly written.

My second example is currently a pass. I'm saying I want to enforce dropdown onto the next line for children, as shown in example 3. Currently, my config will let example 2 pass (and example 3 - but it won't enforce that style).

I think I'm looking for the extra options from jsx-closing-bracket-location, but I've got it set to line-aligned and it's not enforcing it.

Mostly just looking for guidance as to how to enforce the third style (and not allow the second).

[ljharb]

A combination of closing bracket location, closing tag location, jsx-first-prop-new-line, jsx-indent-props, jsx-indent, jsx-one-expression-per-line, jsx-tag-spacing, and jsx-child-element-spacing, seems like it would be able to handle it?

[codynova]

I'm also searching for how to achieve this effect. I think the missing piece, for me, is that I'm unwilling to use jsx-one-expression-per-line due to issues #1848 and #1855. Without jsx-one-expression-per-line I'm able to achieve the following fixed output:

<button
    data-next-button
    type="button"
    class={style.nextButton}
    onClick={this.handleButtonClick}
>{terms.buttonText}
</button>

With the desired output being:

<button
    data-next-button
    type="button"
    class={style.nextButton}
    onClick={this.handleButtonClick}
>
    {terms.buttonText}
</button>

[dkadrios]

I'm at best a hack when it comes to writing eslint rules, but I've cooked up one that implements what @codynova has described. It's up @ https://www.npmjs.com/package/@studysync/eslint-plugin-persnickety

Light on docs but it should be pretty self-explanatory.

HTH!

[ljharb]

@dkadrios if #1680 (comment) isn't accurate, I'd love a PR to one of the relevant rules to add an option to achieve it.

[ljharb]

Closing for now, but still happy to solve this issue if someone has a concrete idea.