feat: support other extensions, detect parsers automatically

new overrides config, can be extended on top level

Author: JounQin

.eslintrc.js

@@ -11,7 +11,11 @@ module.exports = {
       },
     },
   },
-  extends: ['plugin:jest/recommended', '1stg/react'],
+  extends: [
+    'plugin:jest/recommended',
+    '1stg/react',
+    'plugin:@rxts/mdx/recommended',
+  ],
   rules: {
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/array-type': [
@@ -32,7 +36,7 @@ module.exports = {
     },
     {
       files: ['*.mdx'],
-      extends: ['plugin:@rxts/mdx/recommended'],
+      extends: ['plugin:@rxts/mdx/overrides'],
     },
     {
       files: ['*.ts', '*.tsx'],

README.md

@@ -38,10 +38,11 @@ npm i -D @rxts/eslint-plugin-mdx
 
       ```json
       {
+        "extends": ["plugin:@rxts/mdx/recommended"],
         "overrides": [
           {
             "files": ["*.mdx"],
-            "extends": ["plugin:@rxts/mdx/recommended"]
+            "extends": ["plugin:@rxts/mdx/overrides"]
           }
         ]
       }
@@ -51,18 +52,16 @@ npm i -D @rxts/eslint-plugin-mdx
 
       ```json
       {
+        "extends": ["plugin:@rxts/mdx/recommended"],
         "overrides": [
           {
             "files": ["*.mdx"],
-            "parser": "eslint-mdx",
-            "plugins": ["@rxts/mdx"],
+            "globals": {
+              "React": false
+            },
             "rules": {
-              "@rxts/mdx/no-jsx-html-comments": 2,
-              "@rxts/mdx/no-unescaped-entities": 1,
-              "@rxts/mdx/no-unused-expressions": 2,
-              "no-unused-expressions": 0,
-              "react/react-in-jsx-scope": 0,
-              "react/no-unescaped-entities": 0
+              "lines-between-class-members": 0,
+              "react/react-in-jsx-scope": 0
             }
           }
         ]
@@ -75,27 +74,20 @@ npm i -D @rxts/eslint-plugin-mdx
    eslint . --ext js,mdx
    ```
 
-3. Custom parser for ES syntax is also supported, although `babel-eslint` will be detected automatically what means you actually do not need to do this:
+## Parser Options
+
+1. `parser` (`string | Function`): Custom parser for ES syntax is supported, although `@typescript-eslint/parser` or `babel-eslint` will be detected automatically what means you actually do not need do this:
 
    ```json
    {
-     "overrides": [
-       {
-         "files": ["*.mdx"],
-         "extends": ["plugin:@rxts/mdx/recommended"],
-         "parserOptions": {
-           "parser": "babel-eslint"
-         }
-       }
-     ]
+     "extends": ["plugin:@rxts/mdx/recommended"],
+     "parserOptions": {
+       "parser": "babel-eslint"
+     }
    }
    ```
 
-## FAQ
-
-### Why I need to use `overrides`?
-
-This parser/plugin should only affects `.mdx` files, and `overrides` in `shared configuration` is still [not extendable](https://github.com/eslint/eslint/issues/12032) for now, of course you can manually config it on your own risk.
+2. `extensions` (`string | string[]`): `eslint-mdx` will only resolve `.mdx` files by default, files with other extensions will be resolved by the `parser` option. If you want to resolve other extensions as like `.mdx`, you can use this option.
 
 ## Rules
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-mdx",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "ESLint Parser/Plugin for MDX",
   "repository": "[email protected]:rx-ts/eslint-plugin-mdx.git",
   "author": "JounQin <[email protected]>",

packages/eslint-mdx/src/parser.ts

@@ -1,6 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/no-triple-slash-reference
 /// <reference path="../typings.d.ts" />
 
+import path from 'path'
+
 import { parse as esParse } from 'espree'
 import remarkMdx from 'remark-mdx'
 import remarkParse from 'remark-parse'
@@ -13,6 +15,7 @@ import {
 } from './helper'
 import { isComment } from './regexp'
 import { traverse } from './traverse'
+import { ParserOptions } from './types'
 
 import { AST, Linter } from 'eslint'
 import { Parent, Node } from 'unist'
@@ -27,11 +30,12 @@ export const mdxProcessor = unified()
   .use(remarkMdx)
   .freeze()
 
-export const parseForESLint = (
-  code: string,
-  options: Linter.ParserOptions = {},
-) => {
-  let { parser } = options
+export const DEFAULT_EXTENSIONS = ['.mdx']
+
+export const FALLBACK_PARSERS = ['@typescript-eslint/parser', 'babel-eslint']
+
+export const parseForESLint = (code: string, options: ParserOptions = {}) => {
+  let { extensions, parser } = options
 
   if (parser) {
     if (typeof parser === 'string') {
@@ -48,16 +52,32 @@ export const parseForESLint = (
       )
     }
   } else {
-    try {
-      // try to load babel-eslint automatically
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const babelEslint = require('babel-eslint')
-      parser = babelEslint.parseForESLint || babelEslint.parse
-    } catch (e) {
+    // try to load FALLBACK_PARSERS automatically
+    for (const fallback of FALLBACK_PARSERS) {
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const fallbackParser = require(fallback)
+        parser = fallbackParser.parseForESLint || fallbackParser.parse
+        break
+      } catch (e) {}
+    }
+
+    if (typeof parser !== 'function') {
       parser = esParse
     }
   }
 
+  if (
+    !DEFAULT_EXTENSIONS.concat(extensions || []).includes(
+      path.extname(options.filePath),
+    )
+  ) {
+    const program = parser(code, options)
+    return (program.ast
+      ? program
+      : { ast: program }) as Linter.ESLintParseResult
+  }
+
   const root = mdxProcessor.parse(code) as Parent
 
   const ast: AST.Program = {

packages/eslint-mdx/src/types.ts

@@ -1,5 +1,10 @@
+import { Linter } from 'eslint'
 import { Node, Parent, Point } from 'unist'
 
+export interface ParserOptions extends Linter.ParserOptions {
+  extensions?: string | string[]
+}
+
 export type Traverser = (node: Node, parent?: Parent) => void
 
 export interface TraverseOptions {

packages/eslint-plugin-mdx/src/configs/index.ts

@@ -1,2 +1,3 @@
 export * from './base'
+export * from './overrides'
 export * from './recommended'

packages/eslint-plugin-mdx/src/configs/overrides.ts

@@ -0,0 +1,9 @@
+export const overrides = {
+  globals: {
+    React: false,
+  },
+  rules: {
+    'lines-between-class-members': 0, // See https://github.com/mdx-js/mdx/issues/195
+    'react/react-in-jsx-scope': 0,
+  },
+}

packages/eslint-plugin-mdx/src/configs/recommended.ts

@@ -8,6 +8,5 @@ export const recommended = {
     '@rxts/mdx/no-unused-expressions': 2,
     'no-unused-expressions': 0,
     'react/no-unescaped-entities': 0,
-    'react/react-in-jsx-scope': 0,
   },
 }