Existe-t-il un moyen de supprimer les importations et les déclarations inutilisées d'Angular 2+?

139

Je suis chargé de prendre du code en désordre d'autres développeurs qui ont déjà quitté l'entreprise récemment.

Je demande curieusement s'il existe un plug-in de Visual Studio Code ou d'autres moyens qui pourraient nous aider à ranger et à organiser les importations et les références rapidement et efficacement?

Par exemple, il y a peut-être des centaines d'importations comme celle-ci

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

pourrait être converti de manière similaire

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

Ou d'autres fonctions comme la suppression automatique de ces importations et déclarations inutilisées de l'app.module ou de tous les composants tout au long du projet?

Merci pour vos commentaires!

ske
la source
Je me demande moi aussi si les importations superflues dans les composants nuisent spécifiquement aux performances.
Marcidius
8
stackoverflow.com/a/49697144/3914072 vscode 1.22 Shift + Alt + O - fonctionne pour moi!
Rajab Shakirov
Peut également être fait depuis la ligne de commande (ou git hook): npmjs.com/package/organize-imports-cli
thorn̈

Réponses:

169

Modifier (comme suggéré dans les commentaires et d'autres personnes), Visual Studio Code a évolué et fournit cette fonctionnalité intégrée sous la forme de la commande «Organiser les importations», avec les raccourcis clavier par défaut suivants :

option+ Shift+ Opour Mac

Alt + Shift + Opour Windows


Réponse originale:

J'espère que cette extension de code Visual Studio suffira à vos besoins: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

Il fournit les fonctionnalités suivantes:

  • Ajoutez des importations de votre projet ou de vos bibliothèques à votre fichier actuel
  • Ajouter une importation pour le nom actuel sous le curseur
  • Ajouter toutes les importations manquantes d'un fichier avec une seule commande
  • Intellisense qui suggère des symboles et ajoute automatiquement les importations nécessaires "Fonction d'ampoule" qui corrige le code que vous avez écrit
  • Triez et organisez vos importations (triez et supprimez les inutilisés )
  • Vue d'ensemble du code de votre document TS / TSX ouvert
  • Tous les trucs sympas pour JavaScript aussi! (stade expérimental cependant, meilleure description ci-dessous.)

Pour Mac: control+ option+o

Pour gagner: Ctrl+ Alt+o

Muhammad Rehan Qadri
la source
1
Merci de m'avoir confié cet add-on, ça déchire! Jusqu'à ce que je viens de l'installer, j'avais l'habitude d'installer l'extension Auto-Import pour prendre soin de ce petit élément de fonctionnalité (importation automatique). Mais après l'installation de TypeScript Hero ... wow, il fait tout ce dont j'ai besoin, y compris le tri des dépendances par ordre alphabétique dans les déclarations d'importation elles-mêmes, la suppression des importations qui ne sont pas utilisées dans les classes de composants, etc.
Marcidius
2
En 2018, le responsable du projet de TS Hero a déclaré qu'il arrêterait l'extension, car elle est devenue obsolète après la mise en œuvre des principales fonctionnalités directement dans VS Code (voir autres commentaires).
mattarau
2
Un moyen d'appeler Alt+Shift+Osans réorganiser les importations?
XCS
Alt + Shift + O pour Linux aussi
manuman94
155

À partir de la version 1.22 de Visual Studio Code, cela est gratuit sans avoir besoin d'une extension.

Shift+ Alt+O prendra soin de vous.

Aaron Jordan
la source
1
Agréable! J'utilise ctrl + shift + - depuis toujours et maintenant je peux trouver et modifier le raccourci.
GeorgiG
Je devais l'installer, je ne suis pas venu dans mon installation de 1.37.1
old-monk
57

Si vous êtes un grand utilisateur de Visual Studio, vous pouvez simplement ouvrir vos paramètres de préférence et ajouter ce qui suit à votre settings.json:

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

J'espère que cela peut être utile!

JayKan
la source
3
Cela semble entrer en conflit avec le plugin ESLint Prettier. Il essaie de faire une importation sur une ligne mais ESLint essaie de couper plusieurs lignes.
Richard
Même problème que @Richard. Semble être un problème ouvert - github.com/prettier/prettier-vscode/issues/716
Craig le
Existe-t-il un moyen de désactiver la suppression des importations inutilisées tout en conservant le tri des importations?
sunknudsen
très bonne réponse. recherché cela depuis des lustres
Aamir Afridi
41

Pour pouvoir détecter les importations, le code ou les variables inutilisés, assurez-vous d'avoir ces options dans le fichier tsconfig.json

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

installez le compilateur dactylographié, sinon installez-le avec:

npm install -g typescript

et le tslint extension installée dans Vcode, cela a fonctionné pour moi, mais après l'activation, je remarque une augmentation de l'utilisation du processeur, en particulier sur les gros projets.

Je recommanderais également l'utilisation de l' extension de héros dactylographiée pour organiser vos importations.

Matheus Frik
la source
41

Depuis VSCode v.1.24 et TypeScript v.2.9:

Pour Mac: option+ Shift+O

Pour gagner: Alt+ Shift+O

Kenny
la source
7
plus important pour certains, la commande est Organize Importsoueditor.action.organizeImports
pcnate
@pcnate Existe-t-il un moyen de désactiver la suppression des importations inutilisées tout en conservant le tri des importations?
sunknudsen
11

Il y a déjà tellement de bonnes réponses sur ce fil! Je vais publier ceci pour aider quiconque essaie de le faire automatiquement ! Pour supprimer automatiquement les importations inutilisées pour l'ensemble du projet, cet article m'a été très utile.

Dans l'article, l'auteur l'explique comme ceci:

Créez un fichier tslint autonome contenant les éléments suivants:

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

Exécutez ensuite la commande suivante pour corriger les importations:

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

Pensez à corriger toutes les autres erreurs qu'il génère. (J'ai fait)

Ensuite, vérifiez que le projet fonctionne en le construisant:

ng build

ou

ng build name_of_project --configuration=production 

Fin: S'il se construit correctement, vous avez supprimé automatiquement les importations!

REMARQUE: cela supprime uniquement les importations inutiles. Il ne fournit pas les autres fonctionnalités offertes par VS Code lors de l'utilisation de l'une des commandes mentionnées précédemment.

Matt Bussing
la source
Je comprends Could not find implementations for the following rules specified in the configuration: no-unused-declaration , donc je suppose que cette solution ne fonctionne plus.
Yousuf Khan le
J'utilise la version tslint5.20.1
Yousuf Khan
0

allez dans votre tslint.jsonet changez la valeur de la propriété no-unused-variableenfalse

Mohamed Ali RACHID
la source
3
C'est exactement le contraire de ce que le PO a demandé. Il / elle ne veut PAS avoir de variables inutilisées et no-unused-variabledevrait donc être vrai. Ce qui a été demandé est si le correctif (suppression des variables inutilisées) peut être effectué automatiquement, ce qui a déjà été répondu.
mattarau