Compatibility with typescript-eslint rules that require parserServices to be generated

[josefaidt]

Hey folks I'm looking to apply a few @typescript-eslint/* rules to ts and tsx snippets in MDX files. I've gone through a few iterations of an eslint config aimed at addressing this, and while I'm able to lint ts snippets without some of the @typescript-eslint rules, others require "parserServices to be generated".

An example of this is @typescript-eslint/consistent-type-exports. After following the setup instructions for eslint-plugin-mdx and adding this rule I encounter the following error:

Error: Error while loading rule '@typescript-eslint/consistent-type-exports': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.

After digging around a few issues and other discussions I'm able to set up a rule that matches the virtual files with *.mdx/*.ts using overrides, however this begins to emit a different set of errors:

error    Parsing error: ESLint was configured to run on `<tsconfigRootDir>/path/to/index.mdx/4_3.ts` using `parserOptions.project`: /path/to/project-root/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

This error alludes to a misconfiguration in the project's tsconfig.json, though it already includes this (virtual) file:

"include": [
    "next-env.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.mdx",
]

In an effort to resolve this I've also attempted to add **/*.mdx/*.ts to the include array to no avail.

.eslintrc.json

{
  "$schema": "https://json.schemastore.org/eslintrc.json",
  "env": {
    "browser": true,
    "node": true,
    "es2022": true
  },
  "extends": ["eslint:recommended"],
  "overrides": [
    {
      "files": ["*.mdx"],
      "extends": ["plugin:mdx/recommended"],
      "settings": {
        "mdx/code-blocks": true
      },
      "rules": {
        // for mdx shortcodes, and snippets
        "react/jsx-no-undef": ["off"]
      }
    },
    {
      "files": ["*.ts", "**/*.mdx/**.ts"],
      "extends": ["plugin:@typescript-eslint/recommended"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": "./tsconfig.json",
        "extraFileExtensions": [".mdx"]
      },
      "rules": {
        "@typescript-eslint/consistent-type-exports": [
          "error",
          {
            "fixMixedExportsWithInlineTypeSpecifier": false
          }
        ],
        "@typescript-eslint/consistent-type-imports": [
          "error",
          {
            "prefer": "type-imports"
          }
        ]
      }
    },
    {
      "files": ["*.d.ts"],
      "rules": {
        "@typescript-eslint/triple-slash-reference": "off"
      }
    },
    {
      "files": ["*.tsx"],
      "extends": [
        "plugin:react/recommended",
        "plugin:react/jsx-runtime",
        "plugin:react-hooks/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking"
      ],
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint", "prettier"],
      "parserOptions": {
        "project": "./tsconfig.json"
      },
      "rules": {
        "@typescript-eslint/consistent-type-exports": [
          "error",
          {
            "fixMixedExportsWithInlineTypeSpecifier": false
          }
        ],
        "@typescript-eslint/consistent-type-imports": [
          "error",
          {
            "prefer": "type-imports"
          }
        ]
      }
    }
  ]
}

I believe I have this configured correctly, though linting snippets is new to me. Is this plugin compatible with these typescript-eslint rules?

[remcohaszing]

I don't think you can use TypeScript ESLint rules that require parser services with any custom ESLint parsers.

[josefaidt]

That makes sense! One of the lines from the initial error gave me hope and motivated me to dig a bit further 😅

Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.

[GiladShoham]

@josefaidt
Have you eventually solved this error?

error    Parsing error: ESLint was configured to run on `<tsconfigRootDir>/path/to/index.mdx/4_3.ts` using `parserOptions.project`: /path/to/project-root/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

I have the same one but no luck yet..

[josefaidt]

I did not 😞

[SalahAdDin]

It could be related to this issue.

[uriafranko]

any luck for anyone?

[kangju2000]

There is an issue where eslint rules are being applied to TypeScript code blocks within .mdx files. This is because .mdx/.ts files are included in "files": [".ts"]. To resolve this issue, you can modify the configuration as follows:

For eslint versions below 9:

"overrides": [
  {
    "files": ["*.ts"],
+   "excludedFiles": ["*.mdx/**/*.ts"],
    "extends": ["plugin:@typescript-eslint/recommended"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": "./tsconfig.json",
      "extraFileExtensions": [".mdx"]
    },
    // Other rules...
  },
  {
    "files": ["*.tsx"],
+   "excludedFiles": ["*.mdx/**/*.tsx"],
    "extends": [
      "plugin:react/recommended",
      "plugin:react/jsx-runtime",
      "plugin:react-hooks/recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/recommended-requiring-type-checking"
    ],
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint", "prettier"],
    "parserOptions": {
      "project": "./tsconfig.json"
    },
    // Other rules...
  }
]

Here, excludedFiles is used to exclude the application of rules to TypeScript code blocks within .mdx files.

For eslint version 9 and above:

[
  {
    "files": ["*.ts", "*.tsx"],
+   "ignores": ["**/*.mdx/**.ts", "**/*.mdx/**.tsx"]
    // Other settings...
  }
]

Additional Note on Type Checking

For issues related to type checking in .mdx files, there are several potential solutions discussed in this GitHub issue. It's recommended to review these solutions for a more comprehensive approach to handling TypeScript in MDX files.