Índice de contenido
1. Introducción
2. Ordenar las importaciones: Configurando todo
3. Ordenar las importaciones: Configuración de las reglas
4. Ordenar las importaciones: El resultado
5. Conclusión
Introducción
Tener las importaciones desorganizadas es considerado de cierto modo un poco engorroso más cuando se trata de trabajar en un proyecto. Es recomendado mantener todo el código base tan organizado como sea posible, ya que facilita la búsqueda en los archivos. Con la ayuda de prettier y un plugin, podemos ordenar fácilmente las importaciones.
Ordenar las importaciones: Configurando todo
En primer lugar, vamos a instalar las dependencias necesarias. Sólo necesitaremos dos: prettier y el plugin.
Ordenar las importaciones: Configuración de las reglas
Ahora podemos seguir adelante y empezar a configurar nuestras reglas. Este plugin recibe un array de cadenas. Utiliza estas cadenas para decidir el orden de nuestras importaciones.
Así, por ejemplo, en este pequeño proyecto de ejemplo están los siguientes archivos:
Así que tendremos que establecer las reglas para configurarlos. Normalmente se utiliza el siguiente orden
1. Importaciones de paquetes/terceros
2. Importaciones de proyectos
3. Importaciones relativas
Esto cubrirá casi todo. Así que lo siguiente es crear un .prettierrc (un archivo de configuración de prettier) en la ruta del proyecto.
Dentro de ese archivo añada la siguiente regla:
Vamos a desglosar estas opciones. Se analizan mediante regex. Pero es más o menos el mismo formato para cada tipo de importación.
En primer lugar, cualquier tipo de regex que no se incluya se enviará al principio. Esto es crucial. Como el tercero no incluido las dependencias irán al principio como queremos. Después, seguimos sin carpeta de componentes aliased, y luego nuestras importaciones relativas.
Ordenar las importaciones: El resultado
Ahora, tan pronto como guardemos el archivo (si es que tienes el formato al guardar en cualquier IDE que estés usando) o formatees el archivo verás el siguiente resultado:
Conclusión
¡Esperemos que de esta manera y realizando estos pasos tengas más organizadas las importaciones en tus proyectos!
¡Gracias por llegar hasta aquí!