MDX VS Code extension auto-formatting is indenting tags and removing text (may be IntelliSense issue)

[rdlauer]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

1.5

Link to runnable example

No response

Steps to reproduce

With the "Enable experimental IntelliSense support for MDX files." checked/enabled, the MDX extension is turning code like this:

<If cond={props.something === 'whatever'}>

### blah blah

</If>

into this...

      <If cond={props.something === 'whatever'}>



      </If>

So it's indenting the if statement for some reason AND more importantly it's removing the content within the tags.

Expected behavior

It shouldn't be indenting and seriously shouldn't be removing code :)

Actual behavior

See above.

Runtime

No response

Package manager

No response

OS

macOS

Build and bundle tools

No response

[ChristianMurphy]

Hey @rdlauer! 👋
Sorry you ran into a spot of trouble.
For triage purposes.

1. What were the steps you followed to see this?
   Did you run a formatting step? Did you run a script?
2. What version of VSCode are you using?

   code --version

3. What other extensions do you have installed in your VSCode?

   code --list-extensions

[rdlauer]

1. I didn't run a formatting step (at least I don't think so...honestly with VS Code these days I'm not entirely sure). The reason I think it's this extension's issue is the fact that I toggled off that IntelliSense setting and the behavior reverted to what I was expecting!
2. 1.84.2
3. aeschli.vscode-css-formatter
   batisteo.vscode-django
   dbaeumer.vscode-eslint
   donjayamanne.python-environment-manager
   donjayamanne.python-extension-pack
   Ionic.ionic
   joedevivo.vscode-circuitpython
   jtjoo.classic-asp-html
   KevinRose.vsc-python-indent
   magicstack.MagicPython
   ms-python.black-formatter
   ms-python.isort
   ms-python.python
   ms-python.vscode-pylance
   ms-toolsai.jupyter
   ms-toolsai.jupyter-keymap
   ms-toolsai.jupyter-renderers
   ms-toolsai.vscode-jupyter-cell-tags
   ms-toolsai.vscode-jupyter-slideshow
   ms-vscode-remote.remote-containers
   ms-vscode-remote.remote-ssh
   ms-vscode-remote.remote-ssh-edit
   ms-vscode.cpptools
   ms-vscode.remote-explorer
   ms-vscode.vscode-serial-monitor
   NativeScript.nativescript
   njpwerner.autodocstring
   pflannery.vscode-versionlens
   platformio.platformio-ide
   streetsidesoftware.code-spell-checker
   unifiedjs.vscode-mdx
   VisualStudioExptTeam.intellicode-api-usage-examples
   VisualStudioExptTeam.vscodeintellicode
   Vue.volar
   wholroyd.jinja

[ChristianMurphy]

I'm not able to replicate the issue locally with version 1.5.0 🤔

---

@rdlauer could you try disabling all extensions, then enabling only the MDX plugin?

[rdlauer]

Good idea - I disabled all extensions except for MDX (and re-enabled that experimental IntelliSense setting). Same problem!

Unchecked the IntelliSense setting and it doesn't alter the formatting (same behavior as before).

[ChristianMurphy]

Another thing to check.
If you call save without format from the command palette:

does the file get modified?

[rdlauer]

It does NOT get formatted in this case!

[ChristianMurphy]

Okay, you have format on save enabled for all files.
I can replicate this issue now, thanks @rdlauer!

@remcohaszing is there any other information which would be helpful for debugging?

[remcohaszing]

Thanks for reporting / triaging!

I could not have predicted this behaviour, but it makes sense with some deeper knowledge. I will disable formatting in an upcoming version.

For now, a workaround is to disable formatting for MDX

// VS Code settings.json
{
  "[mdx]": {
    "editor.formatOnSave": false
  }
}

[github-actions]

Hi! This was marked as ready to be worked on! Note that while this is ready to be worked on, nothing is said about priority: it may take a while for this to be solved.

Is this something you can and want to work on?

Team: please use the area/* (to describe the scope of the change), platform/* (if this is related to a specific one), and semver/* and type/* labels to annotate this. If this is first-timers friendly, add good first issue and if this could use help, add help wanted.

[wooorm]

So Volar is linting and formatting MDX as markdown? Meaning broken linting and formatting? That sounds like a serious bug?

[remcohaszing]

Volar maps the JSX and the markdown parts of MDX to virtual files, applies operations on those virtual files, and maps the results back to the original files. This works really well for showing squiggly lines, code navigation, and small edits (such as completions), but not always for formatting.

A bit more in depth: We provide Volar with a virtual file that looks somewhat like this:

export function MDXContent() {
  return (
    <>
<If cond={props.something === 'whatever'}>

·············

</If>
    </>
  )
}

This gets passed to TypeScript for formatting. TypeScript transforms it into this:

export function MDXContent() {
  return (
    <>
      <If cond={props.something === 'whatever'}>



      </If>
    </>
  )
}

The changes are then mapped back to the MDX document.

This idea works perfect for certain constructs of embedded content, such as Vue single component files or Astro files, or even just props in MDX content or frontmatter, but this particular transform doesn’t really work for JSX elements in MDX, which is an integral part.

So the solution is to explicitly disable support for formatting MDX files, or at least for the JSX parts.

[github-actions]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.