ESLint 检查 TypeScript 时报 “Unable to resolve path to module ‘xxx’” 错误

TypeScript 社区的静态代码检查工具开始逐渐从 TSLint 过渡到 ESLint 了，等到相关 ESLint 插件把 TSLint 功能都实现了 TSLint 即宣告 Deprecated 1。相关的 ESLint 插件和 parser 在 typescript-eslint 仓库。在迁移过程中并不是那么一帆风顺，比如这次在写 eslint-config-prettify 的时候，就遇到了 eslint-plugin-import 找不到模块而报 Unable to resolve path to module ‘xxx’ 错误。

之所以现在会有这个问题是因为 eslint-plugin-import 原本只支持 ES6 模块，从 README 文档也可以看出默认只支持 .js, .jsx 后缀的这类 JS 社区常见的文件。TypeScript 使用的 .ts 和 .tsx 自然是不支持的，更不用说 import 插件还需要相应的 parser 来解决 TypeScript 解析问题。

最简单最暴力的方式自然是直接去掉这个插件，或者关闭相关 ESLint rules，但 eslint-plugin-import 30+ rules 集合 JS 社区 ES6 多年最佳实践，关闭这个规则实乃下下策。在尝试了 N 种办法之后，第 N + 1 次终于找到了完美解决办法。

TL;DR

使用 https://github.com/alexgorbatchev/eslint-import-resolver-typescript。

eslint-import-resolver-typescript

eslint-import-resolver-typescript 光从名字就可以看出和这个问题极为相关。从项目 README 可以发现，这个 lib 可以在 TypeScript 项目使 eslint-plugin-import 找到正确的 .ts 和 .tsx 文件，也能识别 tsconfig.json 的 path 配置（路径别名 2），甚至 monorepo 这类一个 git 仓库多个项目的工程也支持。

基本原理是 eslint-plugin-import 提供了此类问题的配置入口，eslint-import-resolver-typescript 为 eslint-plugin-import 提供解析 TypeScript 的能力，同样的 Webpack 也有路径别名问题，也有类似 lib 解决这类问题。

使用

安装依赖

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

配置 .eslintrc

js
1{
2  "plugins": ["import"],
3  "rules": {
4    "import/no-unresolved": "error"
5  },
6  "settings": {
7    "import/parsers": {
8      // 使用 TypeScript parser
9      "@typescript-eslint/parser": [".ts", ".tsx"]
10    },
11    "import/resolver": {
12      // 默认使用根目录 tsconfig.json
13      "typescript": {
14        // 从 <roo/>@types 读取类型定义
15        "alwaysTryTypes": true，
16      },
17
18      // 使用指定路径 tsconfig.json， <root>/path/to/folder/tsconfig.json
19      "typescript": {
20        "directory": "./path/to/folder"
21      },
22
23      // monorepos 这类多 tsconfig.json
24
25      // 可以用 glob 这类匹配模式
26      "typescript": {
27        "directory": "./packages/*/tsconfig.json"
28      },
29
30      // 或者数组
31      "typescript": {
32        "directory": [
33          "./packages/module-a/tsconfig.json",
34          "./packages/module-b/tsconfig.json"
35        ]
36      },
37
38      // 也可以混合使用
39      "typescript": {
40        "directory": [
41          "./packages/*/tsconfig.json",
42          "./other-packages/*/tsconfig.json"
43        ]
44      }
45    }
46  }
47}

End

如果不想踩此坑，欢迎使用 eslint-config-prettify，几乎”零“配置，自带 Prettier，支持 TypeScript/ES2019/React 近乎完美的 ESLint 配置。

ESLint 检查 TypeScript 时报 “Unable to resolve path to module ‘xxx’” 错误

TL;DR

eslint-import-resolver-typescript

使用

End

其他文章

electronjs 安装失败问题

TL;DR.css-1g01867{margin-left:4px;line-height:1;}

eslint-import-resolver-typescript

使用

End

其他文章

electronjs 安装失败问题

TL;DR