Gibt es eine Möglichkeit, nicht verwendete Importe und Deklarationen aus Angular 2+ zu entfernen?

138

Ich bin beauftragt, Code von anderen Entwicklern zu übernehmen, die das Unternehmen bereits kürzlich verlassen haben.

Ich frage mich neugierig, ob es ein Plug-In für Visual Studio Code oder andere Mittel gibt, mit denen wir die Importe und Referenzen schnell und effektiv aufräumen und organisieren können.

Zum Beispiel gibt es vielleicht Hunderte solcher Importe

import { AutoCompleteModule,InputSwitchModule } from 'primeng/primeng';
import { ListboxModule } from 'primeng/primeng';

könnte ähnlich umgerechnet werden

import { AutoCompleteModule,
         InputSwitchModule,
         ListboxModule  } from 'primeng/primeng';

Oder andere Funktionen wie das automatische Entfernen dieser nicht verwendeten Importe und Deklarationen aus dem app.module oder aus allen Komponenten während des gesamten Projekts?

Vielen Dank für jedes Feedback!

ske
quelle
Ich frage mich auch, ob Fremdimporte in Komponenten die Leistung beeinträchtigen.
Marcidius
8
stackoverflow.com/a/49697144/3914072 vscode 1.22 Shift + Alt + O - funktioniert bei mir!
Rajab Shakirov
Kann auch über die Kommandozeile (oder den Git-Hook) erfolgen: npmjs.com/package/organize-imports-cli
thorn̈

Antworten:

167

Bearbeiten (wie in Kommentaren und anderen Personen vorgeschlagen), Visual Studio Code wurde weiterentwickelt und bietet diese als Befehl "Importe organisieren" integrierte Funktionalität mit den folgenden Standardtastenkürzeln :

option+ Shift+ OFür Mac

Alt + Shift + OFür Windows


Ursprüngliche Antwort:

Ich hoffe, diese visuelle Studio-Code-Erweiterung wird Ihren Anforderungen genügen: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

Es bietet folgende Funktionen:

  • Fügen Sie Ihrer aktuellen Datei Importe Ihres Projekts oder Ihrer Bibliotheken hinzu
  • Fügen Sie unter dem Cursor einen Import für den aktuellen Namen hinzu
  • Fügen Sie alle fehlenden Importe einer Datei mit einem Befehl hinzu
  • Intellisense, das Symbole vorschlägt und automatisch die erforderlichen Importe "Glühbirnenfunktion" hinzufügt, die den von Ihnen geschriebenen Code korrigiert
  • Sortieren und organisieren Sie Ihre Importe (sortieren und entfernen Sie nicht verwendete )
  • Code-Gliederungsansicht Ihres geöffneten TS / TSX-Dokuments
  • All das coole Zeug auch für JavaScript! (experimentelles Stadium, bessere Beschreibung unten.)

Für Mac: control+ option+o

Für Win: Ctrl+ Alt+o

Muhammad Rehan Qadri
quelle
1
Danke, dass du mich auf dieses Add-On aufmerksam gemacht hast, es rockt! Bis ich es gerade installiert habe, war die Auto-Import-Erweiterung installiert, um diese kleine Funktionalität zu übernehmen (Auto-Import). Aber nach der Installation von TypeScript Hero ... wow, tut es alles, was ich dazu brauche, einschließlich des Sortierens von Abhängigkeiten in alphabetischer Reihenfolge innerhalb der Importanweisungen selbst, des Entfernens von Importen, die nicht in den Komponentenklassen verwendet werden, usw.!
Marcidius
2
Im Jahr 2018 Projektbetreuer TS Helden hat gesagt , er die Verlängerung einstellen würde, da es veraltet nach der Umsetzung der wichtigsten Funktionalitäten direkt in VS - Code (siehe andere coments) worden ist.
Mattarau
1
Wie kann man anrufen, Alt+Shift+Oohne die Importe neu zu ordnen?
XCS
Alt + Umschalt + O auch für Linux
manuman94
155

Ab Visual Studio Code Release 1.22 ist dies kostenlos, ohne dass eine Erweiterung erforderlich ist.

Shift+ Alt+O Wird sich um Sie kümmern.

Aaron Jordan
quelle
1
Nett! Ich benutze seit Ewigkeiten Strg + Umschalt + - und jetzt kann ich die Verknüpfung finden und ändern.
GeorgiG
Ich musste es installieren, kam nicht in meine Installation von 1.37.1
alter Mönch
57

Wenn Sie ein starker Visual Studio-Benutzer sind, können Sie einfach Ihre Voreinstellungen öffnen und Folgendes zu Ihrer settings.json hinzufügen:

...
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.organizeImports": true
}
....

Hoffentlich kann das hilfreich sein!

JayKan
quelle
3
Dies scheint mit dem ESLint Prettier-Plugin in Konflikt zu stehen. Es wird versucht, einen einzeiligen Import durchzuführen, aber ESLint versucht, mehrere Zeilen zu unterbrechen.
Richard
Gleiches Problem wie @Richard. Scheint ein offenes Problem zu sein - github.com/prettier/prettier-vscode/issues/716
Craig
Gibt es eine Möglichkeit, das Entfernen nicht verwendeter Importe zu deaktivieren, während die Importe sortiert bleiben?
Sunknudsen
gute Antwort. Ich habe lange danach gesucht
Aamir Afridi
41

Stellen Sie sicher, dass Sie diese Optionen in der Datei tsconfig.json haben, um nicht verwendete Importe, Code oder Variablen erkennen zu können

"compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true
}

Lassen Sie den Typoskript-Compiler installieren, falls nicht:

npm install -g typescript

und die in Vcode installierte tslint- Erweiterung hat bei mir funktioniert, aber nach dem Aktivieren stelle ich eine zunehmende CPU-Auslastung fest, insbesondere bei großen Projekten.

Ich würde auch empfehlen, die Typoskript- Heldenerweiterung für die Organisation Ihrer Importe zu verwenden.

Matheus Frik
quelle
41

Seit VSCode v.1.24 und TypeScript v.2.9:

Für Mac: option+ Shift+O

Für Win: Alt+ Shift+O

kenny
quelle
7
Wichtiger für einige ist, dass der Befehl Organize Importsoreditor.action.organizeImports
pcnate
@pcnate Gibt es eine Möglichkeit, das Entfernen nicht verwendeter Importe zu deaktivieren, während die Importe sortiert bleiben?
Sunknudsen
11

Es gibt bereits so viele gute Antworten auf diesen Thread! Ich werde dies posten, um jedem zu helfen, der dies automatisch versucht ! Um nicht verwendete Importe für das gesamte Projekt automatisch zu entfernen, war dieser Artikel für mich sehr hilfreich.

In dem Artikel erklärt der Autor es so:

Erstellen Sie eine eigenständige tslint-Datei, die Folgendes enthält:

{
  "extends": ["tslint-etc"],
  "rules": {
    "no-unused-declaration": true
  }
}

Führen Sie dann den folgenden Befehl aus, um die Importe zu korrigieren:

 tslint --config tslint-imports.json --fix --project .

Überlegen Sie, ob Sie andere Fehler beheben möchten. (Ich tat)

Überprüfen Sie dann, ob das Projekt funktioniert, indem Sie es erstellen:

ng build

oder

ng build name_of_project --configuration=production 

Ende: Wenn es korrekt erstellt wurde, haben Sie Importe automatisch erfolgreich entfernt!

HINWEIS: Dadurch werden nur unnötige Importe entfernt. Es bietet nicht die anderen Funktionen, die VS Code bei Verwendung eines der zuvor genannten Befehle bietet.

Matt Bussing
quelle
Ich verstehe Could not find implementations for the following rules specified in the configuration: no-unused-declaration , also denke ich, dass diese Lösung nicht mehr funktioniert.
Yousuf Khan
Ich benutze tslint Version5.20.1
Yousuf Khan
0

Gehen Sie zu Ihrem tslint.jsonund ändern Sie den Wert der Immobilie no-unused-variableinfalse

Mohamed Ali RACHID
quelle
3
Dies ist genau das Gegenteil von dem, was das OP verlangt hat. Er möchte KEINE nicht verwendeten Variablen haben, no-unused-variablesollte also wahr sein. Es wurde gefragt, ob die Korrektur (Entfernen der nicht verwendeten Variablen) automatisch erfolgen kann, was bereits beantwortet wurde.
Mattarau