Una Mejor Forma de Ver Errores en VS Code con Error Lens

Mar 3, 2026 · 4 min read

Una Mejor Forma de Ver Errores en VS Code con Error Lens

Estás escribiendo un componente de React, ESLint detecta un problema y no te enteras hasta que miras la barra de estado — o peor aún, hasta que falla la compilación. La visualización predeterminada de errores en VS Code se basa en subrayados ondulados y el panel de Problemas, ambos fáciles de pasar por alto durante la codificación rápida. Error Lens soluciona esto al llevar los mensajes de diagnóstico directamente a tu vista del editor, en la línea donde se encuentra el problema.

Aquí te explicamos qué hace, cómo funciona y qué debes tener en cuenta antes de instalarlo.

Puntos Clave

Error Lens muestra mensajes de diagnóstico en línea, justo al final de la línea problemática, para que detectes problemas sin necesidad de pasar el cursor o revisar el panel de Problemas.
No genera sus propios diagnósticos — muestra lo que tu servidor de lenguaje, compilador de TypeScript, ESLint u otras herramientas ya reportan.
Puedes ajustar la visibilidad filtrando niveles de diagnóstico, usando el modo de seguimiento del cursor, añadiendo un retraso de renderizado y excluyendo archivos o mensajes por patrón.
Comienza con una configuración mínima mostrando solo errores y advertencias, luego expande a medida que te sientas cómodo.

Qué Hace Realmente VS Code Error Lens

Error Lens es una extensión de VS Code que mejora la visibilidad de errores al mostrar mensajes de diagnóstico en línea — justo al final de la línea problemática — en lugar de ocultarlos detrás de tooltips al pasar el cursor o del panel de Problemas.

Cuando un servidor de lenguaje o linter reporta un problema, Error Lens:

Resalta la línea completa con un fondo codificado por colores (rojo para errores, amarillo para advertencias, azul para información)
Añade el mensaje de diagnóstico como texto al final de esa línea
Muestra íconos en el margen junto a los números de línea (opcional)
Presenta un resumen en la barra de estado (opcional)

Lo clave para entender: Error Lens no genera diagnósticos por sí mismo. Muestra lo que tu servidor de lenguaje, compilador de TypeScript, ESLint u otras herramientas de linting ya reportan. Si una herramienta no está señalando un problema, Error Lens tampoco mostrará uno.

Por Qué los Errores en Línea de VS Code Importan para Flujos de Trabajo Frontend

El desarrollo frontend avanza rápido. Estás manejando tipos de TypeScript, reglas de ESLint, CSS-in-JS y props de componentes — a menudo en múltiples archivos a la vez. La experiencia predeterminada de VS Code te pide que pases el cursor sobre los subrayados o mantengas un ojo en el panel de Problemas. Ninguna opción es ideal cuando estás en flujo.

Con los errores en línea de VS Code visibles directamente en el editor, notas los problemas en el momento en que aparecen. Un nombre de prop mal escrito, una dependencia faltante en un useEffect, una importación sin usar señalada por ESLint — todo aparece inmediatamente, en contexto, sin romper tu concentración para mirar en otro lugar.

Este ciclo de retroalimentación más ajustado es donde Error Lens gana su lugar en un flujo de trabajo frontend.

Niveles de Diagnóstico Configurables y Opciones de Visualización

Error Lens te da control sobre qué se muestra y cómo. La configuración errorLens.enabledDiagnosticLevels acepta cualquier combinación de "error", "warning", "info" y "hint". Si los mensajes de nivel hint saturan tu pantalla, puedes eliminarlos completamente de la lista.

Algunas configuraciones que vale la pena conocer:

{
  "errorLens.enabledDiagnosticLevels": ["error", "warning"],
  "errorLens.messageBackgroundMode": "message",
  "errorLens.followCursor": "activeLine",
  "errorLens.delay": 500
}

messageBackgroundMode controla si se resalta la línea completa o solo el texto del mensaje. Configurarlo como "message" reduce significativamente el ruido visual.
followCursor configurado como "activeLine" muestra mensajes en línea solo para la línea donde está tu cursor — una buena opción si encuentras abrumador el resaltado de archivo completo.
delay añade una pausa (en milisegundos) antes de que aparezcan las decoraciones, lo que ayuda en archivos grandes donde el re-renderizado constante puede sentirse distractor.

También puedes excluir archivos específicos usando patrones glob con errorLens.excludePatterns, o suprimir diagnósticos de herramientas específicas usando errorLens.excludeBySource.

Mejor Visibilidad de Errores Sin el Ruido

La queja más común sobre la extensión Error Lens para VS Code es la sobrecarga de información — especialmente en archivos con muchas advertencias existentes. La solución no es desinstalarla; es ajustarla.

Comienza solo con errores y advertencias. Usa "followCursor": "activeLine" si la vista de archivo completo es demasiado. Expande gradualmente lo que muestras a medida que te sientas cómodo. La mayoría de los desarrolladores llegan a una configuración que se siente natural en uno o dos días.

Conclusión

Los diagnósticos integrados de VS Code son funcionales pero pasivos. Error Lens los hace activos — colocando el mensaje donde tus ojos ya están. Para desarrolladores frontend que quieren retroalimentación más rápida y clara de ESLint, TypeScript y otras herramientas de lenguaje, es una de las extensiones más prácticas que puedes añadir a tu configuración.

Instálala desde el VS Code Marketplace, deja la configuración predeterminada por un día y luego ajusta desde ahí.

Preguntas Frecuentes

Error Lens añade decoraciones al editor pero no ejecuta ningún análisis por sí mismo. Lee diagnósticos ya producidos por tu servidor de lenguaje o linter. En la mayoría de las máquinas el impacto en el rendimiento es insignificante. Si notas retraso en archivos muy grandes, aumenta la configuración de delay o usa el modo followCursor activeLine para limitar cuántas decoraciones se renderizan a la vez.

Sí. Error Lens funciona con cualquier herramienta que reporte diagnósticos a través del protocolo de servidor de lenguaje de VS Code. Esto incluye TypeScript, Stylelint, Pylint, Rust Analyzer y muchos otros. Si un diagnóstico aparece en el panel de Problemas, Error Lens puede mostrarlo en línea.

Usa la configuración errorLens.excludeBySource para filtrar diagnósticos de fuentes específicas, o errorLens.excludePatterns con patrones glob para omitir archivos o carpetas completas. También puedes limitar los niveles de severidad visibles a través de errorLens.enabledDiagnosticLevels para mostrar solo errores y advertencias.

El panel de Problemas lista todos los diagnósticos en un solo lugar pero requiere que cambies el foco fuera de tu código. Error Lens te mantiene en contexto al mostrar el mensaje en la línea exacta donde ocurre el problema. Muchos desarrolladores usan ambos juntos, confiando en Error Lens para conciencia inmediata y el panel de Problemas para una visión general a nivel de proyecto.

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.