VS Code不显示TS严格模式错误红波浪线及问题列表的解决方法

首先确认前置条件：用VS Code打开的根目录必须是当前tsconfig.json所在的文件夹，不要打开上层/下层目录，否则TS语言服务无法加载正确配置，会出现构建报错但编辑器不识别的问题。

1. 修复tsconfig.json的配置冲突 #

你当前配置中module设为Node16，但moduleResolution配置为Node，二者不匹配会导致TS语言服务解析规则异常，错误级别判定失效。将对应配置修改为：

"compilerOptions": {
  // ...保留其他原有配置
  "module": "Node16",
  "moduleResolution": "Node16",
}

修改完成后按Ctrl+Shift+P（Mac端为Cmd+Shift+P）调出命令面板，执行TypeScript: Restart TS Server重启TS服务。

2. 强制指定TS错误的诊断级别 #

如果重启服务后仍然只显示灰点，通过VS Code配置强制将隐式any类错误标记为错误级别，显示红色波浪线并归集到Problems面板：

• 按Ctrl+,（Mac端为Cmd+,）打开VS Code设置，点击右上角的「打开设置(JSON)」按钮
• 在工作区配置项中添加如下规则：

{
  // 开启TS语法校验
  "typescript.validate.enable": true,
  // 关闭默认JS校验，避免和TS规则冲突
  "javascript.validate.enable": false,
  // 不把类型类检查降级为警告
  "typescript.reportStyleChecksAsWarnings": false,
  // 强制指定错误码的诊断级别
  "diagnostic.severityOverrides": {
    "TS7005": "error",
    "TS7006": "error",
    "TS7008": "error",
    "TS7031": "error",
    "TS7034": "error"
  },
  // 开启Problems面板的错误展示
  "problems.visibility": true
}

上述配置会把隐式any相关的所有TS错误统一设为最高错误级别，触发红色波浪线提示，所有错误会自动同步到Problems面板。

3. 对齐TS版本 #

如果项目本地安装了独立版本的TypeScript，VS Code默认调用的内置TS版本可能和项目构建用的版本不一致，导致规则不匹配：

• 打开任意.ts/.tsx文件，查看VS Code右下角状态栏显示的TypeScript版本号
• 点击版本号，在弹出的选项列表中选择「使用工作区版本」，选中项目node_modules中安装的TS版本即可。

4. 排查装饰器配置异常 #

如果红色波浪线仍不显示，检查是否有配置错误导致错误提示被隐藏：在设置JSON中查找是否存在如下自定义颜色配置，若存在直接删除即可：

"workbench.colorCustomizations": {
  // 以下配置会将错误波浪线设为透明，导致看不到提示
  "editorError.foreground": "#00000000",
  "editorError.border": "#00000000"
}

全部配置完成后再次重启TS服务，写一个未声明类型的变量触发TS7005错误，即可看到错误位置显示红色波浪线；按Ctrl+Shift+M（Mac端为Cmd+Shift+M）打开Problems面板，就能看到所有项目中的TS错误，点击条目可直接跳转到对应错误位置。

内容的提问来源于stack exchange，提问作者Dave