Skip to content

Consider breaking on text in JSX #963

@karl

Description

@karl

Would it be possible to break on text inside JSX?

At the moment it seems like we only break around tags. This can cause some unusual formatting when including text with bold/italic tags. We use paragraphs of text with formatting in our Storybook documentation.

Input:

const Abc = () => {
  return (
    <div>
      Please state your <b>name</b> and <b>occupation</b> for the board of directors.
    </div>
  );
}

Output:

const Abc = () => {
  return (
    <div>
      Please state your
      {" "}
      <b>name</b>
      {" "}
      and
      {" "}
      <b>occupation</b>
      {" "}
      for the board of directors.
    </div>
  );
};

Expected:

const Abc = () => {
  return (
    <div>
      Please state your <b>name</b> and <b>occupation</b> for the board of
      directors.
    </div>
  );
}

https://prettier.github.io/prettier/#%7B%22content%22%3A%22const%20Boo%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3Cdiv%3E%5Cn%20%20%20%20%20%20Please%20state%20your%20%3Cb%3Ename%3C%2Fb%3E%20and%20%3Cb%3Eoccupation%3C%2Fb%3E%20for%20the%20board%20of%20directors.%5Cn%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20)%3B%5Cn%7D%5Cn%5Cnconst%20Yay%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3Cdiv%3E%5Cn%20%20%20%20%20%20Please%20state%20your%20%3Cb%3Ename%3C%2Fb%3E%20and%20%3Cb%3Eoccupation%3C%2Fb%3E%20for%20the%20board%5Cn%20%20%20%20%20%20of%20directors.%5Cn%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20)%3B%5Cn%7D%5Cn%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22singleQuote%22%3Afalse%2C%22trailingComma%22%3A%22none%22%2C%22bracketSpacing%22%3Atrue%2C%22jsxBracketSameLine%22%3Afalse%2C%22parser%22%3A%22babylon%22%2C%22doc%22%3Afalse%7D%7D

Metadata

Metadata

Assignees

No one assigned

    Labels

    locked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.status:needs discussionIssues needing discussion and a decision to be made before action can be taken

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions