Visual Studio Code Debug Console的颜色？

Question

调试node.js代码时,有没有办法在Visual Studio Code(版本1.10.2)的调试控制台中显示颜色(如在终端中)？

Answer 1

有关背景故事和角色扮演，请参阅@ /sf/answers/3884571911/ 。

这只是一个无脑的答案。

	版本
测试高达	Visual Studio Code 2021 年 5 月（版本1.63）

文本

console.log( "\u001b[1;31m Red message" );
console.log( "\u001b[1;32m Green message" );
console.log( "\u001b[1;33m Yellow message" );
console.log( "\u001b[1;34m Blue message" );
console.log( "\u001b[1;35m Purple message" );
console.log( "\u001b[1;36m Cyan message" );

背景

console.log( "\u001b[1;41m Red background" );
console.log( "\u001b[1;42m Green background" );
console.log( "\u001b[1;43m Yellow background" );
console.log( "\u001b[1;44m Blue background" );
console.log( "\u001b[1;45m Purple background" );
console.log( "\u001b[1;46m Cyan background" );

重置

console.log( "\u001b[0m Reset text and background color/style to default" );

例子

console.log( "\u001b[1;31m --process: Error" + "\u001b[0m" );

Answer 2

要在 Visual Studio 中从 nodejs 输出彩色消息，您可以在 console.log 方法中使用格式化消息。例如 ：

console.log('\u001b[' + 32 + 'm' + 'hello stack' + '\u001b[0m')

正如在Mocha 中实现的那样。32是颜色代码。您可以在他们的 repo 中找到其他颜色代码和使用示例：https : //github.com/mochajs/mocha/blob/9e95d36e4b715380cef573014dec852bded3f8e1/lib/reporters/base.js#L48

或者作为日志库，您可以使用，例如pinojs + pino-pretty模块，您的日志输出将显示如下：

Answer 3

v1.45 添加了一堆调试主题颜色，请参阅https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_45.md#new-debug-theme-colors

debugView.exceptionLabelForeground：当调试器因异常而中断时，CALL STACK 视图中显示的标签的前景色

• debugView.exceptionLabelBackground：当调试器因异常而中断时，CALL STACK 视图中显示的标签的背景颜色

• debugView.stateLabelForeground：CALL STACK 视图中标签的前景色，显示当前会话或线程的状态

• debugView.stateLabelBackground：CALL STACK 视图中标签的背景颜色，显示当前会话或线程的状态

• debugView.valueChangedHighlight：用于突出显示调试视图中的值更改（即在变量视图中）的颜色

• debugTokenExpression.name：调试视图（即变量或监视视图）中显示的令牌名称的前景色

• debugTokenExpression.value：调试视图中显示的标记值的前景色

• debugTokenExpression.string：调试视图中字符串的前景色

• debugTokenExpression.boolean：调试视图中布尔值的前景色

• debugTokenExpression.number：调试视图中数字的前景色

• debugTokenExpression.error：调试视图中表达式错误的前景色

在 v1.46（v1.46 发行说明）中，添加了一些调试控制台主题项目：

• debugConsole.infoForeground：调试控制台中信息消息的前景色
• debugConsole.warningForeground：调试控制台中警告消息的前景色
• debugConsole.errorForeground：调试控制台中错误消息的前景色
• debugConsole.sourceForeground：调试控制台中源文件名的前景色
• debugConsoleInputIcon.foreground：调试控制台输入标记图标的前景色

针对调试期间显示的内联值（不是在调试控制台中，而是在代码行末尾显示的变量值），v1.57 中添加了一些新颜色：

添加了新颜色来主题化内联值：

• editor.inlineValuesBackground：调试内联值前景文本的颜色
• editor.inlineValuesForeground：调试内联值背景的颜色。

提醒一下，在调试已注册内联值提供程序或设置为 的调试扩展时，会显示内联debug.inlineValues值true。

Answer 4

我想到目前为止最好的方法是将调试输出放入备用目的地:

在启动配置属性中,console可以将设置设置为以下之一:( internalConsole默认情况下,内置调试控制台)externalTerminal(外部cmd窗口)或integratedTerminal(VS代码终端).

外部终端命令行可以进一步在VS码设置指定下列之一下:terminal.external.windowsExec,terminal.external.osxExec,并terminal.external.linuxExec从默认即默认OS终端.

来源:VS Code文档,例如node.js:https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-attributes

Answer 5

为获得最佳效果，还应避免打开控制台。这是我使用 Jest 调试当前文件的配置：

{
    "type": "node",
    "request": "launch",
    "name": "Jest Test (current)",
    "program": "${workspaceFolder}/node_modules/.bin/jest",
    "args": [
        "--config=jest.config.json",
        "--runInBand",
        "${relativeFile}",
    ],
    // The vscode console does not support colors used by Jest output
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
}

Answer 6

单击 Visual Studio 左下角的“设置”图标

点击设置

搜索workbench并在其下方单击子标题appearance。然后点击Edit in settings json

向下滚动，并在最后添加以下代码：

"workbench.colorCustomizations": {
    
        "debugConsole.infoForeground": "#00ff66"
    }

根据您的选择更改颜色代码。

繁荣！现在每个“信息”日志都是绿色的！

如果您想更改错误、警告等日志，只需在下面添加以下内容 "workbench.colorCustomizations": { ... }

请参阅此答案以了解要添加的内容：https ://stackoverflow.com/a/61525127/9420335