Props formatting

[lajbel]

I love how dprint handles the formatting in JSX with the component's props, for example

const Component = () => {
    return (
        <Badge color="red" size="xs">
            {"@" + username}
        </Badge>
    )
}

This code formats to this: (the same)

const Component = () => {
    return (
        <Badge color="red" size="xs">
            {"@" + username}
        </Badge>
    )
}

And this code:

const Component = () => {
    return (
        <Badge
            color="red"
            size={25}
        >
            {"@" + username}
        </Badge>
    );
};

to this (also the same)

const Component = () => {
    return (
        <Badge
            color="red"
            size={25}
        >
            {"@" + username}
        </Badge>
    );
};

When you have 2 props, you can select use a new line on every prop, or put it in the same line, this avoid this ugly prettier problem:

Input

<div>
    <Card name="John Doe" age={25} imageUrl="myImageHost.com/x"/>
    <Card name="John Doe" age={25} imageUrl="myImageHost.com/x1242141245939519659"/>
</div>

Output

<div>
    <Card name="John Doe" age={25} imageUrl="myImageHost.com/x" />

    <Card
        name="John Doe"
        age={25}
        imageUrl="myImageHost.com/x1242141245939519659"
    />
</div>;

With no option of be like this:

<div>
    <Card 
        name="John Doe" 
        age={25} 
        imageUrl="myImageHost.com/x" 
    />

    <Card
        name="John Doe"
        age={25}
        imageUrl="myImageHost.com/x1242141245939519659"
    />
</div>;

This plugin has the same problem, and I would like to have an option like mantain the user selection of new lines in props. Thank you for this awesome plugin! I like to use it with Astro

[g-plane]

With the code example you gave:

<div>
    <Card name="John Doe" age={25} imageUrl="myImageHost.com/x"/>
    <Card name="John Doe" age={25} imageUrl="myImageHost.com/x1242141245939519659"/>
</div>

The first <Card> component won't be splitted into different lines: playground

What's the problem?

[lajbel]

The problem is the difference between how dprint JSX manages the same situation:

Using Typescript Plugin vs markup_fmt plugin

You can see how JSX uses the format that you selected, even if it doesn't exceed the printWidth

[g-plane]

I will add a new option for this, but it will be disabled by default to avoid breaking. Does it make sense?

It should not introduce breaking changes, but I still will add option and let people choose different styles.

[g-plane]

v0.6.0 is released. You don't need to update your configuration and now it formats as you expected.

Feel free to open new issues if you find bugs, also don't forget to give it a star and recommend this project to others.