¿Hay alguna forma de eliminar las importaciones y declaraciones no utilizadas de Angular 2+?

139

Estoy asignado a tomar algunos códigos desordenados de otros desarrolladores que ya han abandonado la compañía recientemente.

Curiosamente, ¿hay algún complemento de Visual Studio Code u otro medio que pueda ayudarnos a ordenar y organizar las importaciones y referencias de manera rápida y efectiva?

Por ejemplo, tal vez hay cientos de importaciones como esta

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

podría convertirse de manera similar

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

¿O otras funciones como eliminar automáticamente las importaciones y declaraciones no utilizadas del app.module o de todos los componentes a lo largo de todo el proyecto?

Gracias por cualquier comentario!

ske
fuente
Yo también me pregunto si las importaciones extrañas en componentes específicamente son un lastre para el rendimiento.
Marcidius
8
stackoverflow.com/a/49697144/3914072 vscode 1.22 Shift + Alt + O - ¡funciona para mí!
Rajab Shakirov
También se puede hacer desde la línea de comandos (o git hook): npmjs.com/package/organize-imports-cli
thorn̈

Respuestas:

168

Editar (como se sugiere en los comentarios y otras personas), Visual Studio Code ha evolucionado y proporciona esta funcionalidad incorporada como el comando "Organizar importaciones", con los siguientes métodos abreviados de teclado predeterminados :

option+ Shift+ Opara Mac

Alt + Shift + Opara Windows


Respuesta original:

Espero que esta extensión de código de Visual Studio sea suficiente para su necesidad: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

Proporciona las siguientes características:

  • Agregue importaciones de su proyecto o bibliotecas a su archivo actual
  • Agregar una importación para el nombre actual debajo del cursor
  • Agregue todas las importaciones faltantes de un archivo con un comando
  • Intellisense que sugiere símbolos y agrega automáticamente la "característica de bombilla" de importación necesaria que corrige el código que escribió
  • Ordenar y organizar sus importaciones (ordenar y eliminar sin usar )
  • Vista de esquema de código de su documento TS / TSX abierto
  • ¡Todas las cosas geniales para JavaScript también! (etapa experimental, mejor descripción a continuación).

Para Mac: control+ option+o

Para ganar: Ctrl+ Alt+o

Muhammad Rehan Qadri
fuente
1
Gracias por convertirme en este complemento, ¡es genial! Hasta que lo instalé, solía tener instalada la extensión de importación automática para ocuparme de esa pequeña funcionalidad (importación automática). Pero después de instalar TypeScript Hero ... wow, hace todo lo que necesito que haga, incluso ordenar las dependencias en orden alfabético dentro de las declaraciones de importación, deshacerse de las importaciones que no se usan dentro de las clases de componentes, etc.
Marcidius
2
En 2018, el responsable del proyecto de TS Hero ha dicho que suspenderá la extensión, ya que se ha vuelto obsoleta después de la implementación de las principales funcionalidades directamente en VS Code (ver otros comentarios).
mattarau
2
¿Alguna forma de llamar Alt+Shift+Osin reordenar las importaciones?
XCS
Alt + Shift + O para Linux también
manuman94
155

A partir de Visual Studio Code Release 1.22, esto es gratuito sin la necesidad de una extensión.

Shift+ Alt+O te cuidará.

Aaron Jordan
fuente
1
¡Agradable! He estado usando ctrl + shift + - desde siempre y ahora puedo encontrar y cambiar el acceso directo.
GeorgiG
Tuve que instalarlo, no vino en mi instalación de 1.37.1
old-monk
57

Si usted es un gran usuario de Visual Studio, simplemente puede abrir su configuración de preferencias y agregar lo siguiente a su settings.json:

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

¡Espero que esto pueda ser útil!

JayKan
fuente
3
Esto parece estar en conflicto con el complemento ESLint Prettier. Está intentando realizar una importación de una línea, pero ESLint está intentando dividir en varias líneas.
Richard
Mismo problema que @Richard. Parece ser un problema abierto - github.com/prettier/prettier-vscode/issues/716
Craig
¿Hay alguna forma de desactivar la eliminación de importaciones no utilizadas mientras se mantienen ordenadas las importaciones?
sunknudsen
gran respuesta. He estado buscando esto por siglos
Aamir Afridi
41

Para poder detectar importaciones no utilizadas, código o variables, asegúrese de tener estas opciones en el archivo tsconfig.json

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

tener instalado el compilador de mecanografía, si no instalarlo con:

npm install -g typescript

y la extensión tslint instalada en Vcode, esto funcionó para mí, pero después de habilitarlo noté una mayor cantidad de uso de CPU, especialmente en grandes proyectos.

También recomendaría usar la extensión de héroe mecanografiada para organizar sus importaciones.

Matheus Frik
fuente
41

Desde VSCode v.1.24 y TypeScript v.2.9:

Para Mac: option+ Shift+O

Para ganar: Alt+ Shift+O

kenny
fuente
77
más importante para algunos, el comando es Organize Importsoeditor.action.organizeImports
pcnate
@pcnate ¿Hay alguna forma de desactivar la eliminación de importaciones no utilizadas mientras se mantienen ordenadas las importaciones?
sunknudsen
11

¡Ya hay tantas buenas respuestas en este hilo! ¡Voy a publicar esto para ayudar a cualquiera que intente hacer esto automáticamente ! Para eliminar automáticamente las importaciones no utilizadas para todo el proyecto, este artículo fue realmente útil para mí.

En el artículo, el autor lo explica así:

Cree un archivo tslint independiente que contenga lo siguiente:

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

Luego ejecute el siguiente comando para arreglar las importaciones:

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

Considere corregir cualquier otro error que arroje. (Yo hice)

Luego verifique que el proyecto funciona construyéndolo:

ng build

o

ng build name_of_project --configuration=production 

Fin: si se compila correctamente, ha eliminado con éxito las importaciones automáticamente.

NOTA: Esto solo elimina las importaciones innecesarias. No proporciona las otras características que VS Code cuando usa uno de los comandos mencionados anteriormente.

Matt Bussing
fuente
Entiendo Could not find implementations for the following rules specified in the configuration: no-unused-declaration , así que supongo que esta solución ya no funciona.
Yousuf Khan
Estoy usando la versión tslint5.20.1
Yousuf Khan
0

vaya a su tslint.jsony cambie el valor de la propiedad no-unused-variableafalse

Mohamed Ali RACHID
fuente
3
Esto es exactamente lo contrario de lo que pidió el OP. Él / ella no quiere tener variables no utilizadas, por lo que no-unused-variabledebe ser cierto. Lo que se pregunta es si la solución (eliminación de las variables no utilizadas) se puede hacer automáticamente, lo que ya se ha respondido.
mattarau