MDX

So why do I need MDX and what even is that? In short - it’s a markdown file in which you can use JavaScript and all it’s benefits. Want to calculate something? Get todays date? 7.03.2024. Use some of your existing React component? Say no more, MDX got you covered! ⬇️

Installation and configuration

As most things in Astro, enabling MDX was a piece of cake. It all came down to runing single command to install required astro package and then adding file association for vscode to tread .mdx files the same way as .md.

# in terminal using yarn
npm install @astrojs/mdx

// astro.config.mjs
{
  "files.associations": {
    "*.mdx": "markdown"
  }
}
// TODO: create some component to display file name when using code block 🥲

And just like that, I could use all the features of MDX in my astro app.

Unfortunatley developer experience was far from optimal, I had many issues configuring eslint in mdx files. The biggest problem for me was that intelisense was not working at all in MDX files so importing and using components was a pain. After trying with many settings that were resolving some problems while creating new ones I decided to leave it as is for now - without eslint working at all for MDX files. If you know how to setup eslint for such use case - please let me know! - jakub@jachowski.dev.