MDX is the greatest way for developers to author content.

How to format MDX automagically. There is a problem with how prettier tries to format mdx. The solution wooorm uses is remark-cli and remark-mdx.

Lets install it

npm i remark-cli remark-frontmatter remark-mdx

now lets test it on a file

./node_modules/.bin/remark -o -u remark-frontmatter -u "remark-mdx=printWidth:80" ./src/content/issues/introduction-to-the-technonomicon.mdx 

Add the following script to your package.json

"scripts": {
  // ...
  "format": "remark . --output --ext md,mdx -w"
},

Also add this remark config

"remarkConfig": {
  "settings": {
    "bullet": "*", // Use `*` for list item bullets (default)
    // See <https://github.com/remarkjs/remark/tree/main/packages/remark-stringify> for more options.
  },
  "plugins": [
    "remark-preset-lint-consistent", // Check that markdown is consistent.
    "remark-preset-lint-recommended", // Few recommended rules.
    [
      // Generate a table of contents in `## Contents`
      "remark-toc",
      {
        "heading": "contents"
      }
    ]
  ]
}

Now you can just run npm run format whenever you want your files formatted.

Someone reach out if you know how to make this run on save without causing a loop.