VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法
indent-rainbowとは？
その名の通り、インデントが色付きになる拡張機能です。
通常のエディタ画面はこんな感じで、インデントは背景色と同じになっています。
このインデントに色を付けられるのが『indent-rainbow』です。
色を付けられると何がいいの？
直感的にインデントの深さが分かる所…ですかね。
人によっては見ずらいと感じる場合もあるので、好みによってインストールかどうか分かれる拡張機能だと思います。
デフォルトでは虹色ではない、indent-rainbow
インストールすると分かりますが、初期設定（デフォルト）では、４色でインデントが色づけされます。
レインボーじゃないんかーい
色をカスタマイズする方法
４色のままでもいいかもしれませんが、せっかくなのでその名の通り、虹色に設定してみます。
以下、手順を示します。
settings.jsonを開く
たどり着き方は色々ありますが、基本的な方法でご説明します。
- 「表示」⇛「拡張機能」
- 検索でindent-rainbow
- 歯車のアイコンをクリック
- colorsの下の「settings.jsonで編集」をクリック
コードを追加する
このsettings.jsonでコードを追加します。
indent-rainbowのインストール画面の概要欄に、デフォルトのコードが載っていますので、そちらをコピペするのが確実だと思います。（↓の画像で選択している部分です）
一応コードも貼っておきます。
“indentRainbow.colors”: [
“rgba(255,255,64,0.07)”,
“rgba(127,255,127,0.07)”,
“rgba(255,127,255,0.07)”,
“rgba(79,236,236,0.07)”
]
settings.jsonに貼り付けます。（『，』を忘れずに！）
※画像では文字の部分がカラーコードの色で染まっていますが、これは既に「Color Highlight」という別の拡張機能を入れているおかげです。この拡張機能も非常に便利なのでインストールすることをおすすめします。
色を追加する
今回、虹色ということで、７色のカラーコードで虹色を再現しました。
虹色キター！
これではさすがに見にくいので、rgbaの括弧内、４つ目の値（透明度）を低くします。（０～１で設定できます。）
すべての透明度の値を0.2にしてみました。
実際のコーディング画面はこのようになります。
いい感じですね。
緑と青の所が見にくいので、そこだけ透明度の値を上げてもいいかもしれませんね。
まとめ
今回虹色にしてみましたが、虹色のカラーコードを検索していると、流行りの『グラデーション』が検索結果に引っかかりました。
「インデントをグラデーションさせたりすることも出来るのかな？」
と少しワクワクしました。
いつも使うエディタだからこそ、使いやすく、そしてワクワクできるデザインで使いたいですね。
コメント