ESLint+TypeScript校验报Unable to resolve path to module错误如何解决

你项目中使用了路径别名来简化导入路径，webpack/Vite等构建工具和TypeScript已经适配了别名配置，所以项目可以正常运行，但ESLint的import插件未配置别名解析规则，无法识别非相对路径的导入，因此抛出import/no-unresolved错误。

以下是两种常用的适配方案，按需选择即可：

方案1：适配tsconfig路径配置（推荐，TS项目通用） #

如果你的路径别名是在tsconfig.json的paths字段中声明的，直接通过eslint-import-resolver-typescript同步读取tsconfig配置即可：

1. 安装依赖：
   npm install eslint-import-resolver-typescript --save-dev
2. 修改.eslintrc.json的settings配置：

"settings": {
    "import/resolver": {
        "node": {
            "extensions": [
                ".js",
                ".jsx",
                ".ts",
                ".tsx"
            ]
        },
        // 新增TypeScript解析器配置
        "typescript": {
            "alwaysTryTypes": true,
            "project": "./tsconfig.json" // 替换为你的tsconfig实际路径
        }
    }
}

3. 确认tsconfig.json中已正确配置别名，示例配置如下（按你实际目录结构调整）：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "constants/*": ["src/constants/*"],
      "hooks/*": ["src/hooks/*"],
      "shared/*": ["../shared/*"]
    }
  }
}

方案2：直接在ESLint中配置别名路径 #

如果没有使用tsconfig的paths配置，可直接在ESLint配置中声明解析路径：
修改.eslintrc.json的settings配置：

"settings": {
    "import/resolver": {
        "node": {
            "extensions": [
                ".js",
                ".jsx",
                ".ts",
                ".tsx"
            ],
            // 新增路径配置，按你实际目录结构调整
            "paths": ["src", "./"]
        }
    }
}

配置完成后重启ESLint服务（VSCode用户可重启编辑器窗口），重新执行ESLint校验即可消除报错。

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