Uma Maneira Melhor de Ver Erros no VS Code com Error Lens

Mar 3, 2026 · 4 min read

Uma Maneira Melhor de Ver Erros no VS Code com Error Lens

Você está escrevendo um componente React, o ESLint sinaliza um problema, e você não percebe até olhar para a barra de status — ou pior, até a build falhar. A exibição padrão de erros do VS Code depende de sublinhados ondulados e do painel de Problemas, ambos fáceis de ignorar durante uma codificação acelerada. O Error Lens resolve isso trazendo mensagens de diagnóstico diretamente para a visualização do seu editor, na linha onde o problema está.

Veja o que ele faz, como funciona e o que considerar antes de instalá-lo.

Principais Conclusões

O Error Lens exibe mensagens de diagnóstico inline, diretamente no final da linha problemática, para que você detecte problemas sem precisar passar o mouse ou verificar o painel de Problemas.
Ele não gera seus próprios diagnósticos — apenas exibe o que seu language server, compilador TypeScript, ESLint ou outras ferramentas já reportam.
Você pode ajustar a visibilidade filtrando níveis de diagnóstico, usando o modo de seguimento do cursor, adicionando um atraso de renderização e excluindo arquivos ou mensagens por padrão.
Comece com uma configuração mínima mostrando apenas erros e avisos, depois expanda conforme se sentir confortável.

O Que o VS Code Error Lens Realmente Faz

Error Lens é uma extensão do VS Code que melhora a visibilidade de erros exibindo mensagens de diagnóstico inline — diretamente no final da linha problemática — em vez de escondê-las atrás de tooltips ao passar o mouse ou do painel de Problemas.

Quando um language server ou linter reporta um problema, o Error Lens:

Destaca a linha inteira com um fundo colorido (vermelho para erros, amarelo para avisos, azul para informações)
Anexa a mensagem de diagnóstico como texto no final daquela linha
Mostra ícones na margem ao lado dos números de linha (opcional)
Exibe um resumo na barra de status (opcional)

O ponto-chave a entender: o Error Lens não gera diagnósticos por conta própria. Ele exibe o que seu language server, compilador TypeScript, ESLint ou outras ferramentas de linting já reportam. Se uma ferramenta não está sinalizando um problema, o Error Lens também não mostrará.

Por Que Erros Inline no VS Code Importam para Fluxos de Trabalho Frontend

O desenvolvimento frontend é rápido. Você está lidando com tipos TypeScript, regras ESLint, CSS-in-JS e props de componentes — frequentemente em múltiplos arquivos ao mesmo tempo. A experiência padrão do VS Code pede que você passe o mouse sobre os sublinhados ou mantenha um olho no painel de Problemas. Nenhuma das opções é ideal quando você está em fluxo.

Com erros inline do VS Code visíveis diretamente no editor, você percebe problemas no momento em que aparecem. Um nome de prop digitado errado, uma dependência faltando em um useEffect, um import não utilizado sinalizado pelo ESLint — tudo isso aparece imediatamente, em contexto, sem quebrar seu foco para olhar em outro lugar.

Esse ciclo de feedback mais próximo é onde o Error Lens ganha seu lugar em um fluxo de trabalho frontend.

Níveis de Diagnóstico Configuráveis e Opções de Exibição

O Error Lens oferece controle sobre o que é mostrado e como. A configuração errorLens.enabledDiagnosticLevels aceita qualquer combinação de "error", "warning", "info" e "hint". Se mensagens de nível hint poluem sua tela, você pode removê-las completamente da lista.

Algumas configurações que vale a pena conhecer:

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

messageBackgroundMode controla se a linha inteira ou apenas o texto da mensagem é destacado. Configurá-lo como "message" reduz significativamente o ruído visual.
followCursor definido como "activeLine" mostra mensagens inline apenas para a linha onde seu cursor está — uma boa opção se você achar o destaque do arquivo inteiro excessivo.
delay adiciona uma pausa (em milissegundos) antes que as decorações apareçam, o que ajuda em arquivos grandes onde a re-renderização constante pode parecer distrativa.

Você também pode excluir arquivos específicos usando padrões glob com errorLens.excludePatterns, ou suprimir diagnósticos de ferramentas específicas usando errorLens.excludeBySource.

Melhor Visibilidade de Erros Sem o Ruído

A reclamação mais comum sobre a extensão Error Lens para VS Code é a sobrecarga de informações — especialmente em arquivos com muitos avisos existentes. A solução não é desinstalá-la; é ajustá-la.

Comece apenas com erros e avisos. Use "followCursor": "activeLine" se a visualização do arquivo inteiro for demais. Expanda gradualmente o que você mostra conforme se sentir confortável. A maioria dos desenvolvedores encontra uma configuração que parece natural em um ou dois dias.

Conclusão

Os diagnósticos integrados do VS Code são funcionais, mas passivos. O Error Lens os torna ativos — colocando a mensagem onde seus olhos já estão. Para desenvolvedores frontend que querem feedback mais rápido e claro do ESLint, TypeScript e outras ferramentas de linguagem, é uma das extensões mais práticas que você pode adicionar à sua configuração.

Instale-o do VS Code Marketplace, deixe as configurações padrão por um dia, depois ajuste a partir daí.

Perguntas Frequentes

O Error Lens adiciona decorações ao editor, mas não executa nenhuma análise por conta própria. Ele lê diagnósticos já produzidos pelo seu language server ou linter. Na maioria das máquinas, o impacto no desempenho é insignificante. Se você notar lentidão em arquivos muito grandes, aumente a configuração de delay ou use o modo followCursor activeLine para limitar quantas decorações são renderizadas de uma vez.

Sim. O Error Lens funciona com qualquer ferramenta que reporte diagnósticos através do protocolo language server do VS Code. Isso inclui TypeScript, Stylelint, Pylint, Rust Analyzer e muitos outros. Se um diagnóstico aparece no painel de Problemas, o Error Lens pode exibi-lo inline.

Use a configuração errorLens.excludeBySource para filtrar diagnósticos de fontes específicas, ou errorLens.excludePatterns com padrões glob para pular arquivos ou pastas inteiras. Você também pode limitar os níveis de severidade visíveis através de errorLens.enabledDiagnosticLevels para mostrar apenas erros e avisos.

O painel de Problemas lista todos os diagnósticos em um só lugar, mas requer que você desvie o foco do seu código. O Error Lens mantém você no contexto mostrando a mensagem na linha exata onde o problema ocorre. Muitos desenvolvedores usam ambos juntos, confiando no Error Lens para consciência imediata e no painel de Problemas para uma visão geral do projeto.

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.