如何在 VSCode 中使用 Error Lens 插件在运行代码时实时高亮报错

阿雪同学_6849

阿雪同学_6849

2026-06-28

979人浏览

原创

error lens 不分析代码也不监听运行输出,仅渲染语言服务器(lsp)推送的静态诊断信息;行尾提示为空主因是 lsp 未启动、语言模式错误、severity 配置不匹配或软换行/缩进干扰。

如何在 vscode 中使用 error lens 插件在运行代码时实时高亮报错

Error Lens 本身不参与代码运行,也不监听 node、python 或 tsc 的执行输出;它只消费语言服务器(LSP)实时推送的静态诊断信息。所谓“运行时高亮报错”,实际是误读——你看到的行尾提示,全部来自 TypeScript Server、Pyright、ESLint 等在编辑时就已分析出的问题,而非进程 stdout/stderr。

为什么运行 node 或 python 后 Error Lens 没反应?

Error Lens 不解析终端输出,也不 hook 运行命令。它和终端日志完全隔离:

  • 你在终端里跑 python main.py 报错 IndentationError,这个错误不会变成行尾文字
  • 哪怕你在代码里写了 console.log(undeclaredVar),TypeScript Server 若未启用或未覆盖该文件,Error Lens 就不会显示任何东西
  • 运行时抛出的异常(如 ReferenceError)属于 JavaScript 引擎行为,LSP 无法预知,自然也不会渲染

真正起作用的是语言服务器(LSP),不是运行命令

要让 Error Lens “实时”显示,必须确保对应语言的 LSP 正常工作并持续推送诊断:

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载
  • 打开一个 .ts 文件,右下角状态栏应显示 TypeScript (Volar) 或 TypeScript (TS Server),而不是 Plain Text
  • Python 项目需启用 pyright:确认 settings.json 中有 "python.languageServer": "Pylance"(Pylance 内置 Pyright)
  • JS/TS 项目若用 tsconfig.json,确保文件路径在 include 或默认扫描范围内,否则 LSP 直接跳过
  • 运行命令 Developer: Restart Language Server 可强制刷新当前文件的诊断缓存

errorLens.showInline 必须为 true,且 errorLens.severity 匹配诊断级别

即使 LSP 正常工作,配置不对也会导致“有波浪线但行尾空白”:

  • "errorLens.showInline": true 是行尾文字开关,缺省值虽为 true,但重置设置或旧版本可能关闭它
  • 默认只显示 error 级别;若想看到 warning(比如 ESLint 的 no-console),必须显式设为:"errorLens.severity": ["error", "warning"]
  • "errorLens.diagnosticLevel": "warning" 是旧版配置项,已被弃用;新版只认 errorLens.severity 数组
  • 改完 settings.json 后,保存文件或切换标签页即可触发刷新,无需重启 VSCode

软换行、混合缩进、装饰插件冲突会导致行尾提示错位

行尾文字“贴到下一行”“遮住注释”“跳到空格后”,不是 Error Lens bug,而是 VSCode 渲染层定位失准:

  • 临时禁用软换行:"editor.wordWrap": "off"
  • 统一缩进:确保 "editor.detectIndentation": true,再对当前文件执行 Editor: Reindent Lines(Shift+Alt+F)
  • 限制长度防溢出:"errorLens.maxMessageLength": 60(设太小会截断关键信息,设 0 会卡 UI)
  • 冲突插件常见名单:Bracket Pair Colorizer、Highlight Matching Tag、Indenticator——逐个禁用排查

真正的“运行时错误高亮”只能靠调试器(Debugger)或终端日志人工对照;Error Lens 的价值在于把编辑阶段就能发现的问题,直接钉在代码行尾——它快,但只管静态分析那一层。别指望它告诉你 npm start 崩在哪一行,那是 debugger 和 source map 的事。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.18

989

5

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.25

2940

5

vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1395

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2932

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1989

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1727

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2607

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1838

14

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1262

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程