TS Config 绝对路径的嵌套别名不起作用

TS Config nested alias for absolute path not working

我正在尝试在我的 tsconfig.json 中为与 Vite 捆绑在一起的 React 应用程序设置路径别名。这是我的相关部分 tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    ...
    "paths": {
      "*": ["src/*", "node_modules/*"],
      "components/*": ["src/components/*"],
      "containers/*": ["src/containers/*"],
      "pages/*": ["src/constants/*"],
      "store/*": ["src/store/*"],
      "types/*": ["src/types/*"],
      "NestedFolder/*": [
        "src/components/NestedFolder/*"
      ],
    }
  },
  "include": ["src/**/*", "*"]
}

唯一的问题是 NestedFolder。当我以这种方式导入时,一切正常:

import { ComponentName } from "components/NestedFolder/types";

但是,嵌套别名失败了:

import { ComponentName } from "NestedFolder/types";

// error 
EslintPluginImportResolveError: typescript with invalid interface loaded as resolver
Occurred while linting .../src/components/NestedFolder/canvas/index.ts:1
Rule: "import/namespace"

// error on hover in VS Code
Unable to resolve path to module 'NestedFolder/types'.eslintimport/no-unresolved

我想做嵌套组件,因为我有几个嵌套 3-4 层的文件夹,如果能更清晰地查看我的导入内容会很好。有办法吗?

您需要安装 vite-tsconfig-paths plugin 才能使用 TypeScript 和 Vite 设置路径别名。 如果没有任何变化并且您正在使用 VSCode,请确保通过按 Ctrl+Shift+PCmd+Shift+P、键入 restart,然后选择命令来重新启动 TypeScript 服务器:TypeScript: Restart TS server