Why does Prettier break up my JSON object into multiple lines?

Question

Prettier is great, but it breaks up my javascript object into multiple lines, like so:

<Text
    style={
        styles.chineseText
    }
>
    {
        this.state
            .housePayload
            .sitMountain
            .chinese
    }
</Text>

I'd like the result to be something along the lines of :

<Text
    style={
        styles.chineseText
    }
>
    { this.state.housePayload.sitMountain.chinese }
</Text>

How can I make this happen? My current config file is:

{
    "trailingComma": "es5",
    "tabs": true,
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
}

Answer 1

You should try printWidth in the config. The default is 80 and you can specify any number that suits you. For e.g:

printWidth: 100

From the Doc

It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.

It's also important to note though:

Don't try to use printWidth as if it was ESLint’s max-len – they’re not the same. max-len just says what the maximum allowed line length is, but not what the generally preferred length is – which is what printWidth specifies.