visual-studio-codeformattingmdxjs

VS Code doesn't format MDX files with frontmatter correctly

When I have an MDX file with some front matter defined, it completely breaks the VS Code formatter. Syntax highlight is just wrong, commenting out lines via shortcuts doesn't use the correct comment format, there are no lint suggestions, etc.

I recall it working before, so it could be an issue with an update or just something I might've messed up. I made sure that I'm using the unifiedjs.vscode-mdx formatter for all .mdx files, which should be correct as far as I know.

incorrect behavior with frontmatter

correct behavior with frontmatter removed

Solution

  • https://github.com/wooorm/markdown-tm-language/issues/10#issuecomment-2265019049

    Interesting 🤔

    I am unable to reproduce this in my own VSCode setup. However, I am able to reproduce this with all extensions disabled. Installing the YAML extension resolves it.

    This means it’s a bug with the builtin VSCode YAML grammar. The YAML extension uses its own grammar which isn’t broken.

    Both VSCode and the YAML extension pull the YAML grammar from external sources, but not the same source. So really this is an issue with the external YAML grammar that VSCode uses.

    TL;DR: It’s an issue in VSCode, report it with them. As a workaround, install the YAML extension. It’s really good, you should use it anyway. :)