You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

VSCode中Vira主题(Material Theme继任者)的Linting错误样式自定义

解决Vira主题下VS Code Linting错误样式自定义问题

问题描述

安装Vira(Material Theme的继任主题)后,settings.json中的Linting错误显示出现两处变化:

  • 原本Unused Variable、Unknown Configuration Setting这类错误会显示为浅淡半透明/灰色文本,现在被替换成了白色虚线下划线,想要恢复旧样式;
  • Linting错误现在带有双实线下划线,觉得过于分散注意力,希望移除或自定义该样式。

已尝试操作

  • 查看Vira设置文档,但未找到相关配置选项。

当前显示效果

Linting错误显示效果


自定义配置方案

VS Code支持通过settings.json中的主题自定义配置,直接覆盖Vira主题的默认Linting样式,以下是具体配置:

1. 恢复未使用变量/未知配置的灰色半透明样式

添加以下配置到settings.json中,根据实际生效情况选择其中一种:

方案A:语义标记配置

"editor.semanticTokenColorCustomizations": {
  "rules": {
    "variable.unused": { "foreground": "#6e6e6e", "opacity": 0.6 },
    "configuration.unknown": { "foreground": "#6e6e6e", "opacity": 0.6 }
  }
},
"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "variable.unused",
      "settings": {
        "foreground": "#6e6e6e",
        "fontStyle": "" // 移除下划线样式
      }
    },
    {
      "scope": "invalid.deprecated",
      "settings": {
        "foreground": "#6e6e6e",
        "fontStyle": ""
      }
    }
  ]
}

方案B:诊断样式配置

如果语义标记配置不生效,改用此方案:

"workbench.colorCustomizations": {
  "editorUnnecessaryCode.opacity": 0.6,
  "editorUnnecessaryCode.foreground": "#6e6e6e"
}

2. 移除或自定义Linting错误的双实线下划线

移除下划线

"workbench.colorCustomizations": {
  "editorError.foreground": "#ff0000", // 保留错误文本颜色,可自行修改
  "editorError.border": "transparent",
  "editorError.background": "transparent"
},
"editor.languages.customizations": {
  "[jsonc]": { // 针对settings.json使用的jsonc语言
    "diagnostics": {
      "underlineStyle": "none"
    }
  }
}

自定义下划线样式

如果需要改成单虚线等样式,替换underlineStyle的值即可:

"workbench.colorCustomizations": {
  "editorError.foreground": "#ff0000",
  "editorError.border": "#ff0000",
  "editorError.background": "transparent"
},
"editor.languages.customizations": {
  "[jsonc]": {
    "diagnostics": {
      "underlineStyle": "single" // 可选值:none、single、double、squiggle
    }
  }
}

生效说明

配置完成后,按下Ctrl+Shift+P调出命令面板,选择"Reload Window"重新加载VS Code窗口,配置即可生效。如果某个规则不生效,可以通过"Developer: Inspect Editor Tokens and Scopes"命令查看对应的token范围,再调整配置中的scope值。

内容的提问来源于stack exchange,提问作者codekoriko

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.13 23:44:58