Prettified timestamps and error reports in --pretty #20416
Conversation
Timestamps look like Gulp's, with grey times inside white brackets.
Files have cyan filenames, yellow line and column numbers, and grey TS{####} errors. I wonder if those are actually useful for folks using the --pretty CLI: are they used for anything outside Visual Studio... Can we just get rid of them?
Re-uses compiler/program's color logic in compiler/watch. The relevant variables are now exported and marked `@internal`. Is there a preferred way of re-using this code in both those files?
| @@ -241,22 +241,27 @@ namespace ts { | |||
| return errorMessage; | |||
| } | |||
|
|
|||
| const redForegroundEscapeSequence = "\u001b[91m"; | |||
| const yellowForegroundEscapeSequence = "\u001b[93m"; | |||
| const blueForegroundEscapeSequence = "\u001b[93m"; | |||
There was a problem hiding this comment.
Note: the blue sequence was the same as yellow before. I'm guessing that's a behavior bug that was never exposed. I've removed the sequence but left the behavior of using the yellow color in getCategoryFormat.
There was a problem hiding this comment.
Note: the blue sequence was the same as yellow before. I'm guessing that's a behavior bug that was never exposed.
We don't actually use ErrorCategory.Warning right now (and Message is only used for help output and quickfixes/refactorings), so it would never get noticed/changed until it mattered, like for #19126
IMO, we should preemptively change Message to dark blue or something, just in case.
|
@DanielRosenwasser This seems reasonable and I like the slightly more colorful look; do you have any opinions? |
|
Just me pontificating here.. would be better to have the error message slightly different shade from the code below it, just to create a separation between the two sections? |
That would be great, but AFAIK we're limited to very basic console colors (white, grey, yellow, etc.) using the way it resets them now. Let's look into more advanced things & how chalk&co do them after this? |
|
I believe 16million color escapes read like |
JoshuaKGoldberg
force-pushed
the
tell-me-im-pretty
branch
from
7026177 to
98b64db
Compare
src/compiler/program.ts
Outdated
| const yellowForegroundEscapeSequence = "\u001b[93m"; | ||
| const blueForegroundEscapeSequence = "\u001b[93m"; | ||
| /** @internal */ | ||
| export const foregroundColorEscapeSequences = { |
There was a problem hiding this comment.
This can just be a const string enum ForegroundColorEscapeSequence, and it doesn't need to be exported at all
src/compiler/watch.ts
Outdated
| @@ -48,6 +48,14 @@ namespace ts { | |||
| }; | |||
| } | |||
|
|
|||
| export function createWatchDiagnosticReporterWithColor(system = sys): DiagnosticReporter { | |||
There was a problem hiding this comment.
Hmm, I just saw this. It's unfortunate that we need a new reporter. This should probably be marked /** @internal */ though.
|
Thanks @JoshuaKGoldberg! |
|
Whoo! |
|
Style suggestions:
ASCII escapes generally support 2 shades per colour (three for grey/silver/white). Same applies to pure Windows console colours, of course.
What's worth noticing in timed banners is seconds - those are most likely to differ, not whole timestamps, nor brackets around. Filename, position, error labels all relate to an error -- ideally all share the same general colour (red). Also worth highlighting line number, but fading out character offset. Error message is the key piece of info, having it as bright white make it stand out and very readable. |
Timestamps look like Gulp's, with grey times inside white brackets.
Files have cyan filenames, yellow line and column numbers, and grey TS{####} errors. I wonder if those are actually useful for folks using the --pretty CLI: are they used for anything outside Visual Studio... Can we just get rid of them?
Re-uses compiler/program's color logic in compiler/watch. The relevant variables are now exported and marked
@internal. Is there a preferred way of re-using this code in both those files?Todo: fix test failuresHere are the after and before photos in Windows cmd...
...and cmder:
