如何为 VSCode 的输出面板添加自定义着色

Question

我已经安装了 VSCode 的 Output Colorizer 扩展。但是，我找不到任何说明。我所知道的是扩展创建“text/log”、“text/x-log”、“text/x-code-output”、“x-code-output”mime-types..这将允许我指定自定义影响输出面板的特定范围的颜色。我所做的就是安装输出着色器扩展。

我可以在 settings.json 文件中添加什么内容来覆盖 VSCode 输出面板的文本颜色（在下面的屏幕截图中）？我不想更改当前的“黑色”面板背景颜色，只想更改此面板中的文本颜色，而不会影响编辑器窗格中的文本。我可以更改下面的深红色，但不能不更改所有语言的strings范围的颜色。

Answer 1

着色器扩展仅使用正则表达式来解析字符串/数字/引号/日期/等...并使用所选 VS Code 主题中的默认样式并应用它们。

您可以在此处查看正则表达式到主题 CSS 样式的映射： https://github.com/IBM-Cloud/vscode-log-output-colorizer/blob/master/src/syntaxes/log.tmLanguage#L14

例如，日期将被赋予

constant.numeric

样式：

<dict>
    <!-- Date MM/DD/(YY)YY -->
    <key>match</key>
    <string>\b(((0|1)?[0-9][1-2]?)|(Jan(uary)?|Feb(ruary)?|Mar(ch)?|Apr(il)?|May|Jun(e)?|Jul(y)?|Aug(ust)?|Sept(ember)?|Oct(ober)?|Nov(ember)?|Dec(ember)?))[/|\-|\.| ]([0-2]?[0-9]|[3][0-1])[/|\-|\.| ]((19|20)?[0-9]{2})\b</string>
    <key>name</key>
    <string>constant.numeric</string>
</dict>

不幸的是，此扩展不允许您指定自己的样式或规则，但我会记住这一点作为新功能请求。

（我是扩展作者）。

Answer 2

作为一种解决方案（远非出色，但有效..），您可以：

1- 安装提到的“Output Colorizer”VS Code 扩展

2-直接编辑其内部配置/映射文件

（克服这个扩展似乎不支持从 VS 代码编辑器进行自定义的事实......）。

从任何终端，作为默认 vs code 安装的 macos 上的示例，其中 .vscode 目录仅位于您的主目录中（或者，只需尝试查找 .vscode 文件夹所在的位置，具体取决于哪个版本的您已安装的“输出着色器”，在撰写本文时最新版本是 0.1.2），执行：

vi ~/.vscode/extensions/ibm.output-colorizer-0.1.2/src/syntaxes/log.tmLanguage

然后，去修改任何现有的“dict[ionary]”映射（或者通过通常复制现有映射然后修改它们来添加新的映射..），特别是两个值中的任何一个（保持两个硬编码值不变，或者你'将破坏字典映射）。

第一个值是正则表达式，用于定位您想要着色的任何 VS Code 输出日志/字符串。

第二个值用于映射到“已存在的 VS Code 主题令牌”（注意：VS Code 主题由多个主题“令牌”组成，每个令牌代表编辑器中将应用颜色的内容；您此处无法引入新的自定义值/令牌，您只能映射到现有的值/令牌，请参阅此answer了解您可以使用的几个可用令牌）。

根据您已经使用的 VS Code 主题，每个标记将与某种颜色相关联。然后，这样的标记总是可以在 VS Code 中用不同的颜色覆盖，但这是一个单独的讨论，并且有许多现有的线程告诉您如何做到这一点。

首先，我建议您简单地绑定到现有的主题令牌并尝试一下..

例如，这是我添加到上述文件中的一个新/自定义条目，以便突出显示我的 VS Code 输出控制台中的所有“成功”或“成功”或“通过”字符串，以匹配我的 VS Code 主题的“注释” .line”标记颜色（我当前的“comment.line”主题标记颜色设置为绿色）：

            <dict>
                <!-- Success -->
                <key>match</key>
                <string>\b(?i:((\.)*[a-z]|[0-9])*(Successful|Success|Pass))\b</string>
                <key>name</key>
                <string>comment.line</string>
            </dict>

因此，如果您希望输出面板中的某些关键字/字符串具有不同的颜色，而不影响依赖相同主题标记的其他 vs 代码编辑器，那么想法就是像上面提到的那样编辑该映射文件，并使用与您不想修改的主题标记“不同”的主题标记（用于条目的第二个标签）。完成后，这些不同的标记已经与您想要的输出颜色相关联，或者您现在可以进入 vs code 并自定义这些其他标记的颜色，而无需更改您不想更改的标记改变。

3- 重新启动扩展（或 VS Code）以应用您的更改

完成对上述文件的更改后，您需要重新启动 vs code 以使更改生效，或者只需重新启动扩展，进入扩展面板，然后简单地“禁用”+“启用”这个“输出着色器”扩展，瞧！您的 vs code 输出将根据该映射文件突出显示。如果您已经清除了输出，只需执行生成您希望突出显示某些特定关键字的输出的任何任务，它们就会被突出显示（当然，如果您做出了正确的更改！;-)）。