logo
回到主页

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

Devrsi0n
2019年10月29日

引言

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 上编辑此文

其他文章

前端单测 jest 运行环境 - electron

选择最优的 jest 运行环境

2019年10月25日

electronjs 安装失败问题

解决 electronjs 安装失败问题

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