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

Question

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

{
 //.....

 "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”的路径。（导入/未解析）

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

Answer 1

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

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