Feature/enable eslint-plugin-mdx

[chenxsan]

We have some mdx files now, and it's likely that we will migrate all .md to .mdx, hence enabling eslint-plugin-mdx should help catching problems.

Thanks to @JounQin, all issues listed below are gone now.

There're some issues at the moment:

1. Those code blocks in .mdx files won't get linted as eslint-plugin-mdx doesn't support it.
2. vscode-mdx extension doesn't work as expected in my test.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/webpack-docs/webpack-js-org/4J62FJC7D7PnziVxqT86xh61jZDP
✅ Preview: https://webpack-js-org-git-fork-chenxsan-feature-enable-eslint-m-43ce20.vercel.app

[montogeek]

and it's likely that we will migrate all .md to .mdx

Why?

[chenxsan]

and it's likely that we will migrate all .md to .mdx

Why?

Because the Badge component might be used in other markdown files. And we're maintaining two different configuration for md and mdx https://github.com/webpack/webpack.js.org/blob/master/webpack.common.js#L57, it's not necessary if mdx works for both cases.

[montogeek]

Because the Badge component might be used in other markdown files. And we're maintaining two different configuration for md and mdx https://github.com/webpack/webpack.js.org/blob/master/webpack.common.js#L57, it's not necessary if mdx works for both cases.

Agree, but we shouldn't blindly switch everything when MDX features are only used in a few files of hundreds.
It will also impact the performance of the build.

[chenxsan]

Because the Badge component might be used in other markdown files. And we're maintaining two different configuration for md and mdx https://github.com/webpack/webpack.js.org/blob/master/webpack.common.js#L57, it's not necessary if mdx works for both cases.

Agree, but we shouldn't blindly switch everything when MDX features are only used in a few files of hundreds.
It will also impact the performance of the build.

Don't worry, I won't migrate all to mdx at once without any specific reason.

[JounQin]

Hi, what do you mean by vscode-mdx extension doesn't work as expected in my test.?

Maybe related to mdx-js/mdx-analyzer#163?

[chenxsan]

Hi, what do you mean by vscode-mdx extension doesn't work as expected in my test.?

Maybe related to mdx-js/vscode-mdx#163?

It won't highlight those errors:

here's a version of md:

[JounQin]

It won't highlight those errors:

Yes, try to add eslint.validate as https://github.com/mdx-js/vscode-mdx/pull/163/files

[chenxsan]

It won't highlight those errors:

Yes, try to add eslint.validate as https://github.com/mdx-js/vscode-mdx/pull/163/files

Cool, did fix the problem.

[chenxsan]

@JounQin I just notice a warning on my local computer:

/Users/sam/Documents/githubRepos/webpack.js.org/src/components/NotificationBar/Notification.mdx
  1:94   warning  `"` can be escaped with `"`, `“`, `"`, `”`  mdx/no-unescaped-entities
  1:95   warning  `>` can be escaped with `>`                                   mdx/no-unescaped-entities
  1:111  warning  `>` can be escaped with `>`                                   mdx/no-unescaped-entities

Here's the content of Notification.mdx:

Webpack 5 has been officially released. Read our <a href="/blog/2020-10-10-webpack-5-release/">announcement</a>. Not ready yet? Read <a href="https://v4.webpack.js.org/">webpack 4 documentation here</a>.

Do you have any idea? I think it's valid syntax to use jsx inside markdown?

[JounQin]

@chenxsan Please report it to eslint-mdx, I can reproduce it. It could be a regression.

You can wrap it into <></> as workaround temporarily. I'll take a look soon.