👨‍💻 Working with MDX files in VSCode

April 9, 2024

Overview

MDX lets users write Markdown with embedded components through JSX. In my work I mostly use MDX files when working on documentation sites build on Docusaurus

VSCode does not treat MDX files in the same way it handles standard markdown files out of the box.

To get around this, in your settings.json file, add the following:

"files.associations" {
  "*.mdx": "markdown"
}

That's it, now extensions like markdownlint, Markdown Preview Enhanced, and Markdown All in One work on .mdx files as you would expect/intend them to.

TIL
Adding "*.mdx": "markdown" to your VSCode settings.json file associations makes all your markdown extensions (preview, linting, snippets) work on MDX files.