Automatischer Import von Visual Studio-Code

Ich bin gerade dabei, von Webstorm zu Visual Studio Code zu wechseln. Die Leistung in Webstorm ist miserabel.

Visual Studio-Code ist nicht sehr hilfreich, um die benötigten Abhängigkeiten zu finden und zu importieren. Ich habe es bisher manuell gemacht, aber um ehrlich zu sein, würde ich lieber 15 Sekunden warten, bis der Webstorm meinen Import gefunden und hinzugefügt hat, der manuell danach suchen muss.

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

Ich habe eine tsconfig.json in meinem baseDir, die so 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 eine andere in meinem src / client-Verzeichnis, die 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 Typenskript-Gulp-Build-Aufgaben, daher denke ich, dass die Kompilierung anders ist.

Was kann ich tun, um vscode hilfreicher zu machen?

Ich habe dies durch die Installation der verschiedenen Plugins unten zum Laufen gebracht.

Meistens importieren sich die Dinge einfach von selbst, sobald ich den Klassennamen eingebe. Alternativ wird eine Glühbirne angezeigt, auf die Sie klicken können. Oder Sie können pushen F1und "importieren ..." eingeben. Dort gibt es auch verschiedene Optionen. Ich benutze sie alle irgendwie. Auch F1Implementieren zum Implementieren einer Schnittstelle ist hilfreich, funktioniert aber nicht immer.

Liste der Plugins

• npm Intellisense
• ngrx für Angular 2 Snippets
• TypeScript Toolbox
• npm
• TsTools
• Angular Snippets (Version 9)
• Typen Auto Installer
• Debugger für Chrome
• TypeScript-Importer
• TypeScript Hero
• vscode-icons
• Winkeldateien hinzufügen

Screenshot der Erweiterungen

^{* Klicken Sie für die volle Auflösung}

2018 jetzt. Sie benötigen keine Erweiterungen für den automatischen Import in Javascript (solange Sie diese checkjs: truein Ihrer jsconfig.jsonDatei haben) und TypeScript.

Es gibt zwei Arten von Autoimporten: die Schnellkorrektur zum Hinzufügen fehlender Importe, die bei Fehlern als Glühbirne angezeigt wird:

Und die Vorschläge zum automatischen Import . Während der Eingabe werden Vorschläge angezeigt. Wenn Sie einen Vorschlag für einen automatischen Import akzeptieren, wird der Import automatisch oben in der Datei hinzugefügt

Beide sollten sofort mit JavaScript und TypeScript funktionieren. Wenn die automatischen Importe bei Ihnen immer noch nicht funktionieren, öffnen Sie bitte ein Problem

Ich habe das Auto Import Plugin von steoates verwendet, was ziemlich einfach ist.

Findet, analysiert und bietet automatisch Code-Aktionen und Code-Vervollständigung für alle verfügbaren Importe. Funktioniert mit Typescript und TSX.

In der Datei tsconfig.app.json enthält eine Standard-Angular 10-App:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Sobald ich das Include geändert habe, möchte es sein:

  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts"
  ]

Es hat bei mir funktioniert

Wenn kürzlich jemand auf dieses Problem gestoßen ist, musste ich eine Einstellung hinzufügen, um die Version des Typoskripts in meinem Arbeitsbereich zu verwenden, damit die automatischen Importe funktionieren. Fügen Sie dazu diese Zeile zu Ihren Arbeitsbereichseinstellungen hinzu :

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

Klicken Sie dann bei geöffneter Typoskriptdatei in vscode auf die Typenskript- Versionsnummer in der unteren rechten Ecke. Wenn die Optionen oben angezeigt werden , wählen Sie "Arbeitsbereichsversion verwenden" und laden Sie vscode neu .

Jetzt sollten Autoimporte funktionieren.

VS Code unterstützt dies jetzt sofort, aber die Funktion funktioniert manchmal und manchmal nicht, wie es scheint. Soweit ich herausfinden konnte, muss VS Code die für den automatischen Import erforderlichen Daten laden, was mehr oder weniger so geschieht:

• Laden Sie Daten für alle Exporte aus Ihren lokalen Dateien
• Laden Sie Daten für alle Exporte von node_modules / @ -Typen
• Laden Sie Daten für alle Exporte aus node_modules / {packageName} nur, wenn eine Ihrer lokalen Dateien sie importiert

Dies wird in diesem Kommentar besser beschrieben: https://github.com/microsoft/TypeScript/issues/31763#issuecomment-537226190 .

Aufgrund von Fehlern im VS-Code oder in den Typdeklarationen bestimmter Pakete funktionieren die letzten beiden Punkte nicht immer. Das war mein Fall, ich konnte keine automatischen Importe von React-Bootstrap in einer einfachen Create-React-App sehen. Was schließlich behoben wurde, war das manuelle Kopieren des Paketordners von node_modules nach node_modules / @ types und das Belassen nur der Typdeklarationsdateien, z. B. Button.d.ts. Dies ist nicht besonders gut, denn wenn Sie jemals den Ordner node_modules löschen, funktioniert er nicht mehr. Ich bevorzuge es jedoch, Importe immer manuell eingeben zu müssen. Dies war mein letzter Ausweg, nachdem ich diese Methoden ausprobiert und versagt hatte:

• VS-Code aktualisieren (Version 1.45.1)
• Installieren Sie Typen für Ihr Paket, z npm install --save @types/react-bootstrap
• Fügen Sie die Datei jsconfig.json hinzu und spielen Sie mit den Einstellungen, wie von anderen vorgeschlagen
• Probieren Sie alle Plugins für den automatischen Import aus

Ich hoffe das hilft jemandem!

Wenn Sie Angular verwenden, stellen Sie sicher, dass das tsconfig.jsonkeine Fehler enthält. (im Problemterminal)

Aus irgendeinem Grund habe ich diese Zeilen verdoppelt und es hat bei mir nicht funktioniert

{
  "module": "esnext",
  "moduleResolution": "node",
}

Ich bin auf dieses Problem in Typescript Version 3.8.3 gestoßen.

Intellisense ist das Beste, was wir haben können, aber für mich scheint die automatische Importfunktion auch nicht zu funktionieren. Ich habe versucht, eine Erweiterung zu installieren, obwohl der automatische Import nicht funktioniert hat. Ich habe alle Einstellungen für Erweiterungen erneut überprüft. Schließlich funktionierte die automatische Importfunktion, als ich den Cache löschte

C: \ Benutzer \ Benutzername \ AppData \ Roaming \ Code \ Cache

& Laden Sie den VSCode neu

Hinweis: AppData können nur im Benutzernamen angezeigt werden, wenn Sie im Menü (Ansicht) die Option (Versteckte Elemente anzeigen) auswählen.

In einigen Fällen denken wir möglicherweise, dass ein Importfehler vorliegt, während wir in Wirklichkeit unwissentlich mit veralteten Features oder APIs in Winkel codieren.

Zum Beispiel: Wenn Sie versuchen, so etwas zu codieren

Konstruktor (http: Http) {

// ...}

Wenn Http in der neueren Version bereits veraltet ist und durch HttpClient ersetzt wird, denken wir möglicherweise, dass ein diesbezüglicher Fehler mit dem Fehler beim automatischen Import zusammenhängt. Weitere Informationen finden Sie unter Veraltete APIs und Funktionen

Typescript Importer erledigt den Job für mich

https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter

Es sucht automatisch nach Typoskriptdefinitionen in Ihrem Arbeitsbereich und importiert sie, wenn Sie die Eingabetaste drücken.

Füllen Sie die includeEigenschaft in der ersten Ebene des JSON-Objekts tsconfig.editor.jsonwie folgt aus:

"include": [
  "src/**/*.ts"
]

Es funktioniert gut für mich.

Sie können bei Bedarf auch weitere Typescript-Dateierweiterungen hinzufügen, wie hier:

"include": [
  "src/**/*.ts",
  "src/**/*.spec.ts",
  "src/**/*.d.ts"
]

Es gibt ein Visual Studio-Code-Problem, das Sie verfolgen und für diese Funktion nachschlagen können. Es gab auch ein User Voice-Problem , aber ich glaube, sie haben die Abstimmung auf GitHub-Probleme verschoben.

Es scheint, dass sie die automatische Importfunktion in TypeScript wollen, damit sie wiederverwendet werden kann. Problem beim automatischen Import von TypeScript zum Verfolgen und Daumen hoch .

Ich verwende das 'ImportJS'-Plugin von Devin Abbott für den automatischen Import und Sie können es mit dem folgenden Code installieren

npm install --global import-js