prettier: Max line length doesn't seem to be working everywhere

I’m working on implementing prettier into my open source react grid system hedron. I noticed that the max line length isn’t taking effect everywhere. I’m using all the default options, you can see my format script here.

const containerDirectionError = "Container direction must be `horizontal` or `vertical`";

const Wrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  
  ${props => props.direction && `flex-direction: ${directionToFlex(props.direction)}`}

  ${props => props.alignSelf ? `align-self: ${props.alignSelf};` : null}
  ${props => props.justifyContent ? `justify-content: ${props.justifyContent};` : null}
  ${props => props.order ? `order: ${props.order};` : null}
`;

Here is the link to my script in the prettier online parser

Maybe you can shed some light on whether this is something I’m doing wrong or a bug inside prettier.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 22 (12 by maintainers)

Commits related to this issue

Allow to break after = for strings This is not a general fix but it solves some issues that people are seeing where prettier goes > 80 columns. Fixes #1141 Also fixes part of #1110 — committed to vjeux/prettier by vjeux 7 years ago
Allow to break after = for strings This is not a general fix but it solves some issues that people are seeing where prettier goes > 80 columns. Fixes #1141 Also fixes part of #1110 — committed to vjeux/prettier by vjeux 7 years ago
Allow to break after = for strings This is not a general fix but it solves some issues that people are seeing where prettier goes > 80 columns. Fixes #1141 Also fixes part of #1110 — committed to vjeux/prettier by vjeux 7 years ago
Allow to break after = for strings (#1142) This is not a general fix but it solves some issues that people are seeing where prettier goes > 80 columns. Fixes #1141 Also fixes part of #1110 — committed to prettier/prettier by vjeux 7 years ago

Most upvoted comments

@garetmckinley What if you are 75 columns and then use the variable longerThanFive? We can’t possible break up a variable name (assuming that we’ve broken up everything else on the line that we can.

The fact is that we can only break up so much. Even better example: what if you have a variable name that is 85 columns long? That’s an insane example, but it illustrates that there cases which we just can’t do anything. Any kind of constraint-based layout system has to give at some point where there is too much content that can’t break up. Think of in browsers when you show an image that is wider than the containing div.

It enforces a maximum line length as much as it can. “suggestion” is too light of a word, but at the end of the day, that’s what it is. We will wrap code as much as we can to try to make it fit, but it’s not the end of the world if it goes over. Lots of times it’s more readable to let things flow a little bit over, as is the case with the require example above (which I agree with).

jlongster on Apr 14, 2017