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 | |
|---|---|
| 0 | All attributes off |
| 1 | Bold on |
| 4 | Underscore (on monochrome display adapter only) |
| 5 | Blink on |
| 7 | Reverse video on |
| 8 | Concealed on |
| Foreground colors | |
|---|---|
| 30 | Black |
| 31 | Red |
| 32 | Green |
| 33 | Yellow |
| 34 | Blue |
| 35 | Magenta |
| 36 | Cyan |
| 37 | White |
エスケープシーケンス埋め込みには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になるので、ターミナルに彩りを添えることができます。