问题面板显示代码错误、警告等信息，来源包括语言服务、静态分析工具、编译器输出和配置检查；每条目含描述、位置、级别和来源；如TS2307需查模块路径或依赖，ESLint未使用变量可删除或忽略；可通过设置过滤或禁用规则，掌握其逻辑可提升开发效率。
vscode 的问题面板（Problems Panel）是开发过程中非常实用的工具，用于显示代码中的错误、警告和提示信息。它能帮助你快速定位语法错误、类型问题、拼写错误或配置不当等问题。要有效利用这个功能，关键在于理解其诊断信息的来源与含义。
问题面板的信息来源
问题面板中的条目通常来自以下几个方面：
- 语言服务（Language Server）：比如 typescript/javaScript 的 tsserver、python 的 Pylance、go 的 gopls 等，它们会分析代码并提供语义级别的诊断。
- 静态分析工具：如 ESLint、Prettier、pylint、rust-analyzer 等，通过配置集成到编辑器后，会在问题面板中报告格式或规范问题。
- 编译器输出：例如使用 tsc 编译 TS 文件时的错误，或者 g++ 编译 C++ 出错，可通过任务（Tasks）集成进问题面板。
- 文件系统或配置检查：如 tsconfig.json 配置错误、缺失依赖、launch.json 不合法等也会被标记。
诊断信息的关键字段解析
在问题面板中每一行通常包含以下内容：
- 问题描述：简明说明发生了什么，例如 “Missing semicolon” 或 “Cannot find name ‘react’”。
- 文件路径与位置：显示为 file.ts:10:5，表示该问题出现在 file.ts 第 10 行第 5 列。
- 严重级别：分为 Error（红色）、Warning（黄色）、Info（蓝色）、Hint（白色），影响是否阻止构建。
- 来源（Source）：标明是来自 ESLint、ts(2307)、Python、golint 还是其他工具，有助于判断处理方式。
常见诊断代码示例与应对方法
了解一些典型错误有助于快速修复：
- TS2307: Cannot find module ‘xxx’：TypeScript 找不到模块，检查路径拼写、是否安装依赖（npm install）、或 @types 是否缺失。
- ESLint: ‘x’ is assigned a value but never used：变量定义未使用，可删除或加注释忽略（// eslint-disable-next-line no-unused-vars）。
- Python undefined variable ‘print’：可能解释器未正确选择，确认右下角选择了有效的 Python 环境。
- [ts] Expected 2 arguments, but got 1.：函数调用参数数量不符，查看函数定义补全参数。
如何控制问题显示
你可以通过设置过滤或屏蔽不关心的问题：
- 在设置中搜索 “problems.affixes” 可自定义问题面板分组。
- 使用 “eslint.enable”: false 暂时关闭 ESLint 检查（不推荐长期关闭）。
- 在 .vscode/settings.json 中配置特定规则的禁用，例如跳过某些 ESLint 规则。
- 点击问题面板右上角的“筛选”图标，按严重性、来源或文件路径过滤。
基本上就这些。掌握问题面板的诊断逻辑，能大幅提升编码效率和调试体验。关键是识别来源、理解错误码、合理配置工具链。遇到陌生提示时，复制错误信息搜索通常能找到解决方案。