Back

在 VS Code 中使用 Error Lens 更好地查看错误

OpenReplay Team OpenReplay Team

Mar 3, 2026 · 2 min read

在 VS Code 中使用 Error Lens 更好地查看错误

你正在编写一个 React 组件,ESLint 标记了一个问题,但你直到瞥一眼状态栏才注意到——更糟的是,直到构建失败才发现。VS Code 的默认错误显示依赖于波浪下划线和问题面板,这两者在快节奏的编码过程中都很容易被忽略。Error Lens 通过将诊断消息直接带入你的编辑器视图中,显示在问题所在的那一行来解决这个问题。

以下是它的功能、工作原理,以及安装前需要注意的事项。

核心要点

  • Error Lens 在行内显示诊断消息,就在出错行的末尾,让你无需悬停或检查问题面板就能发现问题。
  • 它不会生成自己的诊断信息——它只是呈现你的语言服务器、TypeScript 编译器、ESLint 或其他工具已经报告的内容。
  • 你可以通过过滤诊断级别、使用光标跟随模式、添加渲染延迟以及按模式排除文件或消息来微调可见性。
  • 从仅显示错误和警告的最小配置开始,然后随着你逐渐适应再扩展。

VS Code Error Lens 实际做什么

Error Lens 是一个 VS Code 扩展,通过在行内显示诊断消息——就在出错行的末尾——而不是将它们隐藏在悬停提示或问题面板后面,来提高错误的可见性。

当语言服务器或代码检查工具报告问题时,Error Lens 会:

  • 高亮整行,使用颜色编码的背景(错误为红色,警告为黄色,信息为蓝色)
  • 将诊断消息作为文本附加在该行末尾
  • 在装订线中显示图标,位于行号旁边(可选)
  • 在状态栏中显示摘要(可选)

需要理解的关键点是:Error Lens 本身不生成诊断信息。它呈现的是你的语言服务器、TypeScript 编译器、ESLint 或其他代码检查工具已经报告的内容。如果某个工具没有标记问题,Error Lens 也不会显示。

为什么 VS Code 行内错误对前端工作流很重要

前端开发节奏很快。你要同时处理 TypeScript 类型、ESLint 规则、CSS-in-JS 和组件属性——通常跨越多个文件。默认的 VS Code 体验要求你要么悬停在下划线上,要么盯着问题面板。当你处于心流状态时,这两种方式都不理想。

通过在编辑器中直接显示 VS Code 行内错误,你可以在问题出现的那一刻就注意到它们。拼写错误的属性名、useEffect 中缺失的依赖项、ESLint 标记的未使用导入——所有这些都会立即在上下文中显示出来,无需打断你的专注去查看其他地方。

这种更紧密的反馈循环正是 Error Lens 在前端工作流中赢得一席之地的原因。

可配置的诊断级别和显示选项

Error Lens 让你可以控制显示什么以及如何显示。errorLens.enabledDiagnosticLevels 设置接受 "error"、"warning"、"info" 和 "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"。随着你逐渐适应,逐步扩展显示的内容。大多数开发者在一两天内就能找到一个感觉自然的配置。

结论

VS Code 的内置诊断功能虽然实用但比较被动。Error Lens 让它们变得主动——将消息放在你的视线已经在的地方。对于希望从 ESLint、TypeScript 和其他语言工具获得更快、更清晰反馈的前端开发者来说,这是你可以添加到设置中最实用的扩展之一。

从 VS Code Marketplace 安装它,保持默认设置使用一天,然后再进行调整。

常见问题

Error Lens 会向编辑器添加装饰,但本身不运行任何分析。它读取的是语言服务器或代码检查工具已经生成的诊断信息。在大多数机器上,性能影响可以忽略不计。如果你在非常大的文件上注意到延迟,可以增加延迟设置或使用 followCursor activeLine 模式来限制一次渲染的装饰数量。

可以。Error Lens 适用于任何通过 VS Code 语言服务器协议报告诊断信息的工具。这包括 TypeScript、Stylelint、Pylint、Rust Analyzer 等等。如果诊断信息出现在问题面板中,Error Lens 就可以在行内显示它。

使用 errorLens.excludeBySource 设置来过滤来自特定来源的诊断信息,或使用 errorLens.excludePatterns 配合 glob 模式来跳过整个文件或文件夹。你还可以通过 errorLens.enabledDiagnosticLevels 限制可见的严重性级别,仅显示错误和警告。

问题面板在一个地方列出所有诊断信息,但需要你将注意力从代码上移开。Error Lens 通过在问题发生的确切行上显示消息来让你保持在上下文中。许多开发者同时使用两者,依靠 Error Lens 获得即时感知,依靠问题面板获得项目范围的概览。

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