Existe uma maneira de remover importações e declarações não utilizadas do Angular 2+?

139

Fui designado para receber códigos confusos de outros desenvolvedores que já deixaram a empresa recentemente.

Estou curiosamente perguntando se existe algum plug-in do Visual Studio Code ou outros meios que possam nos ajudar a organizar e organizar as importações e referências de maneira rápida e eficaz?

Por exemplo, existem talvez centenas de importações como esta

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

pode ser convertido para similarmente

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

Ou outras funções, como remover automaticamente as importações e declarações não utilizadas do app.module ou de todos os componentes de todo o projeto?

Obrigado por qualquer feedback!

ske
fonte
Também estou me perguntando se importações estranhas para componentes são especificamente um empecilho no desempenho.
Marcidius
8
stackoverflow.com/a/49697144/3914072 vscode 1,22 Shift + Alt + O - funciona para mim!
Rajab Shakirov
Pode ser feito a partir da linha de comando (ou gancho git) também: npmjs.com/package/organize-imports-cli
Thorn

Respostas:

168

Edite (conforme sugerido nos comentários e em outras pessoas), o Visual Studio Code evoluiu e fornece essa funcionalidade incorporada como o comando "Organizar importações", com os seguintes atalhos de teclado padrão :

option+ Shift+ Opara Mac

Alt + Shift + Opara Windows


Resposta original:

Espero que esta extensão de código do visual studio seja suficiente para sua necessidade: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

Ele fornece os seguintes recursos:

  • Adicione importações do seu projeto ou bibliotecas ao seu arquivo atual
  • Adicione uma importação para o nome atual sob o cursor
  • Adicione todas as importações ausentes de um arquivo com um comando
  • Intellisense que sugere símbolos e adiciona automaticamente as importações necessárias "Recurso de lâmpada" que corrige o código que você escreveu
  • Classifique e organize suas importações (classifique e remova não utilizadas )
  • Visão geral do código do seu documento TS / TSX aberto
  • Todo o material interessante para JavaScript também! (estágio experimental, porém, melhor descrição abaixo.)

Para Mac: control+ option+o

Para vitória: Ctrl+ Alt+o

Muhammad Rehan Qadri
fonte
1
Obrigado por me transformar neste complemento, ele é demais! Até a instalação, eu costumava ter a extensão de importação automática instalada para cuidar dessa pequena parte da funcionalidade (importação automática). Mas depois de instalar o TypeScript Hero ... uau, ele faz tudo o que eu preciso, incluindo a classificação de dependências em ordem alfabética nas próprias instruções de importação, eliminando as importações que não são usadas nas classes de componentes, etc!
Marcidius
2
Em 2018, o mantenedor do projeto da TS Hero disse que interromperia a extensão, uma vez que se tornou obsoleta após a implementação das principais funcionalidades diretamente no VS Code (veja outros comentários).
31519 Mattarau
2
Alguma maneira de ligar Alt+Shift+Osem reordenar as importações?
XCS
Alt + Shift + O para Linux também
manuman94 07/07
155

A partir do Visual Studio Code Release 1.22, ele é liberado sem a necessidade de uma extensão.

Shift+ Alt+O cuidará de você.

Aaron Jordan
fonte
1
Agradável! Eu uso ctrl + shift + - desde sempre e agora posso encontrar e alterar o atalho.
precisa saber é o seguinte
Eu tive que instalá-lo, não veio na minha instalação do 1.37.1
old-monk
57

Se você é um usuário pesado do visual studio, pode simplesmente abrir suas configurações de preferência e adicionar o seguinte a suas configurações.json:

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

Espero que isso possa ser útil!

JayKan
fonte
3
Isso parece entrar em conflito com o plugin ESLint Prettier. Ele está tentando fazer uma importação em uma linha, mas o ESLint está tentando quebrar em várias linhas.
Richard
Mesmo problema que @ Richard. Parece ser um problema em aberto - github.com/prettier/prettier-vscode/issues/716
Craig
Existe uma maneira de desativar a remoção de importações não utilizadas, mantendo as importações classificadas?
sunknudsen 15/03
Ótima resposta. procurado há séculos
Aamir Afridi
41

Para poder detectar importações, códigos ou variáveis ​​não utilizadas, verifique se você tem essas opções no arquivo tsconfig.json

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

tenha o compilador datilografado instalado, caso contrário não o instale com:

npm install -g typescript

e a extensão tslint instalada no Vcode, isso funcionou para mim, mas depois de ativar, noto uma quantidade crescente de uso da CPU, especialmente em grandes projetos.

Também recomendo o uso da extensão herói datilografada para organizar suas importações.

Matheus Frik
fonte
41

Desde o VSCode v.1.24 e o TypeScript v.2.9:

Para Mac: option+ Shift+O

Para vitória: Alt+ Shift+O

kenny
fonte
7
mais importante para alguns, o comando é Organize Importsoueditor.action.organizeImports
pcnate
@pcnate Existe uma maneira de desativar a remoção de importações não utilizadas, mantendo as importações classificadas?
sunknudsen 15/03
11

Já existem tantas boas respostas neste tópico! Vou postar isso para ajudar alguém tentando fazer isso automaticamente ! Para remover automaticamente importações não utilizadas para todo o projeto, este artigo foi realmente útil para mim.

No artigo, o autor explica assim:

Crie um arquivo tslint independente com o seguinte:

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

Em seguida, execute o seguinte comando para corrigir as importações:

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

Considere corrigir outros erros que ele lançar. (Eu fiz)

Em seguida, verifique as obras do projeto construindo-o:

ng build

ou

ng build name_of_project --configuration=production 

Fim: Se criar corretamente, você removeu as importações com êxito automaticamente!

NOTA: Isso remove apenas importações desnecessárias. Ele não fornece os outros recursos que o VS Code fornece ao usar um dos comandos mencionados anteriormente.

Matt Bussing
fonte
Entendo Could not find implementations for the following rules specified in the configuration: no-unused-declaration , então acho que essa solução não funciona mais.
Yousuf Khan
Estou usando a versão tslint5.20.1
Yousuf Khan
0

vá para o seu tslint.jsone altere o valor da propriedade no-unused-variableparafalse

Mohamed Ali RACHID
fonte
3
É exatamente o oposto do que o OP pediu. Como ele NÃO quer ter variáveis ​​não utilizadas, no-unused-variabledeve ser verdade. O que foi perguntado é se a correção (remoção das variáveis ​​não utilizadas) pode ser feita automaticamente, o que já foi respondido.
31519 Mattarau