Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Media queries ignore printWidth

See original GitHub issue

Prettier 1.18.2 Playground link

Scenario 1

Input:

<A
  a={`
	${b} is a constant. ${b} is a constant.${b} is a constant.${b} is a constant.${b} is a constant.
    ${b} is a constant. 
  `}
>
</A>

Output:

<A
  a={`
	${b} is a constant. ${b} is a constant.${b} is a constant.${b} is a constant.${b} is a constant.
    ${b} is a constant. 
  `}
></A>

Expected behavior: As expected.

Scenario 2

Input:

const Graphic = styled.section`
  @media only screen and
  (min-device-width: 768px) and
  (max-device-width: 1024px) {
    overflow-x: scroll;
    overflow-y: hidden;
  }
`

Output:

const Graphic = styled.section`
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    overflow-x: scroll;
    overflow-y: hidden;
  }
`

Expected behavior: Should have left it multi-line

Why is there an inconsistent breaking of template literals? When does it break and when not? Referring to this PR - https://github.com/prettier/prettier/pull/5979, what is meant by “simple template literals”?

Issue Analytics

State:
Created 4 years ago
Comments:12 (10 by maintainers)

Top GitHub Comments

1reaction

thorn0commented, Oct 29, 2019

Let’s just keep the issue open for now.

1reaction

lydellcommented, Oct 28, 2019

@algomaster99 We recommend turning off all rules that conflict with Prettier. See: https://prettier.io/docs/en/integrating-with-linters.html

max-len can be used with Prettier, but I wouldn’t personally recommend it. You’ll always be fighting with it. See: https://github.com/prettier/eslint-config-prettier#max-len