Website-Suche

Typescript: Intellisense kann den absoluten Pfad bei Verwendung von Imports nicht finden

Ich habe Probleme mit der Autovervollständigung von VS Code und Warnmeldungen (rote wellige Linien). Intellisense gibt mir falsche Warnungen, wenn ich absolute Pfade für Importe in TypeScript-Dateien angebe. Ich benutze Tauri und Svelte als Framework.

Ich habe diese einfachen Dateien zum Debuggen des Problems erstellt:

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" }]
}

Mein Verzeichnis:

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"
  }
}

Die Version der folgenden Erweiterungen:

  • Svelte für VS Code: v106.1.0
  • TypeScript Hero: v3.0.0

In der Datei src/my_app.ts (und ähnlich in all meinen anderen .ts-Dateien) warnt Typescript weiterhin mit der folgenden Meldung über die obige Codezeile:

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

...obwohl der Code kompiliert und funktioniert. Dies betrifft auch die Codevervollständigung beim Eingeben absoluter Pfade. Wenn jedoch absolute Pfade innerhalb meiner .svelte-Dateien angegeben werden, erscheint diese Warnung nicht und die Codevervollständigung funktioniert.

Hier ist eine Liste aller erwähnenswerten Versuche, Gedanken und Beobachtungen:

  1. Relative Pfade funktionieren, sowohl beim Kompilieren als auch bei den Intellisense-Vorschlägen.
  2. Alle Svelte-Dateien funktionieren einwandfrei, wenn absolute Pfade angegeben werden (import { my_value } from "@folder/my_test_file" gibt keinen Fehler in .svelte-Dateien, und Intellisense schlägt Unterordner vor).
  3. Ich habe "TS-Server neu starten" versucht, aber es hilft nicht.
  4. Ich habe mir diese Frage angesehen, die viele Vorschläge enthält, wie man dies lösen kann, aber keiner von ihnen funktioniert für mich.
  5. Ich habe Typescript Hero installiert.
  6. Ich habe vite-tsconfig-paths von diesem Link installiert
  7. Ich habe beobachtet, dass Intellisense-Warnungen und Vorschläge sich dynamisch entsprechend den Änderungen in der tsconfig.ts-Datei aktualisieren, während das eigentliche Programm nur aktualisiert wird, wenn man das Fenster schließt und wieder öffnet (npm run tauri dev).
  8. Das Angeben von absoluten Pfaden funktioniert in .svelte-Dateien, selbst wenn Sie die "paths"-Konfiguration in tsconfig.json entfernen und keine Pfadaliase hinterlassen. Es funktioniert, indem man mit "src" beginnt (Beispiel: "src/some/path/file"). Es scheint, dass der Pfadalias "src" in Svelte eingebaut ist?
  9. (neu) Ich habe jetzt bemerkt, dass in .svelte-Dateien mehr Dinge vorgeschlagen werden, wenn man doppelte Anführungszeichen startet (.js-Dateien, .ts-Dateien, .json-Dateien, darunter auch Ordner), während in meinen .ts-Dateien nur Module vorgeschlagen werden (Bild vor dem Vorschlag entsprechend diesem).

Ich bin auch gespannt zu wissen, ob dies ein Fehler in Tauri, Svelte oder TypeScript sein könnte.

Antwort #1

Es ist kein Fehler. Scheint ein Problem mit Ihrer Konfiguration zu sein. Schritte, um es zum Laufen zu bringen:

  1. Fügen Sie "src/*.ts" dem include-Array in tsconfig.json hinzu.
  2. Fügen Sie ein Alias zu vite.config.ts hinzu: '@folder/': fileURLToPath(new URL('./src/my/test/folder/', import.meta.url)) (alternativ können Sie das Plugin vite-tsconfig-paths installieren und zu Ihrer vite.config.ts hinzufügen, das diesen Schritt für Sie basierend auf dem Inhalt Ihrer tsconfig durchführt).

Das heißt, vite.config.ts sollte wie folgt aussehen:

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))
    },
  },
});

Minimal funktionsfähiges Beispielprojekt mit der von Ihnen bereitgestellten tsconfig.json und package.json: https://stackblitz.com/edit/github-xg6eei?file=README.md. Beachten Sie, dass ich nicht ausschließen kann, dass bei Ihrer lokalen Konfiguration etwas anderes nicht stimmt (die TypeScript-Projektkonfiguration ist komplex), aber Sie können von der oben verlinkten, funktionierenden Projektkonfiguration rückwärts arbeiten.

Verwandte Artikel