@getsupervisor/js-sort-imports

Ordenador de imports/exports de TypeScript (.ts / .tsx) compatible con Prettier.

Reordena y agrupa tus imports/exports de forma determinista y sin pelearse con Prettier: lee la config de Prettier de tu proyecto (printWidth, trailingComma, tabWidth) y produce exactamente el mismo formato, de modo que sort-imports + prettier convergen al mismo resultado y --check nunca da falsos positivos.

Por qué

La mayoría de ordenadores de imports formatean a su manera y entran en conflicto con Prettier (comillas, ancho de línea, la directiva 'use client', el wrapping de los { … }). Este tool:

• No choca con Prettier — toma printWidth/trailingComma/tabWidth de tu config y parte los { … } largos a multilínea igual que Prettier; deja 'use client' en su propia línea.
• Resuelve los alias de tu tsconfig para distinguir "terceros" de "código interno".
• Cero configuración en el caso común: detecta tsconfig.json y la config de Prettier solos.

Instalación

npm install -D @getsupervisor/js-sort-imports

Requiere Node ≥ 18. Incluye typescript como dependencia (no necesitas tenerlo aparte).

Uso (CLI)

# Reordena y escribe en disco
npx sort-imports "src/**/*.{ts,tsx}"

# Solo verifica — exit 1 si algo está sin ordenar (útil en CI / pre-commit)
npx sort-imports --check "src/**/*.{ts,tsx}"

# Un archivo o una carpeta
npx sort-imports src/components/Button/Button.tsx
npx sort-imports src

Como script en package.json:

{
  "scripts": {
    "sort": "sort-imports --write \"src/**/*.{ts,tsx}\"",
    "sort:check": "sort-imports --check \"src/**/*.{ts,tsx}\""
  }
}

Opciones

| Opción | Descripción | Default | | ---------------------- | ---------------------------------------------------------------------- | ----------------------------- | | --check | Solo verifica; exit 1 si hay cambios pendientes (no escribe) | — | | --write | Escribe los cambios en disco | (por defecto) | | --tsconfig <path> | tsconfig para resolver alias | ./tsconfig.json | | --print-width <n> | Ancho antes de partir un import a multilínea | config de Prettier, o 80 | | --trailing-comma <v> | all | es5 | none para el bloque multilínea | config de Prettier, o all | | -h, --help | Ayuda | — |

Cómo ordena

1. Dos grupos, separados por una línea en blanco: primero terceros, luego internos (relativos ./… y los alias de tsconfig como @/…).
2. Dentro de cada grupo, por tipo: side-effect → * as ns → default → import type → named ({ … }).
3. Dentro de cada tipo, alfabético por el binding (nombre importado, no por la ruta).
4. Los especificadores dentro de { … } también se ordenan alfabéticamente.
5. Aplica lo mismo a los export … from.

Ejemplo:

// antes
import { useState } from 'react';
import Button from '@/components/Button';
'use client';
import { z } from 'zod';

// después
'use client';
import { useState } from 'react';
import { z } from 'zod';

import Button from '@/components/Button';

Junto a Prettier (recomendado)

Corre el orden antes de Prettier; como ambos comparten la config, el resultado es idéntico:

sort-imports --write "$FILE" && prettier --write "$FILE"

Funciona muy bien en un hook de pre-commit (lint-staged) o en un hook post-edición de tu editor/agente.

API programática

const { sortImportsInContent, sortImportsInFile } = require('@getsupervisor/js-sort-imports');

// Sobre un string
const { content, changed } = sortImportsInContent(sourceText, 'Foo.tsx');

// Sobre un archivo (write opcional)
const result = sortImportsInFile('src/Foo.tsx', { write: true });

Licencia

MIT © getsupervisor