Error Lens插件将错误、警告等诊断信息直接显示在代码行尾,提升定位效率;它依赖TS Server、ESLint等工具提供诊断数据,支持自定义颜色、截断长度及面板跳转。

VSCode 的 Error Lens 插件能直接在代码行尾显示错误、警告和提示信息,不用悬停、不用跳转,一眼就能定位问题。
为什么需要 Error Lens
默认情况下,VSCode 只在编辑器底部状态栏或 Problems 面板里显示诊断信息,写代码时频繁切换视线或鼠标很打断思路。Error Lens 把关键提示“贴”在出错行的最右侧,和代码保持视觉同步,尤其适合快速扫读、调试和结对编程。
安装与基础配置
在扩展市场搜索 Error Lens(作者:usernamehw),点击安装并重启 VSCode(部分版本需重载窗口)。启用后默认即生效,无需额外设置。常见建议配置如下:
- 在 settings.json 中添加
"errorLens.showInGutter": false关闭左侧装饰(避免和 GitLens 等插件冲突) - 用
"errorLens.showTooltip": false关闭悬停提示(如果只想要行尾文字) - 通过
"errorLens.showToLineEnd": true让提示延伸至行末空白处,更易点击
配合 ESLint / Prettier / TypeScript 更好用
Error Lens 本身不检查代码,它只是“翻译器”——把语言服务器(如 TypeScript Server)、linter(如 ESLint)或 formatter(如 Prettier)产生的诊断信息可视化。确保这些工具已正确配置并启用:
- TypeScript 项目:开箱即用,TS Server 的报错会自动显示
- ESLint:确认工作区已安装
eslint包,并在 VSCode 设置中启用eslint.enable: true - 自定义规则或 .eslintrc.js 修改后,保存文件即可实时更新行尾提示
小技巧提升效率
实际使用中几个顺手操作:
- 按 Ctrl+Click(Windows/Linux)或 Cmd+Click(Mac)点击行尾提示,直接跳转到 Problems 面板对应条目
- 提示文字支持截断控制:设
"errorLens.maxMessageLength": 80防止过长遮挡代码 - 不同严重级别用颜色区分(红=error,黄=warning,蓝=info),可自定义
"errorLens.errorMessageColor"等主题色
基本上就这些。开启 Error Lens 后,错误不再“藏起来”,而是稳稳站在你写代码的地方——不复杂但容易忽略,却是提升日常编码节奏的实在帮手。










