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.