CODEWITHSUNDEEP
javascriptvue.jsvisual-studio-codeformattingprettier
Brage
Brage

Reputation: 55

Prevent Prettier formating arrow functions to multiple lines

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"
/>

Upvotes: 4

Views: 6378

Answers (3)

Dedios
Dedios

Reputation: 1

As to why the arrow function is multi-line in Prettier, it's definitely due to the use of the curly braces.

If you'd like for arrow functions to stay single line you need to remove curly braces.

const foo = (bar) => return something

Also, if your single line arrow function exceeds the Prettier default width setting - printWidth attribute (default value of 80). It will also wrap your single line arrow function. If that were to happen you can simply add a .prettierrc file (in JSON format) at the root of your project and adjust the attribute with a custom value.

Upvotes: 0

rhelminen
rhelminen

Reputation: 728

The main issue here are the braces in the arrow function's body. If you're calling a single function in the body, you can simply do something like this:

<button @click="(event) => doSomething(event)">Do something</button>

<!-- In Vue, you can also use this shorter syntax -->
<button @click="doSomething($event)">Do something</button>

In order to omit the braces, you need to return a single expression from the arrow function (check the MDN docs for more information). This article explains pretty nicely how an expression is defined. The key takeaway is this:

An expression is a snippet of code that evaluates to a value

Since variable assignment is an expression, you can just omit the braces (Prettier will add parentheses around the arrow function's body to make it clearer that it's a single thing). Prettier treats this differently and should render it on the same line, provided you're not exceeding your printWidth. Here are some examples with default Prettier settings, except for printWidth set to 120:

<!-- Without braces (Prettier will add the parentheses) -->
<button @click="() => (someVariable = 'New value')">Assign a value to a variable</button>
<button @click="() => (true ? doSomething() : doSomethingElse())">Ternary operator</button>

<!-- Braces -->
<button
  @click="
    () => {
      someVariable = 'New value';
    }
  "
>
  Assign a value to a variable
</button>
<button
  @click="
    () => {
      true ? doSomething() : doSomethingElse();
    }
  "
>
  Ternary operator
</button>

NOTE

The examples are just to illustrate how Prettier handles things. In Vue, you could actually just do @click="someVariable = 'New value'", but in certain other frameworks you might need the full arrow function. Adapt to your framework as needed, but the behavior of Prettier should be similar.

Upvotes: 0

starfruit3254
starfruit3254

Reputation: 299

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

Upvotes: 0

Related Questions