Proposal: Support colored messages in Output window

[SetTrend]

It's currenty hard to read TypeScript errors in VS Code:

There is a --pretty option for TypeScript, but AFAIK it doesn't show any effect when applying it using gulp-typescript or other task runner plug-ins.

So I'd like to suggest to support colored messages in Output window.


VS Code may be "skinned", or, "themed", which may cause interference with colored Output text. So if you decide to implement colored Output text I suggest to change Output colors like the following if their respective brightness will be getting too close to the Output panel's background color brightness:

/** Class definition for RGB color.
  */
class Rgb
{
  constructor( public r: number
             , public g: number
             , public b: number
             , public name: string
             );

  get isBright() : boolean { return r + g + b > 348; }
  get isDark() : boolean { return !isBright(); }

  /** converts blue <=> darkblue; red <=> darkred; white <=> black, etc. */
  function inverseLuminance() : Rgb { ...; return this; }
}



/** Function used by the Output panel for setting the panel's text color.
  * @param textColor - Text color requested by task runner for output.
  * @param bgColor - Output panel background color.
  */
function getTextColor(textColor: Rgb, bgColor: Rgb) : Rgb
{
  // If the brightness of the desired color is too close to the brightness
  // of the Output panel's background color, inverse the desired color's
  // luminance, i.e. switch from yellow to darkyellow etc.
  if (Math.abs((textColor.r + textColor.g + textColor.b)
     - (bgColor.r + bgColor.g + bgColor.b)) < 30
     )
  {
    return textColor.inverseLuminance();
  }

  return textColor;
}

This will result in considerably better legible output messages:

(Text color for task runner's time stamp and basic logging information is suggested to be lightgray. Default task output text color is suggested to be white.)

[joaomoreno]

@dbaeumer @bpasero ping

[bpasero]

Duplicate of #243

[SetTrend]

I'd like to add the following alternative suggestion for coloring the Output panel:

In my above suggestion I was assuming that the error messages are getting emitted from the corresponding task runner's task in color. Looking from today's point of view I believe this was a false assumption.

Here's why:

The error messages sent to the Output panel are supposed to be piped through a so-called Problem Matcher filter. So the corresponding Problem Matcher outputs each part of an error message. Thus, the VS Code implementation responsible for writing a Problem Matcher's output is actually responsible for reasonably coloring the output and knows which part of an error message it is writing.

In this case each part of the error message may be colored by the VS Code implementation responsible for reading/writing a Problem Matcher's output, and colors may be defined for each of an error message's part in the VS Code color scheme itself. No need to adapt any color information from the task runner task that's been emitting the error message.

Moreover, provided that my proposal of a //# task pragma comment (#1789) will be accepted, the problemMatcher property will assign a Problem Matcher for the output of a task runner's task. So coloring may then be applied there, too. And we can get rid of the (then redundant) tasks.json implementation.

[mbleigh]

I'd very much like to see terminal-supplied color output supported. It's super-hard to glance and read output right now, and forcing everyone to use a problem matcher to color after the fact seems like an inferior solution. Thanks!

[cameronwp]

+1 to @mbleigh's comment on .profile formatted output

[triceam]

We just released a language extension that brings colorization to the Output panel. Basically, it is a language extension that adds the text/x-code-output mime type, which is used by the Output panel.

Get it here: https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer

Source here: https://github.com/IBM-Bluemix/vscode-log-output-colorizer Please help contribute! Bugs, feature requests, contributions all welcome.

[zjhmale]

Hi, @SetTrend Can you please explain how do you actually make the output channel colorized as you showed in the second picture? Thanks in advance!

[SetTrend]

Hi @zjhmale, what I've been providing was just a graphic mockup, created with Corel Photo-PAINT. I didn't actually implement anything. I'm sorry for not providing any better news.

[SetTrend]

Hi @zjhmale, what I've been providing was just a graphic mockup, created with Corel Photo-PAINT. I didn't actually implement anything. I'm sorry for not providing any better news.

Yet, looking at @triceam's proposal, it seems to actually do what I was looking for.

[zjhmale]

@SetTrend Thanks for the reply, so basically we can only create some syntax file for the output channel in order to highlight something inside right now 😅

[dbaeumer]

For executing tasks this will be solved by executing the task in the terminal instead of the output windows. See is already available in beta (https://code.visualstudio.com/updates/v1_10#_task-support). Since the terminal has full coloring support this will then work out of the box assuming that the program executed as a task emits the right coloring.

[FuelledByCoffee]

Why doesn't it just use the colors from the terminal in the first place? This seems like such an obvious feature.

[ZodmanPerth]

@dbaeumer All I had to do was up my tasks.json to version 2.0.0 and my grunt build started using the terminal window. 👍
Now, if only grunt would emit colours properly when running my powershell script. sigh, and don't ask. 😏