JSX auto-wrapping always

Question

This is doing my head in! Spent 2 hours trying to figure out what is causing the below behaviour and keep coming up blank.

I'm migrating to VSCode and my React JSX components auto wrap into multiple lines. This is fine (and good) when a component has multiple attributes, but makes some files extremely long and very unreadable.

Case in point - the file where react router routes are defined. They are all small, and ideally, having one per line makes your app's routes very readable, rather than having each route defined every 7 or so lines.

Example of what VS Code auto formats the file to:

<Authenticated
    path="/new"
    component={NewCorrespondence}
    {...this.props}
/>
<Authenticated
    path="/inbox"
    component={Inbox}
    {...this.props}
/>
<Authenticated
    path="/sent"
    component={Sent}
    {...this.props}
/>

What it should look like

<Authenticated path="/new" component={NewCorrespondence} {...this.props} />
<Authenticated path="/inbox" component={Inbox} {...this.props} />
<Authenticated path="/sent" component={Sent} {...this.props} />

What is the setting within VSCode that handles this? Is there a way to configure it to wrap these lines only if longer than x characters?

Answer 1

Ok, so answering my own question. It was the prettier package's printWidth setting. The prettierrc config file was getting ignored, but setting the width directly form VSCode fixed this.

So the issue here is how I'm setting up the config file (different issue!).