Stylize tsc's error messages with color and context #5140

DanielRosenwasser · 2015-10-06T21:11:09Z

This change seeks to make our output a little easier on the eyes and addresses #3852. I suggest this PR's final changes be reviewed rather than going commit-by-commit.

Firstly, a new flag is introduced: --diagnosticStyle. It accepts the options pretty and simple. It is currently marked as experimental, and we can bikeshed over the names later.

If --diagnosticStyle simple is used, the user will get the same behavior as they experience today. Note that simple is left as the default.

If --diagnosticStyle pretty is used as an option, then we check if we are outputting to a terminal-style descriptor. If we are entirely sure, then we stylize the output with color. If not (e.g. output is being piped, forwarded to a file, etc.) we make the output readable so that no special control characters are used in the output.

Here's some screenshots/gifs to give you an idea of what this looks like right now.

Monokai

Solarized Light

Terminal Basic

My Stupid Terminal Theme

Cygwin's MinTTY

cmd.exe

GNOME Terminal Defaults in Ubuntu

…rEach.

…n Windows.

Conflicts: src/compiler/sys.ts src/compiler/tsc.ts

… 'pretty'.

Conflicts: src/compiler/diagnosticInformationMap.generated.ts src/compiler/diagnosticMessages.json src/compiler/sys.ts src/compiler/tsc.ts

Conflicts: src/compiler/commandLineParser.ts

myitcv · 2015-10-06T21:27:33Z

Note that simple is left as the default.

Thanks. This should mean that any tools that consume the output from tsc continue to work.

DanielRosenwasser · 2015-10-06T21:29:37Z

@myitcv this was one of the original concerns I heard a lot of from other members of the team; however, I think it would be a good idea to make it a default option in tsconfig.json when using tsc --init.

Gaelan · 2015-10-06T23:03:16Z

One thing I would really appreciate would be some sort of coloring for the "starting incremental recompilation" message, so we can more easily tell which errors are current.

tinganho · 2015-10-07T03:44:16Z

Awesome that it shows the line numbers! I would also like the message when overflowed to be tabbed to the starting position. For example, the text part type 'I' was too long and began on the next line on column 0. It would be awesome if that part began in column 2 instead.

I guess you would add colors on the messages too?

DanielRosenwasser · 2015-10-07T04:10:28Z

@tinganho I think terminal size detection/wrapping is better left for a separate issue/PR.

mhegazy · 2015-11-02T20:33:57Z

src/compiler/tsc.ts

+            let hasMoreThanFiveLines = (lastLine - firstLine) >= 4;
+            let gutterWidth = (lastLine + 1 + "").length;
+            if (hasMoreThanFiveLines) {
+                gutterWidth = Math.max("...".length, gutterWidth);


capture the ellipses in a const, and so is its length.

also applies to the squiggle down below.

mhegazy · 2015-11-02T20:40:20Z

LGTM. a few nits, but other than than that 👍

mhegazy · 2015-11-02T20:41:38Z

please add a snippet about it in https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript

Stylize tsc's error messages with color and context

DanielRosenwasser added 18 commits June 30, 2015 23:26

Add support to tell whether output directs to a terminal emulator.

ba7fade

Got "prettier" error printing working.

f660bd3

Just squiggle the entire line for middle lines (sans trailing space).

17f443a

Give the new reporter a more reasonable name.

fdbea8b

Make output reliant on whether stdout redirects to a terminal; use fo…

d8e462d

…rEach.

Bring back 'reportDiagnostics'.

cc6b04c

Don't expand tabs; just use a space.

99f6985

Fixed out of bounds error; made index start directly at the line number.

85b54e8

Use 'process.stdout.write' to ensure colors get displayed correctly o…

dda058b

…n Windows.

Limit errors to 5 lines, fixed some other issues.

3c04dff

Merge branch 'master' into iFeelPrettyErr

ea1882d

Conflicts: src/compiler/sys.ts src/compiler/tsc.ts

Stylize gutter.

44f3c0c

Added '--diagnosticStyle' compiler argument with options 'simple' and…

ac5bed8

… 'pretty'.

Merge branch 'master' into iFeelPrettyErr

7c73a66

Conflicts: src/compiler/diagnosticInformationMap.generated.ts src/compiler/diagnosticMessages.json src/compiler/sys.ts src/compiler/tsc.ts

Moved JSX diagnostics to a more sensical spot.

2b4febe

Only use colors if we are certain we are using a pseudoterminal.

c3e00a2

Just make the compiler option internal.

5c5fca6

Merge branch 'master' into iFeelPrettyErr

87554cb

Conflicts: src/compiler/commandLineParser.ts

msftclas added the cla-not-required label Oct 6, 2015

DanielRosenwasser mentioned this pull request Oct 6, 2015

Improve accessibility on terminal output #3852

Closed

DanielRosenwasser added 2 commits October 30, 2015 18:10

Merge branch 'master' into iFeelPrettyErr

fa2e614

Fixed 'tsconfig.json' ordering.

48c2bb1

mhegazy reviewed Nov 2, 2015
View reviewed changes

DanielRosenwasser added 3 commits November 2, 2015 13:12

Added colors to diagnostic types, addressed some CR feedback.

4219c5f

Just name the option 'pretty' for now.

654cbd9

Forget about tty detection. It won't work in build tools.

40f10ab

DanielRosenwasser force-pushed the iFeelPrettyErr branch from a15c0de to 40f10ab Compare November 2, 2015 23:23

DanielRosenwasser added 3 commits November 2, 2015 15:28

Merge branch 'master' into iFeelPrettyErr

e5f1053

Merge branch 'master' into iFeelPrettyErr

32b259e

;

ce24bcb

DanielRosenwasser added a commit that referenced this pull request Nov 3, 2015

Merge pull request #5140 from Microsoft/iFeelPrettyErr

38b990b

Stylize tsc's error messages with color and context

DanielRosenwasser merged commit 38b990b into master Nov 3, 2015

DanielRosenwasser deleted the iFeelPrettyErr branch November 3, 2015 00:31

DanielRosenwasser mentioned this pull request Nov 3, 2015

tsc: Display source line and mark position where error occurred #4024

Closed

blakeembrey mentioned this pull request Nov 3, 2015

Prettier error messages TypeStrong/ts-node#25

Closed

mhegazy mentioned this pull request Dec 9, 2015

Output code snippet #2145

Closed

weswigham mentioned this pull request Sep 9, 2016

Add "related spans" to diagnostic messages #10489

Closed

microsoft locked and limited conversation to collaborators Jun 19, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Stylize tsc's error messages with color and context #5140

Stylize tsc's error messages with color and context #5140

Uh oh!

DanielRosenwasser commented Oct 6, 2015

Uh oh!

myitcv commented Oct 6, 2015

Uh oh!

DanielRosenwasser commented Oct 6, 2015

Uh oh!

Gaelan commented Oct 6, 2015

Uh oh!

tinganho commented Oct 7, 2015

Uh oh!

DanielRosenwasser commented Oct 7, 2015

Uh oh!

mhegazy Nov 2, 2015

Uh oh!

mhegazy Nov 2, 2015

Uh oh!

mhegazy commented Nov 2, 2015

Uh oh!

mhegazy commented Nov 2, 2015

Uh oh!

Uh oh!

Stylize tsc's error messages with color and context #5140

Stylize tsc's error messages with color and context #5140

Uh oh!

Conversation

DanielRosenwasser commented Oct 6, 2015

Uh oh!

myitcv commented Oct 6, 2015

Uh oh!

DanielRosenwasser commented Oct 6, 2015

Uh oh!

Gaelan commented Oct 6, 2015

Uh oh!

tinganho commented Oct 7, 2015

Uh oh!

DanielRosenwasser commented Oct 7, 2015

Uh oh!

mhegazy Nov 2, 2015

Choose a reason for hiding this comment

Uh oh!

mhegazy Nov 2, 2015

Choose a reason for hiding this comment

Uh oh!

mhegazy commented Nov 2, 2015

Uh oh!

mhegazy commented Nov 2, 2015

Uh oh!

Uh oh!