TypeScript Compilerによるメッセージが殺風景なので色をつける。

tsc -wで書きだしたJavaScriptファイルをwatchifyでブラウザ用にするという運用をしています。watchify、早い。

殺風景

ところでtscの出力は殺風景ですが、コンパイル警告が出ていないうちは問題ありません。しかし某thunkMiddlewareなどのようにtsdなどの問題(?)によりエラーが出っぱなしになってくると、自分のエラーなのかわかりにくくなってきます。

そこで、エスケープシーケンスを埋めることにより、ターミナル上の文字に色をつけることができる機能を利用します。

色をつけるエスケープシーケンス

\e[エスケープシーケンス値mで開始し、\e[0mで終了するのが基本的な流れです。

0もエスケープシーケンス値の一つでAll attributes offという仕事をします。

使える値の一覧はこちら。

ASCII Table - ANSI Escape sequences

特によく使うものをピックアップしました。

Text attributes
0All attributes off
1Bold on
4Underscore (on monochrome display adapter only)
5Blink on
7Reverse video on
8Concealed on
Foreground colors
30Black
31Red
32Green
33Yellow
34Blue
35Magenta
36Cyan
37White

エスケープシーケンス埋め込みにはsedを使います

tsc -w | sed -r -e $'s/[0-9]{2}:[0-9]{2}:[0-9]{2}/\e[1m&\e[0m/g' -e $'s/\([0-9]+,[0-9]+\)/\e[31m\e[1m&\e[0m/g' -e $'s/^.+\.tsx/\e[32m&\e[0m/' -e $'s#\'[^\']*\'#\e[36m&\e[0m#gi'

これで警告の出ているファイル名がGreen、行数がRed、変数名などはCyanになるので、ターミナルに彩りを添えることができます。