Czy istnieje sposób na usunięcie niewykorzystanych importów i deklaracji z Angular 2+?

155

Zostałem przydzielony do zabrania trochę pomieszanego kodu od innych programistów, którzy niedawno opuścili firmę.

Z ciekawości pytam, czy jest jakaś wtyczka Visual Studio Code lub inne środki, które pomogłyby nam w szybkim i efektywnym uporządkowaniu i zorganizowaniu importu i referencji?

Na przykład może być setek takich importów

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

można przekształcić w podobny sposób

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

Lub inne funkcje, takie jak automatyczne usuwanie tych nieużywanych importów i deklaracji z modułu app.module lub ze wszystkich komponentów w całym projekcie?

Dzięki za wszelkie uwagi!

ske
źródło
Ja też się zastanawiam, czy nieistotne importy komponentów są szczególnie obciążeniem dla wydajności.
Marcidius
8
stackoverflow.com/a/49697144/3914072 vscode 1.22 Shift + Alt + O - działa dla mnie!
Rajab Shakirov
Można to zrobić również z wiersza poleceń (lub git hook): npmjs.com/package/organize-imports-cli
thorn ̈

Odpowiedzi:

213

Edytuj (jak sugerowano w komentarzach i innych osobach), Visual Studio Code ewoluował i udostępnia tę funkcję wbudowaną w polecenie „Organizuj importowanie”, z następującymi domyślnymi skrótami klawiaturowymi :

option+ Shift+ Odla Maca

Alt + Shift + Odla Windows


Oryginalna odpowiedź:

Mam nadzieję, że to rozszerzenie kodu Visual Studio wystarczy dla Ciebie: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

Zapewnia następujące funkcje:

  • Dodaj importy projektu lub bibliotek do bieżącego pliku
  • Dodaj import dla bieżącej nazwy pod kursorem
  • Dodaj wszystkie brakujące importy pliku jednym poleceniem
  • Intellisense, która sugeruje symbole i automatycznie dodaje potrzebną importowaną „funkcję żarówki”, która naprawia napisany przez Ciebie kod
  • Sortuj i organizuj import (sortuj i usuwaj nieużywane )
  • Widok konspektu kodu otwartego dokumentu TS / TSX
  • Wszystkie fajne rzeczy także dla JavaScript! (etap eksperymentalny, dokładniejszy opis poniżej).

W przypadku komputerów Mac: control+ option+o

Dla Win: Ctrl+ Alt+o

Muhammad Rehan Qadri
źródło
1
Dzięki za włączenie mnie do tego dodatku, działa! Aż do momentu zainstalowania go, miałem zainstalowane rozszerzenie Auto-Import, aby zająć się tym małym elementem funkcjonalności (automatyczne importowanie). Ale po zainstalowaniu TypeScript Hero ... wow, robi wszystko, czego potrzebuję, w tym sortowanie zależności w kolejności alfabetycznej w samych instrukcjach importu, usuwanie importu, które nie są używane w klasach komponentów itp.
Marcidius
2
W 2018 opiekun projektu TS Hero zapowiedział , że zaprzestanie rozszerzenia, ponieważ stało się ono przestarzałe po wdrożeniu głównych funkcji bezpośrednio w VS Code (zobacz inne komentarze).
mattarau
2
Jakikolwiek sposób zadzwonić Alt+Shift+Obez zmiany kolejności importu?
XCS
1
Alt + Shift + O także dla Linuksa
manuman94
157

Od wersji 1.22 programu Visual Studio Code jest to bezpłatne i nie wymaga rozszerzenia.

Shift+ Alt+O zaopiekuje się tobą.

Aaron Jordan
źródło
1
Ładny! Używam ctrl + shift + - od zawsze i teraz mogę znaleźć i zmienić skrót.
GeorgiG
Musiałem go zainstalować, nie pojawił się w mojej instalacji 1.37.1
stary mnich
67

Jeśli jesteś ciężkim użytkownikiem Visual Studio, możesz po prostu otworzyć ustawienia preferencji i dodać następujące elementy do pliku settings.json:

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

Mam nadzieję, że może to być pomocne!

JayKan
źródło
3
Wydaje się, że jest to sprzeczne z wtyczką ESLint Prettier. Próbuje dokonać importu jednowierszowego, ale ESLint próbuje podzielić wiele wierszy.
Richard
Ten sam problem co @Richard. Wydaje się, że jest to otwarty problem - github.com/prettier/prettier-vscode/issues/716
Craig
Czy istnieje sposób, aby wyłączyć usuwanie nieużywanych importów, zachowując sortowanie importu?
sunknudsen
świetna odpowiedź. szukałem tego od wieków
Aamir Afridi
42

Aby móc wykryć nieużywane importy, kod lub zmienne, upewnij się, że masz te opcje w pliku tsconfig.json

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

mieć zainstalowany kompilator maszynopisu, jeśli nie, zainstaluj go z:

npm install -g typescript

i rozszerzenie tslint zainstalowane w Vcode, działało to dla mnie, ale po włączeniu zauważam wzrost użycia procesora, szczególnie w dużych projektach.

Poleciłbym również użycie rozszerzenia Hero do organizowania importu.

Matheus Frik
źródło
42

Od VSCode v.1.24 i TypeScript v.2.9:

W przypadku komputerów Mac: option+ Shift+O

Dla Win: Alt+ Shift+O

Kenny
źródło
7
ważniejsze dla niektórych jest polecenie Organize Importsoreditor.action.organizeImports
pcnate
1
@pcnate Czy istnieje sposób, aby wyłączyć usuwanie nieużywanych importów, zachowując sortowanie importu?
sunknudsen
12

W tym wątku jest już tak wiele dobrych odpowiedzi! Zamierzam to opublikować, aby pomóc każdemu, kto próbuje to zrobić automatycznie ! Ten artykuł był dla mnie bardzo pomocny w automatycznym usuwaniu nieużywanych importów z całego projektu .

W artykule autor wyjaśnia to tak:

Utwórz samodzielny plik tslint, który zawiera następujące elementy:

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

Następnie uruchom następujące polecenie, aby naprawić import:

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

Rozważ naprawienie innych generowanych przez siebie błędów. (Zrobiłem)

Następnie sprawdź prace projektu budując go:

ng build

lub

ng build name_of_project --configuration=production 

Koniec: jeśli buduje się poprawnie, pomyślnie usunąłeś import automatycznie!

UWAGA: To usuwa tylko niepotrzebne importy. Nie zapewnia innych funkcji, które zapewnia VS Code podczas korzystania z jednego z wcześniej wymienionych poleceń.

Matt Bussing
źródło
Rozumiem Could not find implementations for the following rules specified in the configuration: no-unused-declaration , więc myślę, że to rozwiązanie już nie działa.
Yousuf Khan
Używam wersji tslint5.20.1
Yousuf Khan
0

przejdź do swojego tslint.jsoni zmień wartość nieruchomości no-unused-variablenafalse

Mohamed Ali RACHID
źródło
3
To jest dokładnie odwrotność tego, o co prosił PO. Chce NIE mieć nieużywanych zmiennych, więc no-unused-variablepowinno być prawdziwe. Pytano, czy poprawka (usunięcie nieużywanych zmiennych) może być wykonana automatycznie, na co już udzielono odpowiedzi.
mattarau