Bracket Pair Colorizerって使いやすい？
Visual Studio Codeの拡張機能でBracket Pair Colorizer(Bracket Pair Colorizer2)が有名です。[]、{}、()のペアを色分けしてくれるものですが、私にはどうしてもこれが使いやすいと思えず、他になにかないかを探していました。カッコの色分けをしてくれるのですが、逆に言うと色分けしかしてくれません。カッコを太字で強調してくれたらより見やすいのにと思って、Bracket Pair Colorizerを色々いじってみたのですが、挫折しました。
Bracket HighlighterとScoper
そんなときに見つけたのがBracket HighlighterとScoperでした。Bracket Highlighterはカッコだけではなく、カッコの中まで修飾してくれます。
例えばこんな感じで、カッコの外側の色を落とし、カッコの内側のバックグラウンドを変えるということができます。もちろん、カッコだけを強調することこともできます。色分けだけでなく、カッコの中の書体を変えることもできます。例えばこの例のような太字以外にも、斜体やアンダーラインということもできます。
ただ、Bracket Highlighterは文字のある部分の背景色しか変更できません。これだと見栄えが悪いと思われる方もいらっしゃるかもしれません。そのときに使えるのがScoperです。
Bracket Highlighterと併用し、双方の背景色を同じ色に設定するとこのように矩形で色分けしてくれます。これでカッコの範囲がすごくわかりやすくなります。カーソルをif分に合わせると・・・
こんな感じになります。この設定は以下のとおりです。背景が#666666なのは例示のためです。これだと見にくいので私は#222222にしています。blurOutOfScopeTextというのが、スコープ外のテキストを暗くするという設定で、blurOpacityがどれだけ暗くするかの設定になります。
"BracketHighlighter.backgroundColor": "#666666",
"BracketHighlighter.textColor": "none",
"BracketHighlighter.textDecoration": "none",
"BracketHighlighter.highlightScopeFromText": true,
"BracketHighlighter.maxLineSearchCount": 10000,
"BracketHighlighter.blurOutOfScopeText": true,
"BracketHighlighter.blurOpacity": "0.5",
"BracketHighlighter.letterSpacing": "1px",
"BracketHighlighter.fontWeight": "bold",
"BracketHighlighter.ignoreContent": false,
"BracketHighlighter.text": null,
"scoper.overviewColor": "#aa0000",
"scoper.endColor": "#003300",
"scoper.highlightColor": "#666666",
"scoper.extendHighlight": true
参考になれば幸いです。