ESLint添加import/no-restricted-paths规则报typescript resolver接口无效错误

报错描述 #

添加import/no-restricted-paths规则后触发错误：
Resolve Error: typescript with invalid interface loaded as resolver : import-no-restricted-paths

根因分析 #

该错误由eslint-import-resolver-typescript解析器的配置项与安装版本不匹配导致：

1. 你当前.eslintrc中import/resolver.typescript使用的paths配置项仅在v3及以上版本的解析器中支持，如果你安装的是v2及更低版本，会因为无法识别该配置触发接口校验失败
2. 部分旧版eslint-plugin-import与新版解析器存在兼容冲突

修复操作 #

• 首先更新所有相关依赖到兼容版本：

npm i eslint-plugin-import eslint-import-resolver-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

• 修改.eslintrc的resolver配置，将paths字段替换为适配全版本的project字段：

settings: {
    "import/parsers": {
        "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
        "typescript": {
            project: "./tsconfig.json", // 替换原有paths字段
            alwaysTryTypes: true
        }
    },
}

• 若修改后仍报错，可将tsconfig路径改为绝对路径避免相对路径识别错误：

const path = require('path')
module.exports = {
    // 其余配置保持不变
    settings: {
        "import/resolver": {
            "typescript": {
                project: path.resolve(__dirname, './tsconfig.json'),
                alwaysTryTypes: true
            }
        }
    }
}

• 所有配置修改完成后，重启IDE的ESLint服务即可生效。

相关配置参考 #

tsconfig.json #

{
    "include": [
        "./src/**/*",
        "./generated/**/*"
    ],
    "compilerOptions": {
        "resolveJsonModule": true,
        "target": "es5",
        "module": "esnext",
        "moduleResolution": "node",
        "lib": [
            "dom",
            "es6"
        ],
        "downlevelIteration": true,
        "jsx": "react",
        "declaration": false,
        "sourceMap": true,
        "baseUrl": "src",
        "outDir": "./dist/js",
        "paths": {
            "@generated/*": ["../generated/*"],
            "api": ["lib/api"],
            "api/*": ["lib/api/*"],
            "asset/*": ["lib/asset/*"],
            "base/*": ["lib/base/*"]
        },
        "noImplicitAny": false,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "forceConsistentCasingInFileNames": true,
        "esModuleInterop": true,
        "isolatedModules": true
    }
}

.eslintrc.js #

module.exports = {
    env: {
        browser: true
    },
    settings: {
        "import/parsers": {
            "@typescript-eslint/parser": [".ts", ".tsx"]
        },
        "import/resolver": {
            "typescript": {
                project: "./tsconfig.json",
                alwaysTryTypes: true
            }
        },
    },
    parser: "@typescript-eslint/parser",
    parserOptions: {
        tsconfigRootDir: ".",
        sourceType: "module",
        project: "./tsconfig.json"
    },
    extends: [
        "plugin:import/recommended",
        "plugin:import/typescript"
    ],
    plugins: [
        "@typescript-eslint",
        "import"
    ],
    overrides: [
        {
            files: [
                "src/_migration/**"
            ],
            rules: {
                "import/no-restricted-paths": [
                    "error",
                    {
                        basePath: "./src",
                        zones: [
                            { target: "./_migration", from: "./", except: ['./_migration'] }
                        ],
                    },
                ]
            }
        },
    ],
    rules: {
        "import/no-unresolved": "off",
        "@typescript-eslint/typedef": [
            "error",
            {
                parameter: true
            }
        ]
    }
};

内容的提问来源于stack exchange，提问作者hendrixchord