eslint-mdx - how to lint/parse Markdown (.md) files with same rules as MDX?

[TristanPeers]

Hi

We use gatsby-plugin-mdx to parse both .mdx and .md.

Everything was working great until we moved to MDXv2. Now if there are any un-escaped braces in either .md or .mdx the build breaks. As our site is a technical docs site, many markdown pages had {variable-this} and {variable-that} in them. I have been through and updated existing markdown/mdx but we need to stop users adding new braces which are not escaped.

So we really need a linter to make sure every brace is escaped before the change is pushed live.

If I have two test files with un-escaped braces, I can get the linter to properly detect the issue in mdx, just not md:

// test.mdx
---
title: "Test MDX"
---

# Test MDX

{test}

$ eslint src/pages/test.mdx

/Users/tristan.peers/tmp/mdx2_gatsby5/site/src/pages/test.mdx
  7:2  error  Expected an assignment or function call and instead saw an expression  no-unused-expressions

✖ 1 problem (1 error, 0 warnings)

If I do the same with markdown, we get nothing back ie no issues/errors:

// test.md
---
title: "Test MD"
---

# Test MD

{test}

$ eslint src/pages/test.md

This is our eslint config, I've tried to make the markdown (.md) files be treated exactly like mdx but this clearly doesn't work:

// .eslintrc.js
module.exports = {
  globals: {
    __PATH_PREFIX__: true,
  },
  extends: [`react-app`, "plugin:mdx/recommended"],
  settings: {
    react: {
      version: "detect",
    },
    "mdx/code-blocks": true,
    "mdx/language-mapper": {},
  },
  rules: {
    "react/jsx-no-undef": "off",
    "no-undef": "off",
    "jsx-a11y/anchor-has-content": "off",
    "jsx-a11y/heading-has-content": "off",
    "jsx-a11y/iframe-has-title": "off",
  },
  overrides: [
    {
      files: ["*.md"],
      parser: "eslint-mdx",
      parserOptions: {
        extensions: "[*.md]",
      },
      extends: "plugin:mdx/recommended",
      settings: {
        "mdx/code-blocks": true,
        "mdx/language-mapper": {},
      },
    },
  ],
};

Previous discussion with Gatsby team is here

Anybody know how to solve this? Thanks

[wooorm]

a) MDX itself only applies the MDX format to .mdx files normally, and the markdown format to .md files. That is to say, you should not get errors on .md files, as they should be treated as markdown.
This is very important, there is a difference between markdown and MDX, and you should use extensions to differentiate (and so should gatsby, normally)
b) I recommend using markdown code for programming code, such as variables: `{variable}`
c) If you only care about whether MDX files are valid, you can use remark-cli with remark-mdx, and run remark . -e mdx -u remark-mdx -qf. That would fail if there are syntax errors. You could use -e md,mdx to look for both markdown and MDX files and treat them as MDX