chore: add eslint check for mdx (vercel#74009)

## Why?

MDX changes are not getting properly linted, causing upstream issues.

When trying to push this incorrect change:

```
<Image
  alt="Route segments for dynamic MDX components"
  srcLight="/docs/light/mdx-files.png"
  srcDark="/docs/dark/mdx-files.png"
  width="1600"
  height="849"
>
```

![CleanShot 2024-12-16 at 16 14 00@2x](https://github.com/user-attachments/assets/bac31213-3996-4d56-ba35-be895c401671)

.eslintrc.json

@@ -225,6 +225,15 @@
         ],
         "@typescript-eslint/no-import-type-side-effects": "error"
       }
+    },
+    {
+      "files": ["*.mdx"],
+      "extends": ["plugin:mdx/recommended"],
+      "parser": "eslint-mdx",
+      "rules": {
+        "react/jsx-no-undef": "off",
+        "react/self-closing-comp": "error"
+      }
     }
   ],
   "rules": {

lint-staged.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-  '*.{js,jsx,mjs,ts,tsx,mts}': [
+  '*.{js,jsx,mjs,ts,tsx,mts,mdx}': [
     'prettier --with-node-modules --ignore-path .prettierignore --write',
     'cross-env ESLINT_USE_FLAT_CONFIG=false eslint --config .eslintrc.json --fix',
   ],
-  '*.{json,md,mdx,css,html,yml,yaml,scss}': [
+  '*.{json,md,css,html,yml,yaml,scss}': [
     'prettier --with-node-modules --ignore-path .prettierignore --write',
   ],
   '*.rs': ['cargo fmt --'],

package.json

@@ -150,6 +150,7 @@
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jest": "27.6.3",
     "eslint-plugin-jsdoc": "48.0.4",
+    "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-v8": "npm:eslint@^8.57.0",