7

I am struggling to find a setting in my Prettier / ESLint config which allows me to wrap my code like this:

var [
  first,
  second,
  third,
  etc,
] = data();

When I hit save, it always turns the code to this automatically:

var [first, second, third, etc] = data();

This may not be such a big problem with this simple demonstration, but with more complex destructuring, this one liner will get hard to read.

Thank you for your help!

Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
David Haase
  • 179
  • 1
  • 8
  • 2
    eslint? Maybe (I haven't searched the config). Prettier? No I don't think so, because it is an _opinionated_ formatter. – evolutionxbox Apr 06 '20 at 18:54
  • 2
    This would be really awful if there would be no way to set a decision like that by myself.... Complex destructuring would lose all its benefits that it gets from better readablility. – David Haase Apr 06 '20 at 18:57
  • 2
    Prettier will wrap it like that if it gets longer that the max line length enough. – Barry Michael Doyle Apr 06 '20 at 19:07
  • 2
    the benefit isn't necessarily better readability (though it's authors try hard to make that be the case); it's to make code more consistent and remove diff noise. – Dan O Apr 06 '20 at 19:08
  • 2
    @DanO I know, but I feel like on top of it these benefits, it is also easier to read (if you can format it how you want)... if code looks like this ``var object = { 'a': [{ 'b': { 'c': 3 } }] };`` destructuring loses at least some of its benefits. – David Haase Apr 06 '20 at 19:13

2 Answers2

3

In Eslint, you can enforce line breaks between array elements using option array-element-newline:

Incorrect code:

/*eslint array-element-newline: ["error", "always"]*/
var d = [1, 2, 3];

Correct code:

/*eslint array-element-newline: ["error", "always"]*/
var d = [1,
    2,
    3];

You can also check out:

palaѕн
  • 72,112
  • 17
  • 116
  • 136
2

Prettier will overwrite whatever eslint does anyways, so using eslint for this won't really help you if you also have prettier in a project (prettier should also be run after eslint). Prettier doesn't have any way to control what you're asking, there have been several github discussions on multiline styling but they usually don't go anywhere because of good reasons.

Prettier will wrap arrays or objects according to the print width, so if you have a small array of things like resolves in webpack:

resolves: ['.tsx', '.ts', '.jsx', '.js']

Prettier will write it to a single line because writing that in a multiline looks really stupid. The same goes for anything similar like jest extensions or plugins where there's a single entry in the whole array like plugins: ["react"], which again would look really stupid putting that on a multiline just because of a single entry.

Prettier will however wrap it as soon as the items take up more than the print width, which is by default 80. For me this is really the way it should be, I don't want a bunch of 4 character multilines, it looks way neater when it's wrapped up in a sideways array, while when the items inside is longer it also perfectly multilines it.

Code like this:

var [
  first,
  second,
  third,
  etc,
] = data()

Looks really bad, it belongs on a single line. Perhaps prettier should support multiline just so people can customize their stuff, but I don't think code should look this way.

That being said you can do:

var [
  first,  //
  second,
  third,
  etc,
] = data()

And it will prevent prettier from one line formatting it, but IMO you shouldn't be using it.

  • 1
    That putting things on separate lines "looks really stupid" (to YOU) is a rather ignorant thing to say and that kind of rhetoric doesn't belong in an answer. First of all, what beauty and readability are completely subjective. Secondly, there is one very, very widely agreed upon pragmatic reason to use multi-lines and that is that it enables much better diffs. – Wayne Bloss Feb 15 '23 at 21:01