web-dev-qa-db-ger.com

Automatischer Import von Visual Studio Code

Ich bin dabei, von Webstorm auf Visual Studio Code umzusteigen. Die Performance in Webstorm ist miserabel.

Visual Studio-Code ist nicht sehr hilfreich beim Finden der benötigten Abhängigkeiten und beim Importieren. Ich habe es bisher manuell gemacht, aber um ehrlich zu sein, warte ich lieber 15 Sekunden auf Webstorm, um meinen Import zu finden und hinzuzufügen, der manuell für Dig benötigt wird.

 Screenshot: cannot find import

Ich verwende den Angular2 von @ minko-gechev https://github.com/mgechev/angular2-seed

Ich habe eine tsconfig.json in meinem baseDir, die folgendermaßen aussieht:

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "dist",
    "typings/index.d.ts",
    "typings/modules",
    "src"
  ],
  "compileOnSave": false
}

und ich habe ein anderes in meinem src/client-Verzeichnis, das so aussieht:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true
  }
}

Ich weiß nicht, warum es zwei gibt. Das Angualr-Seed-Projekt verwendet TypeScript-Gulp-Build-Tasks. Ich denke, die Kompilierung ist anders.

Was kann ich tun vscode um hilfreicher zu sein?

29
reach4thelasers

Ich habe dieses Problem durch die Installation verschiedener Plugins erreicht. Hier ist ein Screenshot meiner Erweiterungsliste. Meistens importieren Dinge einfach von selbst, sobald ich den Klassennamen eingebe. Alternativ erscheint eine Glühbirne, auf die Sie klicken können. Oder Sie drücken F1 und geben "import ..." ein. Es gibt auch verschiedene Optionen. Ich benutze sie alle. Auch das F1-Implementierungswerkzeug zum Implementieren einer Schnittstelle ist hilfreich, funktioniert jedoch nicht immer.

 enter image description here

25
reach4thelasers

Ich habe Auto Import plugin benutzt, was ziemlich einfach ist.

Sucht, analysiert und liefert Code-Aktionen und Code Fertigstellung für alle verfügbaren Einfuhren. Funktioniert mit TypeScript und TSX.

Wie das funktioniert, erfahren Sie unter: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

9
Alireza Fattahi

2018 jetzt. Sie benötigen keine Erweiterungen für den automatischen Import von Javascript und TypeScript. 

Es gibt zwei Arten von Autoimporten: das Hinzufügen des fehlenden Imports Quick Fix , das bei Fehlern als Glühbirne angezeigt wird:

 enter image description here

Und die Auto-Importvorschläge . Diese zeigen während der Eingabe einen Vorschlag an. Durch das Akzeptieren eines Vorschlags zum automatischen Import wird der Import automatisch oben in der Datei eingefügt

 enter image description here

Beides sollte mit JavaScript und TypeScript sofort funktionieren. Wenn der automatische Import für Sie immer noch nicht funktioniert, öffnen Sie bitte ein Problem

6
Matt Bierner

Wenn vor kurzem jemand auf dieses Problem gestoßen ist, habe ich festgestellt, dass ich eine Einstellung hinzufügen musste, um die TypeScript-Version meines Arbeitsbereichs zu verwenden, damit die automatischen Importe funktionieren. Fügen Sie dazu diese Zeile zu Ihren workspace -Einstellungen hinzu:

{
  "TypeScript.tsdk": "./node_modules/TypeScript/lib"
}

Klicken Sie anschließend bei geöffneter TypeScript-Datei in vscode auf die TypeScript-Versionsnummer in der rechten unteren Ecke. Wenn die Optionen oben angezeigt werden, wählen Sie "Version des Arbeitsbereichs verwenden" und dann vscode neu laden.

Jetzt sollten Autoimporte funktionieren. 

1
inorganik

Schauen Sie sich das zuerst an MUSS ERWEITERUNGEN HABEN und installieren Sie die Erweiterungen, die Sie möglicherweise benötigen. Und dann funktioniert das Folgende für mich ganz gut.

{
    "compilerOptions": {
        "target": "es5",
        "allowSyntheticDefaultImports": true
    }
}
0
Abdullah

Es gibt ein Visual Studio Code-Problem Sie können diese Funktion nachverfolgen und die Daumen nach oben zeigen. Es gab auch eine User Voice-Ausgabe , aber ich glaube, sie haben die Abstimmung zu GitHub-Fragen verschoben.

Es scheint, dass sie eine automatische Importfunktion in TypeScript wünschen, sodass sie wiederverwendet werden kann. Problem mit dem automatischen Import von TypeScript zum Nachverfolgen und Daumennägel hier oben .

0
RationalDev