如何更改 VS Code 中的错误样式？答案

【问题标题】：How to change error styles in VS Code?如何更改 VS Code 中的错误样式？
【发布时间】：2017-04-03 11:50:45
【问题描述】：

我试图以更激进的方式突出显示错误，在 VS Code 中是否可能？

基本上是为了改变这个风格：

UPD：webStorm 中激进的高亮示例：

【问题讨论】：

据我所知，无法更改错误的外观。 “更具侵略性”到底是什么意思？
更新了问题

标签： visual-studio-code vscode-settings

【解决方案1】：

更新 - 2020 年 11 月

为错误样式设置背景颜色的属性终于来了！ Merged PR here

editorInfo.background
editorWarning.background
editorError.background

尚未发布 - 我想它可能会在下一个主要版本 (v1.16) 中发布。发生这种情况时将在此处更新以确认版本。

v1.12 及更高版本

现在可以通过工作区设置中的workbench.colorCustomizations 本地自定义错误下划线颜色。 See the docs here.

"workbench.colorCustomizations": {
  "editorError.foreground": "#000000", // squiggly line
  "editorError.border": "#ffffff" // additional border under squiggly line
}

不幸的是，据我所知，目前本地自定义仅限于此。例如，要使用背景颜色突出显示错误，您仍然必须使用下面的插件方法...

v1.7.2 及更高版本

可以通过带有vscode-custom-css 扩展名的css 完全自定义错误样式。

使用以下内容创建文件custom-styles.css（根据需要更改样式）

.monaco-editor.vs .redsquiggly,
.monaco-editor.vs-dark .redsquiggly {
  background: rgba(255,255,255,0.2);
  border-bottom: 1px solid #fff;
}

通过在Preferences > User Settings (settings.json) 中添加以下内容，将扩展名指向custom-styles.css

{
  "vscode_custom_css.imports" : [
    "file:///path/to/file/custom-styles.css"
  ]
}

打开命令面板（Mac：cmd+shift+P，Windows/Linux：ctrl +shift+P) 并搜索并执行Enable Custom CSS and JS，然后重启VS Code。

大功告成！

应用了上述样式的屏幕截图：

如果您在配置中遇到任何错误，或者您在 custom-styles.css 中进行了任何更改，请尝试完全重新启动 VS Code，它应该会刷新并选择正确配置的/新样式。

注意感谢 @Stepan Suvorov 提出 github 问题，感谢 @Matt Bierner 指出适当的 css，所以我可以通过扩展来解决这个问题。

如果任何 VS Code 开发人员碰巧正在阅读本文，首先感谢 - VS Code 很棒 - 但是内置的错误样式对于色盲人士来说是一个重要的可访问性问题。我是红绿色盲，黑色背景上的红色波浪线对我来说是一个很大的压力，特别是对于单个字符。

自定义错误样式的能力是我真正错过的最后一件事，从 atom 切换到 VS Code。对此的官方支持将是一个很棒的功能！

【讨论】：

【解决方案2】：

不幸的是，将近一年后，vscode-custom-css 不再为我工作了；同时 vscode 引入了一些设置来自定义布局。

尝试在用户设置中添加这个：

{
  // ...,
  "workbench.colorCustomizations": {
    "editorError.border": "#ca2323a4",
    "editorError.foreground": "#ffffffb7"
  }
}

它将以这种方式显示错误：

【讨论】：

【解决方案3】：

您很快就能修改错误、警告和信息的背景颜色。见https://github.com/microsoft/vscode/pull/110112，应该是v1.52。

editorError.background
editorWarning.background
editorInfo.background

以前，背景颜色无法更改。

【讨论】：

【解决方案4】：

这适用于版本 1.58.0：

以下 JSON 进入您的 settings.json，我通过设置 -> 工作台 -> 外观 -> 颜色自定义访问：

{
   "workbench.colorCustomizations": {
        "errorForeground": "#ffffff",
        "editorError.background": "#ff0000",
        "editorWarning.foreground": "#ffffff",
        "editorWarning.background": "#dddd00",
        "editorInfo.foreground": "#ffffff",
        "editorInfo.background": "#0000ff"

    }
}

【讨论】：

这是我需要的。谢谢！

【解决方案5】：

据我所知，更改错误样式并不是 VSCode 主题或扩展目前可以做的事情。这个逻辑是内置的。这是css used to render the redsquiggly currently

我建议你open a feature request against VSCode

【讨论】：