Cómo eliminar importaciones no usadas con ESLint en Visual Studio Code

Eliminar importaciones no usadas con ESLint es una de las mejores formas de mantener tu código limpio y profesional. Con Visual Studio Code y una configuración adecuada, puedes automatizar esta tarea para que se realice en segundos. En este artículo, aprenderás paso a paso cómo configurar ESLint para detectar y eliminar importaciones innecesarias automáticamente.

¿Por qué es importante limpiar tus importaciones?

Las importaciones innecesarias no solo ensucian tu código, también pueden ralentizar el desarrollo y generar confusión cuando trabajas en equipo. Un proyecto limpio es más eficiente y fácil de mantener. Con ESLint y el plugin eslint-plugin-unused-imports, esta tarea se vuelve rápida y sencilla.

Instalación de ESLint

Lo primero que necesitas es instalar ESLint en tu proyecto. Sigue estos pasos:

Instalar ESLint como dependencia de desarrollo:En la terminal, ejecuta este comando desde la raíz de tu proyecto npm install eslint --save-dev
Inicia un proyecto Node.js (si aún no lo tienes):Si no tienes un archivo package.json, créalo ejecutando npm init -y

Configuración inicial de ESLint

Ahora, inicializa ESLint en tu proyecto con este comando interactivo:

npx eslint --init

Se te harán varias preguntas para configurar ESLint. Por ejemplo:

Elige si tu proyecto usa JavaScript o TypeScript.
Indica si estás trabajando con React, Node.js u otro entorno.
Decide si deseas un archivo de configuración en formato JavaScript, JSON o YAML.

Al terminar, se generará un archivo eslint.config.mjs (o equivalente, según el formato que elijas).

Instalación del plugin eslint-plugin-unused-imports

Este es el plugin que hará la magia al detectar y eliminar las importaciones no usadas. Instálalo con el siguiente comando:

npm install eslint-plugin-unused-imports --save-dev

Configuración del plugin en ESLint

Edita el archivo eslint.config.mjs para integrar el plugin. Aquí tienes una configuración recomendada:

import globals from "globals";
import pluginJs from "@eslint/js";
import unusedImports from "eslint-plugin-unused-imports";

export default [
  {
    files: ["*.js", "*.jsx", "*.ts", "*.tsx"],
    languageOptions: {
      globals: globals.browser,
    },
    plugins: {
      "unused-imports": unusedImports,
    },
    rules: {
      // Reglas del plugin para importaciones no usadas
      "unused-imports/no-unused-imports": "error",
    },
  },
  pluginJs.configs.recommended,
];

¿Qué hace esta configuración?

Activa el plugin eslint-plugin-unused-imports en tu proyecto.
Define una regla para marcar como error cualquier importación no utilizada.
Aplica la configuración a todos los archivos .js, .jsx, .ts y .tsx.

Limpieza automática de importaciones no usadas

¡Es hora de eliminar esas importaciones innecesarias! Ejecuta este comando en la raíz de tu proyecto:

npx eslint . --fix

Este comando:

Detecta las importaciones no utilizadas en todos los archivos del proyecto.
Aplica correcciones automáticas, eliminando las que no se usan.

Solución universal: ¿Qué pasa si no usas Visual Studio Code?

Aunque este artículo se centra en Visual Studio Code, el flujo funciona en cualquier entorno que soporte ESLint. Por ejemplo:

WebStorm: Puedes integrar ESLint desde las configuraciones del proyecto.
Sublime Text: Usa un paquete como SublimeLinter para ejecutar ESLint.

Posibles errores comunes y cómo solucionarlos

1. Error al inicializar ESLint:

Solución: Asegúrate de tener instalada una versión reciente de Node.js.

2. No se detectan importaciones no usadas:

Solución: Verifica que el plugin eslint-plugin-unused-imports esté correctamente configurado en el archivo eslint.config.mjs.

Resumen final

Con los pasos que hemos visto, limpiar tus importaciones será más fácil que nunca. Aquí tienes el flujo completo:

Instala ESLint con npm install eslint --save-dev.
Inicialízalo con npx eslint --init.
Agrega el plugin eslint-plugin-unused-imports.
Configura ESLint editando el archivo eslint.config.mjs.
Limpia automáticamente ejecutando npx eslint . --fix.

Este enfoque no solo mantiene tu código limpio, sino que también ahorra tiempo en tareas repetitivas. 🚀

¿Tienes dudas o tips adicionales?

¡Déjame un comentario! También puedes visitar mi canal de YouTube donde encontrarás más contenido práctico como este.