Closed rdlauer closed 10 months ago
Hey @rdlauer! 馃憢 Sorry you ran into a spot of trouble. For triage purposes.
code --version
code --list-extensions
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?
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).
Another thing to check. If you call save without format from the command palette: does the file get modified?
It does NOT get formatted in this case!
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?
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
}
}
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
.
So Volar is linting and formatting MDX as markdown? Meaning broken linting and formatting? That sounds like a serious bug?
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鈥檛 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.
Hi! This was closed. Team: If this was fixed, please add phase/solved
. Otherwise, please add one of the no/*
labels.
Initial checklist
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:
into this...
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