VSCode的Error Lens插件:让错误信息更直观

13次阅读

Error Lens 插件可实现在 vscode 中行内显示错误/警告信息。需安装插件、配置启用行内渲染、自定义样式、验证语言支持、避免与其他插件冲突。

VSCode的Error Lens插件:让错误信息更直观

如果您在使用 VSCode 编写代码时发现错误提示仅显示在底部状态栏或问题面板中,缺乏行内实时反馈,则可能是由于缺少对错误位置的视觉强化。Error Lens 插件通过在出错代码行末直接渲染错误/警告信息,显著提升诊断效率。以下是启用并优化该插件效果的具体步骤:

本文运行环境:MacBook Pro,macos Sequoia。

一、安装 Error Lens 插件

该插件需从 VSCode 扩展市场获取并启用,确保其与当前编辑器版本兼容且能正常注入行内诊断信息。

1、打开 VSCode,点击左侧活动栏中的扩展图标(四个方块组成的图标)。

2、在扩展搜索框中输入 Error Lens

3、在搜索结果中找到作者为 usernamehw 的插件,确认其名称为 Error Lens 且已发布最新版本。

4、点击“安装”按钮,等待安装完成。

5、安装完毕后点击“重新加载”使插件生效。

二、启用行内错误渲染

Error Lens 默认启用核心功能,但部分语言支持需手动激活诊断提供者,确保编辑器能正确读取语言服务器报告的错误。

1、按下 Cmd + Shift + P(Mac)或 Ctrl + Shift + Pwindows/linux)打开命令面板。

2、输入并选择 Preferences: Open Settings (jsON)

3、在 settings.json 文件中添加以下配置项:

“errorLens.showOnSaveOnly”: false,

“errorLens.followCursor”: true,

“errorLens.showTooltip”: true,

三、调整错误信息显示样式

插件支持自定义颜色、图标和文字排版,以适配不同主题与视觉偏好,避免与编辑器高亮冲突。

1、再次打开 settings.json 文件。

2、添加以下样式相关配置:

“errorLens.errorColor”: “#ff6b6b”,

“errorLens.warningColor”: “#ffd93d”,

“errorLens.infoColor”: “#4ecdc4”,

“errorLens.hintColor”: “#a093c7”,

“errorLens.gutterIcons”: true,

四、验证多语言支持状态

Error Lens 依赖语言服务器(LSP)输出诊断数据,若某语言未显示行内错误,需检查对应语言扩展是否已安装并启用诊断功能。

1、打开一个 .py 文件,确认已安装 python 扩展(由 microsoft 提供)。

2、打开一个 .ts 文件,确认已安装 typescript and javaScript Language Features(VSCode 内置,无需额外安装)。

3、打开一个 .json 文件,确认文件内容存在语法错误(如缺少逗号),观察行末是否出现红色波浪线及错误文本。

五、禁用与其他插件的冲突行为

部分格式化或诊断类插件(如 ESLint、Prettier)可能覆盖或延迟 Error Lens 的渲染时机,需调整执行优先级。

1、在 settings.json 中设置 ESLint 不自动修复保存时的问题:

“eslint.autoFixOnSave”: false,

2、禁用 Prettier 的内置诊断集成(若已启用):

“prettier.enable”: false,

3、重启 VSCode 窗口以确保所有配置按新顺序加载。

text=ZqhQzanResources