MDX: React Components with Blank Lines

[karlhorky]

Summary

An extra blank line will be added after opening and closing tags of React components, if there are extra lines within the component.

This is a regression from a previous version.

Before

# Heading

<Component>

Markdown

</Component>

After

# Heading

<Component>

+
Markdown

</Component>

+

Github Repository to Reproduce Issue

https://gist.github.com/karlhorky/f0a4a1d9d7b4be84ab0e4f5739fda71e

Steps To Reproduce:

1. This is step 1.
2. This is step 2. All steps should start with '1.'

Expected result

No extra lines

Actual result

Extra lines after opening and closing tags

Additional information

Potentially related to: prettier/prettier#7041

Playground (with unexpected token issue mentioned in prettier/prettier#7041): Playground

VS Code Version: 1.48.2

Prettier Extension Version: 5.5.0

OS and version: macOS Catalina 10.15.6

Prettier Log Output

["INFO" - 10:38:44 AM] Formatting /Users/k/p/project/index.mdx
["INFO" - 10:38:44 AM] Using ignore file (if present) at /Users/k/p/course-material/.prettierignore
["INFO" - 10:38:44 AM] Using bundled version of prettier.
["INFO" - 10:38:44 AM] File Info:
{
  "ignored": false,
  "inferredParser": "mdx"
}
["INFO" - 10:38:44 AM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 10:38:44 AM] Prettier Options:
{
  "filepath": "/Users/k/p/project/index.mdx",
  "parser": "mdx",
  "proseWrap": "never",
  "singleQuote": true,
  "trailingComma": "all"
}
["INFO" - 10:38:44 AM] Formatting completed in 82.884081ms

[ntotten]

I am unable to reproduce this. I'll need more details like a full sample project with config, etc.

[karlhorky]

Here's a repo: https://github.com/karlhorky/vscode-prettier-mdx-bug-reproduction

I took all the configuration out and I am able to reproduce on both VS Code and VS Code Insider's Edition.

This is with v5.7.1 of the extension (using the built-in version of Prettier).

[ntotten]

Ah yeah, this is a bug with prettier, not VS Code. I am able to get the same result through the command line prettier index.mdx --write on version 2.1.2 of prettier. Please open a new bug on the main repo: https://github.com/prettier/prettier

[karlhorky]

Oh, sorry about that!

I thought that there was special handling in prettier-vscode for this, since the playground errors out on that code.

Looks like there's already an open issue: prettier/prettier#9260

And a PR that should resolve it: prettier/prettier#9267

[karlhorky]

Can confirm that this is fixed in Prettier 2.2.0. You may need to upgrade your local Prettier version in your project if it's not working.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.