Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multi-line object being formatted into one line if max line limit isn't exceeded. #11176

Closed
jtodd3 opened this issue Jul 8, 2021 · 3 comments
Labels
area:destructuring lang:javascript Issues affecting JS type:intended Bug reports that actually turned out to be intended behavior

Comments

@jtodd3
Copy link

jtodd3 commented Jul 8, 2021

Prettier 2.3.2
Playground link

--parser typescript
--print-width 120
--single-quote
--prose-wrap always

Input:

interface MyInterface {
  foo(): string,
}

export abstract class Foo implements MyInterface {
  foo() {
    const value = {};
    const {
      property1,
      property2,
      property3,
      property4,
      property5,
    } = value;
    return '';
  }
}

Output:

interface MyInterface {
  foo(): string;
}

export abstract class Foo implements MyInterface {
  foo() {
    const value = {};
    const { property1, property2, property3, property4, property5 } = value;
    return '';
  }
}

Expected behavior:
Prior to 2.3.0 the input example would not be formatted into the output example, Prettier didn't turn the multi-line object into a single-line statement. The expected behaviour only happens when we exceed the max line width (120 in our case)

@thorn0
Copy link
Member

thorn0 commented Jul 8, 2021

Prior to 2.3.0 the input example would not be formatted into the output example

It would. Just tested it with older versions.

The expected behaviour only happens when we exceed the max line width (120 in our case)

That's how Prettier works in general. Note that object destructurings and object literals are not the same. Prettier has always formatted them differently. The current formatting looks good enough for a comma-separated list of identifiers, so it's unlikely to change. E.g., compare it to how function arguments (another comma-separated list) are formatted. If the line looks too long to you, it probably is, so try reducing printWidth (see the recommendations here).

I'm going to close this as "works as intended".

@thorn0 thorn0 closed this as completed Jul 8, 2021
@thorn0 thorn0 added area:destructuring lang:javascript Issues affecting JS type:intended Bug reports that actually turned out to be intended behavior labels Jul 8, 2021
@jtodd3
Copy link
Author

jtodd3 commented Jul 8, 2021

I understand how Prettier works, my issue is why did the behavior change from 2.2.1 to 2.3.0 though?

edit: also for context we're using Prettier to format our team's frontend monorepo, we decided to go with a printWidth 120 so advising to change the printWidth doesn't really help.

@brodybits
Copy link
Contributor

why did the behavior change from 2.2.1 to 2.3.0

I tried your input with Prettier 2.2.1 (actually PR #9741 which came very soon before Prettier 2.2.1), seems to be no different:

Prettier pr-9741
Playground link

--parser typescript
--print-width 120
--prose-wrap always
--single-quote

Input:

interface MyInterface {
  foo(): string,
}

export abstract class Foo implements MyInterface {
  foo() {
    const value = {};
    const {
      property1,
      property2,
      property3,
      property4,
      property5,
    } = value;
    return '';
  }
}

Output:

interface MyInterface {
  foo(): string;
}

export abstract class Foo implements MyInterface {
  foo() {
    const value = {};
    const { property1, property2, property3, property4, property5 } = value;
    return '';
  }
}

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 1, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area:destructuring lang:javascript Issues affecting JS type:intended Bug reports that actually turned out to be intended behavior
Projects
None yet
Development

No branches or pull requests

3 participants