Back

Error LensでVS Codeのエラー表示をより良くする方法

OpenReplay Team OpenReplay Team

Mar 3, 2026 · 2 min read

Error LensでVS Codeのエラー表示をより良くする方法

Reactコンポーネントを書いていて、ESLintが問題を検出したのに、ステータスバーをちらっと見るまで気づかない — さらに悪い場合は、ビルドが失敗するまで気づかない。VS Codeのデフォルトのエラー表示は波線の下線とProblemsパネルに依存しており、どちらも高速なコーディング中には見落としやすいものです。Error Lensは、診断メッセージを問題が発生している行に直接表示することで、この問題を解決します。

以下では、Error Lensが何をするのか、どのように機能するのか、そしてインストール前に知っておくべきことを説明します。

重要なポイント

  • Error Lensは診断メッセージをインラインで、問題のある行の末尾に直接表示するため、ホバーやProblemsパネルの確認なしに問題を把握できます。
  • 独自の診断を生成するのではなく、言語サーバー、TypeScriptコンパイラ、ESLint、その他のツールがすでに報告している内容を表示します。
  • 診断レベルのフィルタリング、カーソル追従モードの使用、レンダリング遅延の追加、パターンによるファイルやメッセージの除外により、表示を細かく調整できます。
  • まずはエラーと警告のみを表示する最小限の設定から始め、慣れてきたら段階的に拡張していきましょう。

VS Code Error Lensが実際に行うこと

Error LensはVS Codeの拡張機能で、診断メッセージをインライン表示 — 問題のある行の末尾に直接表示 — することで、ホバーツールチップやProblemsパネルの背後に隠すのではなく、エラーの可視性を向上させます。

言語サーバーやリンターが問題を報告すると、Error Lensは以下を行います:

  • 行全体をハイライト表示し、色分けされた背景(エラーは赤、警告は黄色、情報は青)を適用
  • 診断メッセージをテキストとして追加し、その行の末尾に表示
  • ガターにアイコンを表示(行番号の横、オプション)
  • ステータスバーにサマリーを表示(オプション)

理解すべき重要な点:Error Lensは独自に診断を生成しません。言語サーバー、TypeScriptコンパイラ、ESLint、その他のリンティングツールがすでに報告している内容を表示します。ツールが問題を検出していなければ、Error Lensも表示しません。

フロントエンド開発ワークフローにおけるVS Codeインラインエラーの重要性

フロントエンド開発は高速に進みます。TypeScriptの型、ESLintルール、CSS-in-JS、コンポーネントのpropsを、しばしば複数のファイルにまたがって同時に扱います。VS Codeのデフォルト体験では、下線の上にホバーするか、Problemsパネルに目を向ける必要があります。どちらもフロー状態にあるときには理想的ではありません。

VS Codeのインラインエラーがエディタ内に直接表示されることで、問題が発生した瞬間に気づくことができます。propsの名前の誤入力、useEffectの依存関係の欠落、ESLintによって検出された未使用のimport — これらすべてが、コンテキスト内で即座に表示され、他の場所を見るために集中を切らす必要がありません。

このより密接なフィードバックループこそが、Error Lensがフロントエンド開発ワークフローにおいて価値を発揮する理由です。

設定可能な診断レベルと表示オプション

Error Lensは、何を表示するか、どのように表示するかを制御できます。errorLens.enabledDiagnosticLevels設定は、"error"、"warning"、"info"、"hint"の任意の組み合わせを受け付けます。hint レベルのメッセージが画面を散らかす場合は、リストから完全に削除できます。

知っておくべきいくつかの設定:

{
  "errorLens.enabledDiagnosticLevels": ["error", "warning"],
  "errorLens.messageBackgroundMode": "message",
  "errorLens.followCursor": "activeLine",
  "errorLens.delay": 500
}
  • messageBackgroundMode は、行全体をハイライトするか、メッセージテキストのみをハイライトするかを制御します。"message"に設定すると、視覚的なノイズが大幅に減少します。
  • followCursor を"activeLine"に設定すると、カーソルがある行のみにインラインメッセージを表示します — ファイル全体のハイライトが圧倒的に感じる場合に適したオプションです。
  • delay は、装飾が表示されるまでの遅延(ミリ秒単位)を追加します。これは、大きなファイルで絶え間ない再レンダリングが気になる場合に役立ちます。

また、errorLens.excludePatternsでglobパターンを使用して特定のファイルを除外したり、errorLens.excludeBySourceを使用して特定のツールからの診断を抑制したりできます。

ノイズなしでより良いエラー可視性を実現

VS Code用Error Lens拡張機能に関する最も一般的な不満は、情報過多です — 特に既存の警告が多いファイルでは顕著です。解決策はアンインストールすることではなく、調整することです。

まずはエラーと警告のみから始めましょう。ファイル全体のビューが多すぎる場合は、"followCursor": "activeLine"を使用します。慣れてきたら、表示内容を徐々に拡張していきます。ほとんどの開発者は、1〜2日以内に自然に感じる設定に落ち着きます。

まとめ

VS Codeの組み込み診断は機能的ですが受動的です。Error Lensはそれをアクティブにし、メッセージをあなたの目がすでに向いている場所に配置します。ESLint、TypeScript、その他の言語ツールからより速く、より明確なフィードバックを求めるフロントエンド開発者にとって、セットアップに追加できる最も実用的な拡張機能の1つです。

VS Code Marketplaceからインストールし、デフォルト設定で1日使用してから、そこから調整してください。

よくある質問

Error Lensはエディタに装飾を追加しますが、独自に分析を実行することはありません。言語サーバーやリンターがすでに生成した診断を読み取ります。ほとんどのマシンではパフォーマンスへの影響はごくわずかです。非常に大きなファイルで遅延に気づく場合は、delay設定を増やすか、followCursor activeLine モードを使用して一度にレンダリングされる装飾の数を制限してください。

はい。Error LensはVS Code言語サーバープロトコルを通じて診断を報告する任意のツールで動作します。これにはTypeScript、Stylelint、Pylint、Rust Analyzerなど多数が含まれます。診断がProblemsパネルに表示される場合、Error Lensはそれをインラインで表示できます。

errorLens.excludeBySource設定を使用して特定のソースからの診断をフィルタリングするか、errorLens.excludePatternsでglobパターンを使用してファイルやフォルダ全体をスキップできます。また、errorLens.enabledDiagnosticLevelsを通じて表示される重大度レベルを制限し、エラーと警告のみを表示することもできます。

Problemsパネルはすべての診断を1か所にリストしますが、コードから焦点を移す必要があります。Error Lensは、問題が発生している正確な行にメッセージを表示することで、コンテキスト内に留まることができます。多くの開発者は両方を併用し、即座の認識にはError Lensを、プロジェクト全体の概要にはProblemsパネルを使用しています。

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.

OpenReplay

More articles from OpenReplay Blog