Auto Import Sorter

Extensión de VSCode que ordena automáticamente los imports al guardar archivos TypeScript/JavaScript.

Características

• Ordenamiento automático al guardar archivos .ts, .tsx, .js, .jsx
• Detección de directivas: Mantiene 'use client' y 'use server' al principio
• Separación inteligente: Distingue entre imports externos (node_modules) e internos (@/ o rutas relativas)
• Orden alfabético: Ordena los imports por el source dentro de cada grupo
• Priorización especial: React siempre primero, Next.js siempre segundo en imports externos

Lógica de Ordenamiento

El plugin organiza los imports en el siguiente orden:

1. Directivas ('use client' o 'use server')
2. Línea en blanco
3. Imports Externos (de node_modules):
   • react siempre primero
   • next / next/* siempre segundo
   • Resto ordenado alfabéticamente
4. Línea en blanco
5. Imports Internos (que empiecen por @/, ./ o ../) ordenados alfabéticamente

Ejemplo

Antes:

import { Button } from '@/components/ui/button'
import { useRouter } from 'next/navigation'
import React, { useState } from 'react'
'use client'
import { motion } from 'framer-motion'
import { Card } from './Card'
import { ChevronDown } from 'lucide-react'

Después:

'use client'

import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import { motion } from 'framer-motion'
import { ChevronDown } from 'lucide-react'

import { Card } from './Card'
import { Button } from '@/components/ui/button'

Instalación para Desarrollo

Prerrequisitos

• Node.js (v18 o superior)
• Visual Studio Code

Pasos

1. Instalar dependencias:

   npm install
   

2. Compilar el proyecto:

   npm run compile
   

Probarlo Localmente (F5)

Para probar la extensión en modo desarrollo:

1. Abrir el proyecto en VSCode
2. Presionar F5 (o ir a Run > Start Debugging)
3. Se abrirá una nueva ventana de VSCode con la extensión cargada (título: [Extension Development Host])
4. En la nueva ventana, abre o crea un archivo .ts, .tsx, .js o .jsx
5. Escribe algunos imports desordenados
6. Guarda el archivo (Ctrl+S / Cmd+S)
7. Los imports se ordenarán automáticamente

Modo Watch

Para desarrollo continuo con compilación automática:

npm run watch

Esto recompilará automáticamente cada vez que edites src/extension.ts.

Configuración

La extensión añade la siguiente configuración:

• importSorter.enable (boolean, default: true): Habilita/deshabilita el ordenamiento automático

Para deshabilitarlo temporalmente, añade en tu settings.json:

{
  "importSorter.enable": false
}

Arquitectura Técnica

Activación

La extensión se activa automáticamente para los siguientes lenguajes (ver package.json:activationEvents):

• typescript
• typescriptreact
• javascript
• javascriptreact

Evento Principal

Utiliza el evento vscode.workspace.onWillSaveTextDocument para interceptar el guardado y aplicar el formateo antes de que el archivo se escriba en disco.

Implementación (src/extension.ts)

La lógica principal se divide en:

1. parseImports(): Usa regex para identificar y clasificar imports:

   • Detecta directivas con /^['"]use (client|server)['"]/
   • Detecta imports con /^import\s+(?:type\s+)?(?:{[^}]*}|[\w*]+)/
   • Clasifica imports como externos o internos basándose en el source

2. sortExternalImports(): Ordena imports externos con priorización:

   • React siempre primero (source === 'react')
   • Next.js siempre segundo (source === 'next' o source.startsWith('next/'))
   • Resto alfabéticamente con localeCompare()

3. sortImportsBySource(): Ordena imports internos alfabéticamente usando localeCompare()

4. buildImportSection(): Construye el nuevo bloque de imports con líneas en blanco entre grupos

5. sortImports(): Función principal que orquesta el proceso y devuelve un TextEdit

Comandos de Desarrollo

npm run compile      # Compila TypeScript a JavaScript
npm run watch        # Compila en modo watch (auto-recompilación)
npm run lint         # Ejecuta ESLint (si está configurado)

Estructura del Proyecto

VSPlugin/
├── .vscode/
│   ├── launch.json      # Configuración para F5 debugging
│   └── tasks.json       # Tareas de build
├── src/
│   └── extension.ts     # Código principal
├── out/                 # JavaScript compilado (generado)
├── package.json         # Manifest de la extensión
├── tsconfig.json        # Configuración de TypeScript
└── README.md            # Esta documentación

Depuración

1. Presiona F5 para iniciar el debugger
2. Coloca breakpoints en src/extension.ts
3. La consola de Debug mostrará logs con console.log()

Publicación (Opcional)

Para empaquetar la extensión:

npm install -g @vscode/vsce
vsce package

Esto generará un archivo .vsix que se puede instalar localmente o publicar en el Marketplace.

Licencia

MIT