[Feature] Custom color for Output Console Panel

[flixyudh]

🚀 Feature request

What do you want to be added?

Custom colors for Output Panel to make it easier for debugging, since current Output Panel text is only show white color

Current Output Panel

Debug Console Panel has this benefit:

• debugConsole.infoForeground: Foreground color for info messages in debug REPL console.

• debugConsole.warningForeground: Foreground color for warning messages in debug REPL console.

• debugConsole.errorForeground: Foreground color for error messages in debug REPL console.

• debugConsole.sourceForeground: Foreground color for source filenames in debug REPL console.

I hope we can use similar setup for Output Console Panel too,

Finding possible duplicated issue:

#1272 microsoft/vscode#11005

Trying

I have tried to use Styling Console Output

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

but all text is printed out

currently i've craete my own snippet to create custom console.log like this:

{
	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "csl",
		"body": [
			"console.log('[${TM_FILENAME_BASE}] ${1:text}', ${0:data})",
		],
		"description": "Log output to console"
	}
}

IMHO this help me to control which file is use the console.log, but it's not enough when print large text (e.g. JSON, networking , warning)

Sorry my english is not good

What scenarios will this solve?

What will this allow you to do? Will this benefit other developers?
short answer is Yes

[JiglioNero]

Hi @zxccvvv and thanks for reachig us. We have already investigated the similar issue and started implementing it in this PR, by defining the language and grammar for the output channel. But we faced some incorrect behavior, in case several extensions with output colorizing feature are working at the same time: at the moment we cannot specify the extension to colorize the concrete output, so another extension can colorize the output of React Native Tools.

We found out, that for now the functional to control which extension should colorize logs has not been implemented yet. In VS Code repositore there is the issue about that problem. So we decided to wait until the problem is resolved to avoid incorrect colorizing.

However, we can provide you the version of React Native Tools extension with the current implementation of this feature. You can install and try that version following these steps:

1. Download and unzip compiled extension VSIX.
2. Uninstall extension
3. Close VS Code
4. Open VS Code
5. Click Extensions -> Views and More Actions... -> Install from VSIX... And select the downloaded VSIX

[flixyudh]

Hi @JiglioNero, thank you for an awesome extension,
i've been implemented custom vscode react native extension as suggested,
and it looks good at the moment,

but can i change the default of colors that have been defined?
or even customize the color something like this:

{
  'string': 'color (HEX,RGB[A])',
  'url': 'color (HEX,RGB[A])',
  'TAG': 'color (HEX,RGB[A])'
}

cause it's still not look good for long logging

[JiglioNero]

Hi @zxccvvv , we added the ability to customize the React Native Tools output logs. For now it is implemented via editor.tokenColorCustomizations parameter and textMateRules in settings.json file. You can find more info about color tags here.
For now we’ve decided to postpone further implementation of this feature and wait until VS Code adds ability to colorize specific output channels (microsoft/vscode#19561). In the future we’ll also try to add configuration of logs colors to the extension settings instead of the current approach.
Here is the VSIX with the current implementation of logs colors customization.

[flixyudh]

Closed since the current VSIX approach my expected result,

Thank You @JiglioNero