Problem Panel 可帮助集中查看并跳转 VSCode 中的错误与警告；需通过图标或 Cmd+Shift+ M 打开，支持按类型 / 文件过滤，依赖语言服务器，可集成 ESLint 等工具，并用 F8 快捷键导航问题。
如果您在 VSCode 中编写代码时发现语法错误或类型问题，但难以快速识别具体位置，Problem Panel（问题面板）可帮助您集中查看并跳转到所有标记的错误与警告。以下是利用该面板高效定位代码问题的操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、打开并理解 Problem Panel 布局
Problem Panel 是 VSCode 内置的诊断信息汇总区域，自动收集当前工作区中所有已启用语言服务报告的问题，按文件路径分组排列，并支持实时刷新。
1、点击窗口左下角的“问题”图标（感叹号图标），或使用快捷键Cmd+Shift+M（macOS）/ Ctrl+Shift+M（Windows/Linux）打开面板。
2、观察面板顶部的筛选控件，可切换显示 错误 、 警告 、 信息 三类条目，点击对应标签即可过滤。
3、每行条目包含文件名、行号、列号、问题描述及严重等级图标，双击任意条目将直接跳转至对应源码位置。
二、启用语言服务器并确保问题实时生成
Problem Panel 依赖于活跃的语言服务（如 TypeScript Server、Python Pylance、ESLint 等）提供语义分析结果；若面板为空或延迟更新，需确认相关服务已正确加载。
1、打开命令面板（Cmd+Shift+P），输入并选择“Developer: Toggle Developer Tools”，在 Console 中检查是否有语言服务器启动失败日志。
2、在设置中搜索“extensions.autoUpdate”，确保为启用状态，以保障语言扩展保持最新。
3、对当前文件执行右键菜单中的“Reopen with Language Mode”，手动指定匹配的语言模式（如 JavaScript React、Python 等），触发服务重载。
三、配置自定义问题来源（如 ESLint 或 Prettier）
除内置语法检查外，Problem Panel 可整合第三方工具输出，前提是其输出格式符合 VSCode 问题匹配规则（如标准 JSON 或特定文本格式），并通过 task 或 extension 接入。
1、在项目根目录创建 .eslintrc.cjs 配置文件，并安装 ESLint 扩展与本地依赖：npm install eslint --save-dev。
2、打开设置（Cmd+, ），搜索“eslint.packageManager”，将其值设为npm，确保 VSCode 调用项目级 ESLint 而非全局版本。
3、在 settings.json 中添加配置项："eslint.enable": true 与 "eslint.run": "onType"，使问题随编辑实时出现。
四、使用快捷键在问题间快速跳转
当 Problem Panel 中存在多个问题时，无需鼠标操作即可在不同错误之间循环切换，提升排查效率。
1、确保焦点位于编辑器内（非面板本身），按下 “F8”键 跳转到下一个问题。
2、按住 Shift 同时再按F8，返回上一个已报告的问题。
3、若当前文件无问题，焦点将自动移至 Problem Panel，并高亮首个条目，此时可用方向键浏览。
五、过滤特定文件或问题类型
大型项目中问题数量较多，可通过内置过滤功能聚焦关键区域，避免信息过载。
1、在 Problem Panel 顶部的输入框中输入 文件名片段（如“utils”），仅显示路径含该字符串的条目。
2、输入 “error” 或“warning”，可分别筛选出对应严重等级的问题。
3、输入 “@ts-”（适用于 TypeScript 项目），快速定位所有 TS 编译器提示，如@ts-ignore 未生效或类型断言错误。
