Error Gutters 插件可在 VSCode 行号栏显示语法/类型错误标记,需安装插件、启用对应语言服务器、自定义颜色样式、保存文件触发诊断,并排查无标记时的语言模式或冲突插件问题。

如果您在使用 VSCode 编写代码时希望在行号栏(gutter)区域直接看到语法错误、类型错误等标记,而非仅依赖下方问题面板或悬停提示,则 Error Gutters 插件可实现该视觉反馈。以下是启用与配置该插件的具体操作步骤:
本文运行环境:MacBook Air M2,macOS Sequoia。
一、安装 Error Gutters 插件
该插件需通过 VSCode 扩展市场获取并启用,确保其被正确加载后才能渲染错误标记。
1、打开 VSCode,点击左侧活动栏最下方的扩展图标(四个方块组成的图标)。
2、在扩展搜索框中输入 Error Gutters,确认作者为 aaron-bond 的官方版本。
3、点击“安装”按钮,安装完成后点击“重新加载”使插件生效。
二、启用语言服务器支持
Error Gutters 本身不提供错误检测能力,而是依赖已启用的语言服务器(如 TypeScript Server、ESLint、Pylint 等)输出诊断信息。若无有效诊断源,行号旁不会显示任何标记。
1、确保当前工作区已配置对应语言的 LSP 支持,例如对 JavaScript/TypeScript 项目,需存在 tsconfig.json 或已启用内置 TS 语言服务。
2、对 Python 文件,需安装 Python 扩展并配置 pylint 或 mypy 作为语言服务器。
3、保存文件后观察底部状态栏是否显示语言服务器正在运行,且无“Language server is not available”类报错。
三、调整插件颜色与样式
默认情况下,Error Gutters 使用红色实心圆点表示错误、黄色三角形表示警告。用户可通过设置自定义标记形状与颜色以适配主题或增强可读性。
1、按下 Cmd + ,(macOS)打开设置界面,切换至“JSON”编辑模式(点击右上角三个点 → “打开设置(JSON)”)。
2、在 settings.json 中添加以下字段:
3、将 "errorGutters.errorColor" 设置为 "#ff4d4d","errorGutters.warningColor" 设置为 "#faad14"。
4、可选添加 "errorGutters.gutterIcon" 并设为 "dot"、"triangle" 或 "none" 以控制图标类型。
四、验证错误标记是否正常渲染
插件启用后需触发一次完整的诊断刷新,才能在 gutter 区域生成对应标记。此过程依赖文件保存行为或语言服务器主动推送。
1、新建一个 test.ts 文件,在其中输入存在类型错误的代码,例如:const x: number = "hello";
2、按下 Cmd + S 保存文件,等待右下角出现“TypeScript language features activated”提示。
3、观察行号左侧 gutter 区域是否出现红色圆点;将鼠标悬停于该标记上,确认弹出的提示包含预期的错误信息。
五、排查无标记显示的问题
若已安装插件并配置语言服务器,但 gutter 仍无任何图标,可能是诊断信息未被插件捕获或被其他扩展干扰。
1、打开命令面板(Cmd + Shift + P),执行 Developer: Toggle Developer Tools,查看 Console 是否报出 ErrorGutters: no diagnostics found 类警告。
2、禁用其他 gutter 类插件(如 GitLens、Bracket Pair Colorizer),重启 VSCode 后重试。
3、检查当前文件是否处于受支持的语言模式:右下角状态栏应显示 TypeScript、JavaScript、Python 等,而非 Plain Text。










