Eslint + typescript 路径别名 - 无法解析模块的路径

Posted 2023-03-07

【中文标题】Eslint + typescript 路径别名 - 无法解析模块的路径

【英文标题】：Eslint + typescript paths aliasing - Unable to resolve path to module

【发布时间】：2022-01-15 05:50:14

【问题描述】：

我为路径添加打字稿配置：

 //.....

 "moduleResolution": "node",

  "baseUrl": "app",
  "paths": 
  "@app/*": ["*"],
  "@folder/*": ["folder/*"],

  //Other paths
,

为 webpack 添加配置：

  resolve: 
  extensions: [".tsx", ".ts", ".js", ".jsx", ".css", ".json"],
  alias: 
    "@app":path.resolve(__dirname + "../", "app"),
    "@services":path.resolve(__dirname + "../app", "folder")
  ,
  modules: [
    "node_modules", path.resolve(process.cwd(), "app")
  ],
  plugins: [
    new TsConfigPathsPlugin(
      configFile: "../tsconfig.json"
    ),
  ],
,

这是我的 .eslint 文件：

"settings": 
"import/resolver": 
  "node": 
    "paths": [
      "app"
    ],
    "extensions": [
      ".ts",
      ".tsx",
      ".jest.tsx",
      ".d.ts"
    ]
  

之后我尝试像这样导入一些东西：

import component from "@folder/component";

一切都组装好了，编译器不会产生错误 但我在 eslint 中遇到错误：

ESLint：无法解析模块“@folder/component”的路径。（import/no-unresolved）

第三天我一直在努力解决这个问题 客户不想安装额外的插件 非常感谢您的帮助！

【参考方案1】：

node 解析器不理解 TypeScript paths。所以它专门寻找一个名为@folder/component 的节点模块——它不存在。

您可以为插件使用 typescript 解析器： https://www.npmjs.com/package/eslint-import-resolver-typescript

【讨论】：

谢谢，它对我有用:)