Typescript:使用导入时 Intellisense 找不到绝对路径

Question

我在 VS Code 自动完成和警告消息(红色波浪线)方面遇到问题。在 typescript 文件中指定导入的绝对路径时，Intellisense 给我错误警告。我使用 Tauri 和 Svelte 作为框架。

我制作了这些简单的文件来调试问题:

src/my_app.ts:

import { my_value } from "@folder/my_test_file"

src/my/test/folder/my_test_file.ts:

export let my_value = 8;

tsconfig.json:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "moduleResolution": "Node",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    /**
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable checkJs if you'd like to use dynamic types in JS.
     * Note that setting allowJs false does not prevent the use
     * of JS in `.svelte` files.
     */
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true,
    "baseUrl": "./",
    "paths": {

      "@folder/*": [
        "src/my/test/folder/*"
      ],

      "@src/*": [
        "src/*"
      ]
    },

  },
  "include": ["src/**/*.d.ts", "src/**/*.{svelte,ts,js}"],
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

我的目录:

package.json:

{
  "name": "piping-system-solver",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "tauri": "tauri"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
    "@tauri-apps/cli": "^1.0.0-rc.13",
    "@tsconfig/svelte": "^2.0.1",
    "svelte": "^3.44.0",
    "svelte-check": "^2.2.7",
    "svelte-preprocess": "^4.9.8",
    "tslib": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.9"
  },
  "dependencies": {
    "@tauri-apps/api": "^1.0.0-rc.6",
    "autoprefixer": "^10.4.7",
    "module-alias": "^2.2.2",
    "postcss": "^8.4.14",
    "split-grid": "^1.0.11",
    "svelte-drag-and-drop-actions": "^1.0.0",
    "tailwindcss": "^3.1.0",
    "vite-tsconfig-paths": "^3.5.0"
  }
}

以下扩展的版本:

• 适用于 VS Code 的 Svelte:v106.1.0
• TypeScript 英雄:v3.0.0

在文件 src/my_app.ts 中(在我所有其他 .ts 文件中也是类似的)，typescript 在上面的代码行中不断发出以下警告:

"Cannot find module '@folder/my_test_file' or its corresponding type declarations."

...尽管代码可以编译并运行。这也会影响键入绝对路径时的代码完成。虽然在我的 .svelte 文件中指定绝对路径时，不会出现此警告，并且代码完成有效。

以下是所有可提及的试验、想法和观察的列表:

1. 相对路径适用于编译和 Intellisenses 建议。
2. 所有 svelte 文件都可以通过指定绝对路径完美地工作(import { my_value } from "@folder/my_test_file" 在 .svelte 文件中没有错误，并且 Intellisense 建议子文件夹)。
3. 我试过“重启 TS 服务器”，但没有用。
4. 我看过this question其中有很多关于如何解决这个问题的建议，但没有一个对我有用。
5. 我已经安装了 Typescript Hero。
6. 我已经从 this link 安装了 vite-tsconfig-paths|
7. 我观察到 Intellisense 警告和建议会根据 tsconfig.ts 文件中的更改动态更新，而实际程序仅在关闭和重新打开窗口时更新 (npm run tauri dev)。
8. 指定绝对路径在 .svelte 文件中有效，即使您删除了 tsconfig.json 中的 "paths" 配置，也没有留下任何路径别名。它以 "src" 开始工作(例如:"src/some/path/file")。好像路径别名 "src" 内置在 svelte 中？
9. (新)我现在注意到，在 .svelte 文件中，在开始双引号时会建议更多内容(.js 文件、.ts 文件、.json 文件，其中还有文件夹)，而在我的 . ts 文件，仅建议模块(根据 this 建议前面的图像)。

我也很想知道，这是否是 Tauri、Svelte 和 Typescript 中的错误。

Answer 1

这不是错误。看来你的配置有问题。工作步骤:

1. 将“src/*.ts”添加到tsconfig.json 中的include 数组。
2. 为 vite.config.ts 添加别名:'@folder/': fileURLToPath(new URL('./src/my/test/folder/', import.meta.url)) (或者你可以安装 vite-tsconfig-paths 插件并添加到你的 vite.config.ts 中，它会根据你的 tsconfig 的内容为你执行此步骤)。

即vite.config.ts 应该是这样的:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@folder/': fileURLToPath(new URL('./src/my/test/folder/', import.meta.url))
    },
  },
});

使用您提供的 tsconfig.json 和 package.json 的最小工作示例项目:https://stackblitz.com/edit/github-xg6eei?file=README.md .请注意，我不能排除您的本地配置存在其他问题( typescript 项目配置很复杂)，但您可以从上面链接的示例工作项目配置向后工作。