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

Devrsi0n ▴ 
更新于 

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-typescripteslint-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 配置。

在 GitHub 上编辑此文

其他文章

electronjs 安装失败问题

解决 electronjs 安装失败问题

2019-10-19

jest 测试 canvas

jest 测试 canvas 小技巧

2019-10-19
© 2019 – 2020 devrsi0n
Link to $https://bit.ly/2NcAZQZLink to $https://github.com/devrsi0nLink to $https://weibo.com/qianmofeiyu