refactor(eslint-config): utilise multi-target patterns for shared JSX/MDX rules

Author: rozsival

packages/eslint-config/src/react/config.ts

@@ -13,30 +13,25 @@ import * as rules from './rules/index.js';
 
 export const config = [
   {
-    files: ['**/*.tsx'],
-    plugins: {
-      formatjs,
-      react,
-      'react-hooks': reactHooks,
-    },
-    languageOptions: {
-      parserOptions: {
-        ecmaFeatures: { jsx: true },
-      },
-      globals: globals.browser,
-    },
+    files: ['**/*.{mdx,tsx}'],
+    plugins: { react },
     rules: {
-      ...baseRules.typescript,
       ...react.configs.flat.recommended.rules,
       ...react.configs.flat['jsx-runtime'].rules,
       ...rules.common,
-      ...rules.formatjs,
-      ...rules.hooks,
       ...rules.jsx,
     },
-    settings: {
-      react: { version: 'detect' },
+    settings: { react: { version: 'detect' } },
+  },
+  { files: ['**/*.{ts,tsx}'], plugins: { formatjs }, rules: { ...baseRules.typescript, ...rules.formatjs } },
+  {
+    files: ['**/*.{mdx,ts,tsx}'],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
     },
+    plugins: { 'react-hooks': reactHooks },
+    rules: rules.hooks,
   },
   {
     files: [
@@ -74,10 +69,13 @@ export const config = [
   },
   {
     files: ['**/*.mdx'],
-    plugins: {
-      mdx,
-    },
+    languageOptions: mdx.configs.flat.languageOptions as Linter.LanguageOptions,
+    plugins: { mdx },
     processor: mdx.createRemarkProcessor({ lintCodeBlocks: true }),
-    rules: { ...mdx.configs.flat.rules, ...mdx.configs.flatCodeBlocks.rules, ...rules.mdx },
+    rules: { ...mdx.configs.flat.rules, ...rules.mdx },
+  },
+  {
+    ...mdx.configs.flatCodeBlocks,
+    files: ['**/*.mdx/*'],
   },
 ] satisfies Linter.Config[];

packages/eslint-config/src/react/rules/mdx.ts

@@ -1,7 +1,9 @@
 import type { Linter } from 'eslint';
 
 export const mdx: Linter.RulesRecord = {
-  'react/jsx-filename-extension': 'off', // Allow .mdx files to contain JSX
-  'react/jsx-sort-props': 'off', // Props sorting with MDX parser does not work as expected (props are sorted but values are not)
-  'react/self-closing-comp': 'off', // MDX parser wrongly converts some non-void elements to self-closing and removes their children
+  'react/jsx-filename-extension': [
+    // Allow JSX in MDX files
+    'error',
+    { allow: 'as-needed', extensions: ['.mdx'] },
+  ],
 };