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になるので、ターミナルに彩りを添えることができます。