Option Request: Multi-line formatting of object destructuring

See original GitHub issue

A recent change from https://github.com/prettier/prettier/pull/4267 resulted in an intentional change in how objects are destructured. I’ve been using prettier now for a long time and I love it. But I used to be able to do something like this:

(edited by @duailibe)

Before

const { match: { params: { id } } } = this.props  // 1 line

After

const { 
    match: { 
        params: { id }   // 5 lines
    } 
} = this.props

And there are a number of other places where this has caused a number of extra lines of code (that IMO are less readable). So I’m requesting that this change be given a config option so I can disable just this one rule.

Thank you for your consideration, time and for putting such great work into prettier

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:8
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
duailibecommented, Apr 26, 2018

Oh the handleClick case is already printed correctly:

Prettier 1.12.1 Playground link

Input:

function fn({target: {value}}) {}

const fn = ({target: {value}}) => {}

Output:

function fn({ target: { value } }) {}

const fn = ({ target: { value } }) => {};

1reaction
j-f1commented, Apr 26, 2018

How about only expanding the node onto multiple lines if:

  • there are more than two keys in it that have children that are objects, OR
  • one of its children has an object child that is expanded
Read more comments on GitHub >

github_iconTop Results From Across the Web

Prettier settings to format object-destructuring until end of the ...
It's a valid question, but generally prettier is an "opinionated" formatter so it decides everything for you. I think it makes the code...
Read more >
Rationale - Prettier
Once an object literal becomes multiline, Prettier won't collapse it back. If in Prettier-formatted code, we add a property to an object literal, ......
Read more >
Javascript code indentation when passing an object literal to a ...
When writing a function call that takes an object literal as an argument, I would like the code to be formatted like this:...
Read more >
object-curly-newline - ESLint - Pluggable JavaScript Linter
"multiline": true requires line breaks if there are line breaks inside properties ... You can specify different options for object literals, destructuring ......
Read more >
Destructuring assignment - JavaScript - MDN Web Docs
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found