Prettier 3.5.3
Playground link

--parser babel

Input:

const el = (
  <div>
    {/*
      * a comment
      * on several lines
      */}
  </div>
);

Output:

const el = (
  <div>
    {/*
     * a comment
     * on several lines
     */}
  </div>
);

Expected output:

const el = (
  <div>
    {/*
      * a comment
      * on several lines
      */}
  </div>
);

Why?

I'm not too opinionated on exactly how the start and end braces are placed, but it's unfortunate that Prettier takes the column of asterisks that are aligned and un-aligns them. Frustratingly, this only seems to happen when all the stars are there. If any line is lacking the leading star, Prettier leaves it unchanged:

const el = (
  <div>
    {/*
      * a comment
      * on several lines
        an extra line avoids the issue
      */}
  </div>
);
// ^ formats to itself

This is inconsistent with Prettier's behavior for starred block comments outside of JSX. For instance:

// input:
/*
* hey
*/

// output (good):
/*
 * hey
 */

Maybe there's a hard-coded rule like "for starred comment, indent the star by one space", but for JSX block comments that should actually be "by two spaces" because the initial /* has become {/*?

Search keywords: JSX block comment, asterisk, star, column, vertical align