eslint: Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser

[astepforward]

Hello

I've found your solution described in a ticket here: https://github.com/vuejs/vue-eslint-parser/issues/49#issuecomment-806852933 I've tried it - it works like a charm, thank you.

But I came across an issue when trying to update my eslint configuration at certain point. I tried to extend it with plugin:@typescript-eslint/recommended-requiring-type-checking, so I added a reference to my tsconfig.json file and set tsconfigRootDir. When I run build (I use eslint plugin for webpack) there is the following error:

Simply adding .tsvue files to tsconfig.json did not help.

At the same time, type-aware rules work in a separate .ts file to which I refence in my another .vue file.

My current configuration: .eslintrc.json:

{
    "root": true,
    "env": {
        "browser": true,
        "es2021": true
    },
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "extraFileExtensions": [".vue"],
        "ecmaVersion": 2021,
        "sourceType": "module",
        "ecmaFeatures": {
            "impliedStrict": true
        }
    },
    "plugins": [
        "vue",
        "tsvue"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
    "rules": {
        "eqeqeq": ["error", "always", {
            "null": "ignore"
        }],
        "vue/html-indent": ["warn", 4],
        "vue/component-tags-order": ["warn", {
            "order": ["template", "style", "script"]
        }],
        "vue/valid-v-slot": ["error", {
            "allowModifiers": true
        }]
    },

    "overrides": [
        {
            "files": ["*.tsvue", "*.ts"],
            "parser": "vue-eslint-parser",
            "parserOptions": {
                "parser": "@typescript-eslint/parser",
                "tsconfigRootDir": ".",
                "project": "./tsconfig.json",
                "extraFileExtensions": [".tsvue"]
            },
            "plugins": [
                "@typescript-eslint"
            ],
            "extends": [
                "plugin:@typescript-eslint/recommended",
                "plugin:@typescript-eslint/recommended-requiring-type-checking"
            ],
            "rules": {
                "@typescript-eslint/explicit-function-return-type": "warn",
                "@typescript-eslint/no-unnecessary-type-assertion": "warn",
                "@typescript-eslint/no-non-null-assertion": "error"
            }
        }
    ]
}

.eslintignore: webpack

.tsconfig.json:

{
    "extends": "./tsconfig-checks.json",
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "experimentalDecorators": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "include": [
        "./src", 
        "./vue/types/*",
        "./vuetify/types/*",
        "./vuetify/plugins/*"
    ]
}

tsconfig-checks.json:

{
    "compilerOptions": {
        "noImplicitAny": true,
        "strictNullChecks": true,
        "alwaysStrict": true,
        "strictPropertyInitialization": true,
        "strictFunctionTypes": true,
        "noImplicitThis": true,
        "strictBindCallApply": true,
        "useUnknownInCatchVariables": true,

        "noPropertyAccessFromIndexSignature": true,
        "noUncheckedIndexedAccess": true,
        "exactOptionalPropertyTypes": true,

        "noImplicitReturns": true
    }
}

webpack.base.js:

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  ...
  plugins: [
        ...
        new ESLintPlugin({
            extensions: ['js', 'ts', 'vue', 'tsvue']
        }),
       ...
  ]
  ...
};

Changing .eslintrc.json to .eslintrc.js and setting tsconfigRootDir value to __dirname is not helping as well.

If any suggestions, that'd be much appreciated. Thank you

[mjeanroy]

Hi @astepforward, I'm curious, can you share a repository where I can reproduce your issue?

[larvanitis]

Try these two things (I needed both).

(1) Set the eslint project

// .eslintrc.js
//...

parserOptions: {
  //...

  project: './tsconfig.eslint.json', // you can use './tsconfig.json', but see (2)
  tsconfigRootDir: __dirname,

  //...
},

//...

(2) Create an eslint specific tsconfig.

// tsconfig.eslint.json
// used only by typescript-eslint, to include all files to be checked
// for accepted patterns, see https://www.typescriptlang.org/tsconfig#include
{
  "extends": "./tsconfig.json",
  "include": [
    // all app scripts - these are normally picked up when actually building
    "src/**/*", // all *.{js,jsx,ts,tsx,d.ts} files

    // include vue files - I think this is the important part
    "src/**/*.vue"
  ]
}

I hope this helps.

[Andrew-Mackay]

I appreciate this was created a very long time ago but @astepforward did you ever find a solution for this? :sweat_smile:

Hi @astepforward, I'm curious, can you share a repository where I can reproduce your issue?

@mjeanroy if you are still interested, I have forked this repository and added an example of the issue (pnpm run lint:require-type-checking)

Error message:

error: Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src/MyComponentTs.vue/0_/.../eslint-plugin-tsvue-sample/app/src/MyComponentTs.tsvue.
The file must be included in at least one of the projects provided at src/MyComponentTs.vue: