tsconfig's path parameter and ESLint

Question

I've been setting up the paths option in my tsconfig.json file. So far everything works fine. I can run my tests, and I can execute the program as usual. My only problem is, that ESLint does not find the modules that are accessed with one of the paths defined in tsconfig.json.

Here are all of the files that are related to the problem:

tsconfig.json:

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "allowJs": true,
        "sourceMap": true,
        "outDir": "./dist",
        "rootDir": "./",
        "strict": true,
        "esModuleInterop": true,
        "declaration": true,
        "resolveJsonModule": true,
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"]
        }
    },
    "include": ["src/**/*", "test/**/*", "index.ts"]
}

tsconfig.eslint.json:

{
    "extends": "./tsconfig.json",
    "include": ["src/**/*", "test/**/*", "index.ts", ".eslintrc.js"]
}

.eslintrc.js:

{
    root: true,
    env: {
        browser: true,
        es6: true,
        node: true
    },
    extends: ['plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: ['tsconfig.eslint.json'],
        sourceType: 'module'
    },
    settings: {
        'import/resolver': {
            typescript: {}
        }
    },
    plugins: ['@typescript-eslint', 'import', 'prefer-arrow'],
    rules: {...}
}

Am am using the package eslint-import-resolver-typescript.

Now, if I try to import the file './src/test.ts' into './index.ts' with the path '@/test', then ESLint will not be able to resolve that import (although TypeScript resolves it just fine).

I've mostly copied my current solution from here, because I thought the person who asked that problem had the same problem that I had, but my setup still does not work.

I am in an NodeJS environment by the way.

EDIT: I've also tried using the package eslint-import-resolver-alias. This only helped partially. I could get rid of the 'import/no-unresolved' errors, but whenever I call an imported function, I get '@typescript-eslint/no-unsafe-call' because apparently, ESLint does not find the types for the imported files and thusly gives everything the type any.

koral koral · Accepted Answer · 2020-08-25T07:51:33

Could you try adding the tsconfigRootDir to your .eslintrc.js? It has worked for me.

parserOptions: {
    tsconfigRootDir: __dirname,
}

tsconfig's path parameter and ESLint

2 Answers