VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法

ツール / 環境

VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法

スポンサードサーチ


indent-rainbowとは?

その名の通り、インデントが色付きになる拡張機能です。

通常のエディタ画面はこんな感じで、インデントは背景色と同じになっています。

このインデントに色を付けられるのが『indent-rainbow』です。

 

ネコーダー
ネコーダー

色を付けられると何がいいの?

直感的にインデントの深さが分かる所…ですかね。

人によっては見ずらいと感じる場合もあるので、好みによってインストールかどうか分かれる拡張機能だと思います。

デフォルトでは虹色ではない、indent-rainbow

インストールすると分かりますが、初期設定(デフォルト)では、でインデントが色づけされます。

 

ネコーダー
ネコーダー
 

レインボーじゃないんかーい

スポンサードサーチ


色をカスタマイズする方法

4色のままでもいいかもしれませんが、せっかくなのでその名の通り、虹色に設定してみます。

以下、手順を示します。

settings.jsonを開く

たどり着き方は色々ありますが、基本的な方法でご説明します。

  1. 「表示」⇛「拡張機能」
  2. 検索でindent-rainbow
  3. 歯車のアイコンをクリック
  4. 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」という別の拡張機能を入れているおかげです。この拡張機能も非常に便利なのでインストールすることをおすすめします。

色を追加する

今回、虹色ということで、7色のカラーコードで虹色を再現しました。

 

ネコーダー
ネコーダー

虹色キター!

 

 

これではさすがに見にくいので、rgbaの括弧内、4つ目の値(透明度)を低くします。(0~1で設定できます。)


すべての透明度の値を0.2にしてみました。

実際のコーディング画面はこのようになります。

いい感じですね。

緑と青の所が見にくいので、そこだけ透明度の値を上げてもいいかもしれませんね。

 

まとめ

今回虹色にしてみましたが、虹色のカラーコードを検索していると、流行りの『グラデーション』が検索結果に引っかかりました。

「インデントをグラデーションさせたりすることも出来るのかな?」

と少しワクワクしました。


いつも使うエディタだからこそ、使いやすく、そしてワクワクできるデザインで使いたいですね。

コメント

タイトルとURLをコピーしました