#462 · Herramienta para desarrolladores

JavaScript Import Sorter

Ordena declaraciones import de módulos ES para hacer más legible el encabezado de un archivo JavaScript o TypeScript. Detecta imports de una sola línea, separa los imports con efectos secundarios y ordena el resto por ruta del módulo sin alterar el cuerpo del archivo.

Datos de entrada

Código fuente
Espacio publicitario

Cómo usar esta herramienta para desarrolladores

  1. Pega o escribe la entrada en el cuadro principal.
  2. Ajusta las opciones disponibles para este analizador.
  3. Pulsa el botón principal o usa Ctrl/Cmd + Enter.
  4. Revisa el resumen, la interpretación y las métricas.
  5. Copia o descarga el resultado si coincide con lo que necesitas.

Qué hace esta herramienta para desarrolladores

Ordena declaraciones import de módulos ES para hacer más legible el encabezado de un archivo JavaScript o TypeScript. Detecta imports de una sola línea, separa los imports con efectos secundarios y ordena el resto por ruta del módulo sin alterar el cuerpo del archivo.

Reconoce declaraciones import de una sola línea, extrae la ruta entre comillas y reordena únicamente esas líneas. El resto del archivo permanece en su secuencia original.

No intenta reescribir imports multilínea, atributos import ni sintaxis experimental; en esos casos conviene usar un parser del proyecto.

Ejemplo

Antes: import z from "./z.js"; import { a } from "@lib/core"; Después: import { a } from "@lib/core"; import z from "./z.js";

Casos de uso

  • Normalizar encabezados antes de una revisión de código.
  • Detectar rápidamente imports con efectos secundarios.
  • Preparar fragmentos pequeños sin instalar un formatter.

Consejos para obtener resultados fiables

  • Prueba primero con un ejemplo pequeño que conozcas.
  • Conserva una copia de la entrada original antes de transformar datos.
  • Revisa errores y limitaciones antes de usar el resultado en producción.
  • Cuando haya Unicode, compara también bytes o puntos de código si el problema no es visible.
  • Valida el resultado en el entorno final cuando intervengan reglas específicas del proyecto.

Detalles del procesamiento

Reconoce declaraciones import de una sola línea, extrae la ruta entre comillas y reordena únicamente esas líneas. El resto del archivo permanece en su secuencia original.

No intenta reescribir imports multilínea, atributos import ni sintaxis experimental; en esos casos conviene usar un parser del proyecto.

Preguntas frecuentes

¿El ordenador de imports modifica el código que no es import?

No. Las líneas no reconocidas como import se conservan en el mismo orden.

¿Cómo trata los imports que solo cargan efectos secundarios?

Los detecta como import "modulo" y los agrupa antes de los imports con bindings.

¿Funciona con imports multilínea de TypeScript?

No de forma fiable; el analizador deliberadamente trabaja con declaraciones de una sola línea.

¿Ordena por el nombre importado o por la ruta del módulo?

El modo predeterminado ordena por la ruta del módulo; también hay un criterio por longitud de línea.

¿Puede sustituir las reglas import/order de ESLint?

No. Es una utilidad local para fragmentos y no aplica toda la semántica configurable de ESLint.

Resumen técnico

MóduloDetalle
EntradaCódigo fuente
ProcesamientoReconoce declaraciones import de una sola línea, extrae la ruta entre comillas y reordena únicamente esas líneas. El resto del archivo permanece en su secuencia original.
SalidaFuente reordenada

Explorar Herramientas HTML, CSS y JavaScript

Consulta más utilidades de esta categoría en el hub de Herramientas HTML, CSS y JavaScript.