きゃらりこ日誌

前回のレビュー記事を書くためにBracketsをしばらく使ってたんですが、初期状態だとタブ・半角スペース・全角スペース・改行が分かりづらかったので、ちょっとだけ秀丸エディタ風にカスタマイズしてみました。
定番の Show Whitespace や 全角空白・スペース・タブ表示拡張機能 ではなく、Visual Studio風に表示してくれるShow Whitespace VS(執筆時点では1.2.4が最新)をインストールして、これをもとにカスタマイズします。

まず、Show Whitespace VSをインストール後、[ヘルプ]→[拡張機能のフォルダーを開く]を選択し、 /user/patlillis.show-whitespace-vs/styles/main.less の中身を以下の手順で書き換えます。

50〜57行目、60〜74行目をコメントアウトする。
一番最後の行の下に、次のCSSを追記。


.CodeMirror {
// 半角スペースを表示
.cm-dk-whitespace-space:before, .cm-dk-whitespace-leading-space:before, .cm-dk-whitespace-trailing-space:before {
content: "␣";
height: 0;
top: 0;
left: 0;
color: Gray; // お好みの色に
}

// タブを表示
.cm-dk-whitespace-tab:before, .cm-dk-whitespace-leading-tab:before, .cm-dk-whitespace-trailing-tab:before {
content: ">";
color: Gray; // お好みの色に
}

// 改行を表示（最終行に改行がなくても表示してしまうが…）
.CodeMirror-line:after {
content: "↵";
color: Gray; // お好みの色に
}
}

改行の表示は、行末に強制的に付加する方法をとっているため、最終行に改行がない場合でも改行の表示があったり、改行コード（LF・CR・CR+LF）の判別機能がなかったりします。
これを解決するためには、拡張機能を自作するしかないようで、難易度が高いのであきらめました。
あとファイル末尾に表示される[EOF]は、個人的には不要なので追加していません。
なお文字色は、適用しているテーマに合わせてやることができると思うのですが、やり方がよくわからなかったので、Grayに決め打ちにしています。
（※後日追記　現在のバージョンでは仕様上、文字色をテーマと合わせることはできないようです。）

【全角スペース】
また全角スペースについてはRicty Diminishedというフォントを使うと、全角スペースを表示してくれるので、これで解決しました。