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+P
或 Cmd+Shift+P
、键入 restart
,然后选择命令来重新启动 TypeScript 服务器:TypeScript: Restart TS server
我正在尝试在我的 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+P
或 Cmd+Shift+P
、键入 restart
,然后选择命令来重新启动 TypeScript 服务器:TypeScript: Restart TS server