Visual Studio Code | インデント数の差を見やすくする拡張機能「indent-rainbow」

2022-07-16Visual Studio Code 拡張機能,Visual Studio Code

Visual Studio Code | インデント数の差を見やすくする拡張機能「indent-rainbow」

VScodeでインデント数に応じて色分けし、ソースコードを見やすくする拡張機能「indent-rainbow」の使い方を紹介しています。

確認環境

Windows10 デスクトップPC
Visual Studio Code バージョン 1.68
indent-rainbow バージョン 2.0.0

indent-rainbowのインストール

「indent-rainbow」は拡張機能の検索でindentと検索すれば上位に表示されます。

インストール後、他の拡張機能や特別な設定は必要はなく、そのまま利用可能になります。

indent-rainbowの基本的な操作と使い方

「indent-rainbow」の基本的な操作を紹介しています。

この拡張機能は、インストールして有効化している時点でインデント数に応じて色分けを実行し、機能します。

indent-rainbowの表示サンプル

indent-rainbowのオプション設定

「indent-rainbow」で設定可能なオプションを紹介しています。

現在のバージョンですと、デフォルトだと薄すぎる気がしますので設定で調節した方が良いかもしれません。

Color On White Space Only(ホワイトスペースの色)

エラーカラーが無効になっている場合、インデントカラーは、レンダリングされた文字(空白、タブ、およびその他の文字)の長さがタブサイズで割り切れるまでレンダリングされます。

このオプションをオンにすると、空白とタブのみがレンダリングされます。

初期値:オフ

Color(色)

色として使用される色(hex、rgba、rgb)文字列の配列は、任意の長さにすることができます。

Error Color(エラーの色)

setting.jsonにて編集できます

インデントにエラーがある場合のインデントカラー。

任意のタイプのWebベースのカラーフォーマット(hex、rgba、rgb)にすることができます。

初期値:rgba(128,32,32,0.8)

Excluded Languages(除外する言語)

どの言語のインデントレインボーを非アクティブ化する必要があります。

空のままにすると無視されます。

setting.jsonにて編集できます

Indent Setter(インデントのセッター)

言語のインデント設定を自動的に変更します。

setting.jsonにて編集できます

Indicator Style(インジケーターのスタイル)

クラシックモードでは、フルカラーのタブを使用して表示を示します。

ライトモードでは、デフォルトのインデントガイドラインと同様の色付きの境界線のみが表示されます。

エディタ›ガイド:インデントを使用して、デフォルトのインジケータを無効にできます。

初期値:classic

Light Indicator Style Line Width(インジケーターの線幅)

このプロパティは、ライトモードを使用する場合のインデントインジケーターlineWidthを定義します。

初期値:1

Tabmix Color(タブミックスカラー)

インデントにスペースとタブが混在している場合のインデントカラー。

任意のタイプのWebベースのカラーフォーマット(hex、rgba、rgb)または空の文字列にすることができます。

初期値:rgba(128,32,96,0.6)

Update Delay(更新の遅延)

エディターが更新されるまでのミリ秒単位の遅延時間を設定できます。

初期値:100