Prevent Prettier formating arrow functions to multiple lines

Question

When I write arrow functions in Vue.js using vscode i get an unexpected formating.

I wish to change the settings for Prettier when auto formating arrow functions in vscode.

Expected:

<input type="file" @change="(event) => { files = event.target.files; }" accept=".csv" />

Acceptable:

<input 
    type="file"
    @change="(event) => {files = event.target.files;}"
    accept=".csv" 
/>

Actual:

<input
    type="file"
    @change="
        (event) => {
            files = event.target.files;
        }
    "
    accept=".csv"
/>

Answer 1

I did some research and found this feature has already been requested: https://github.com/prettier/prettier/issues/4125

Changes to prettier were made (https://github.com/prettier/prettier/pull/6685) and released in prettier 2.0 back in 2020. (https://prettier.io/blog/2020/03/21/2.0.0.html#improved-method-chain-breaking-heuristic-6685httpsgithubcomprettierprettierpull6685-by-mmkalhttpsgithubcommmkal)

But looking at example you provided it is still not working great apparently :/

If it were any option in prettier to configure this behaviour it would've been in here: https://prettier.io/docs/en/options.html But I haven't found anything that would help your case.

It seems to me the only thing you can do right now is to use

<!-- prettier-ignore -->

..before your line. You can read more about prettier ignore in html here: https://prettier.io/docs/en/ignore.html#html