Concatenated string goes in one word lines

[hyperknot]

Prettier 1.10.2 Playground link

--print-width 120

Input:

var query = '/' + minx + ',' + miny + ',' + (maxx - minx) + ',' + (maxy - miny)
    + '/pct:' + 100 / scale + '/0/' + quality + '.' + extension

Output:

var query =
  "/" +
  minx +
  "," +
  miny +
  "," +
  (maxx - minx) +
  "," +
  (maxy - miny) +
  "/pct:" +
  100 / scale +
  "/0/" +
  quality +
  "." +
  extension;

Expected behavior: This is quite not pretty like this. Something in 2 or maybe 3 lines would be reasonable, but not this.

[josephfrazier]

For what's it worth, writing this as a template literal makes it wrap only as much as needed to fit the --print-width:

Input:

const query = `/${minx},${miny},${maxx - minx},${maxy - miny}/pct:${100 / scale}/0/${quality}.${extension}`;

Output:

const query = `/${minx},${miny},${maxx - minx},${maxy - miny}/pct:${100 /
  scale}/0/${quality}.${extension}`;

playground (note that --print-width 120 wouldn't wrap in this case)

[hyperknot]

I totally agree that I wouldn't write this string like this, but this is from a library which I have to use verbatim as rewriting it could introduce bugs. Also, template literal support is not universal yet.

[josephfrazier]

Of course, I didn't mean to imply that you should have to rewrite your code. Instead, maybe Pretter could use similar logic for wrapping binary operators.

[vjeux]

You can workaround by adding parenthesis fwiw:

Prettier 1.10.2 Playground link

--print-width 120

Input:

var query = '/' + (minx + ',' + miny + ',' + (maxx - minx)) + (',' + (maxy - miny)
    + '/pct:' + 100 / scale + '/0/' + quality + '.' + extension)

Output:

var query =
  "/" +
  (minx + "," + miny + "," + (maxx - minx)) +
  ("," + (maxy - miny) + "/pct:" + 100 / scale + "/0/" + quality + "." + extension);