Skip to content

🐛 BUG: Plugin does not respect Prettier's existing JSX inline expression formatting #433

@icorbrey

Description

@icorbrey

Describe the Bug

When formatting Astro files with Prettier and this plugin, JSX expressions are not formatted the same as when you use Prettier on JSX. If for example you have elements being conditionally rendered based on a value, Astro will place the value on a new line instead of on the same line as the brace:

---
const baz = true;
---

<div class="bar">
  {
    !!baz && (
      <>
        <span>Kek</span>
        <span>Kek</span>
        <span>Kek</span>
      </>
    )
  }
</div>
// Foo.jsx

const Foo = ({ baz }) => (
  <div class="bar">
    {!!baz && (
      <>
        <span>Kek</span>
        <span>Kek</span>
        <span>Kek</span>
      </>
    )}
  </div>
);

This is invalid behavior and should be corrected.

Steps to Reproduce

  1. npm init astro using default template.
  2. Add prettier-plugin-astro.
  3. Add the following into a file:
    ---
    const baz = true;
    ---
    
    <div class="bar">
      {!!baz && (
        <>
          <span>Kek</span>
          <span>Kek</span>
          <span>Kek</span>
        </>
      )}
    </div>
  4. Format the file using Prettier.
  5. Error! The formatting is not maintained, and !!baz... is placed on a new line.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions