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

Question

我正在尝试在我的 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 层的文件夹，如果能更清晰地查看我的导入内容会很好。有办法吗？

Answer 1

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

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

TS Config nested alias for absolute path not working

reactjs

typescript

vite