Mdx: Linting for mdx?

[transitive-bullshit]

MDX is definitely awesome 😄

For a React design system project, I'm currently using a split of .md and .js files for functionality across many components that MDX would clearly simplify. My biggest hesitation to convert them, however, is is that it's really useful to have default eslint linting of the normal js / jsx files, both within my team's local editors and within CI.

So my question is what is the status of linting mdx files?

There seems to be some work going on within remark here, but it seems pretty far from fulfilling any aspect of linting mdx files in general.

On a related note, how are other people who're using mdx solving this issue?

Thanks!

[silvenon]

I'm trying to understand what that PR you linked is about, could you help me break it down?

The problem is that, unlike JSX, MDX isn't being parsed by Babel, so I'm not sure how to approach this problem, we've mentioned this in #232 as well.

I really want this too, but I think we'll have to be very creative to solve it.

On a related note, how are other people who're using mdx solving this issue?

We aren't. 😕

[timneutkens]

On a related note though, prettier supports mdx 😌

[functionalStoic]

Do either of these projects seem like a viable starting place?

https://github.com/DavidAnson/markdownlint
https://github.com/DavidAnson/vscode-markdownlint

[silvenon]

This issue is about linting JSX part of MDX with ESLint, and markdownlint lints Markdown. It would be ideal to be able to lint both down the road, but I don't think markdownlint will be the right tool for the job, it should be a collection of remark linters.

[functionalStoic]

Ahh. Hadn't come across it. Clearly a better option!

[azz]

I just started working on eslint-plugin-mdx which lets you lint the JSX and imports from MDX files with ESLint.

[transitive-bullshit]

This seems to be exactly that I (and presumably others) have been looking for -- thanks a ton @azz! I love how it should seamlessly integrate with existing JS linting workflows.

A few follow-up questions:

1. If I'm understanding correctly, eslint-plugin-mdx will lint only the js/jsx/import/export portions of mdx files concatenated together as though they were normal js files only with the react/react-in-jsx-scope rule disabled. Is that understanding accurate?
2. Is there any follow-up work to be done here? Can we effectively resolve this issue as closed?

Thanks again!

[azz]

1. 💯 Correct
2. Not sure, I think it's best to use separate tools to lint the markdown part vs js parts, so ESLint + markdownlint. I'm not sure how well markdownlint supports mdx?

[transitive-bullshit]

Not sure, I think it's best to use separate tools to lint the markdown part vs js parts, so ESLint + markdownlint. I'm not sure how well markdownlint supports mdx?

Wouldn't we just recommend remark over markdownlint since mdx is already using remark under the hood? tbh, I'm not sure what, if any substantive differences exist between the two markdown linters, though I'm much more familiar with the unified / remark ecosystem.

Eslint linting for the JS portions of mdx files is exactly what i was looking for and imho the 95% linting use case, so I'll close this issue. For future internet wanderers, feel free to open another issue that discusses general linting of mdx files that would also operate on the markdown portions.

Thanks!

[silvenon]

@azz awesome for creating eslint-plugin-mdx! 🎉 Feel free to submit a PR to this repo to add eslint-plugin-mdx to the docs.

[silvenon]

My bad, I see that you did! ⭐️