コピー2021.02.27こんにちは。たいら(@tairaengineer2)です。転職を繰り返し現在4社経験している、10年目エンジニアです。Codeで拡張機能の1つのindent-rainbowの設定を変更するやり方を解説します。indent-rainbowの紹介とインストールの仕方については、こちらの記事をご参考ください。Code】拡張機能のindent-rainbowの紹介とインストールするやり方を解説します目次indent-rainbowを変更するにはルートその1:拡張機能から飛ぶルートその2:歯車マークから飛ぶsettings.jsonを修正してインデントの色を変更するまとめ:indent-rainbowのインデントの色を変更してみようindent-rainbowを変更するにはindent-rainbowを変更するには、settings.jsonというファイルを修正する必要があります。このファイルにたどり着くには、2つルートがあります。ルートその1:拡張機能から飛ぶルートその1:拡張機能から飛ぶ方法です。拡張機能のタブを開き、indent-rainbowの歯車マークを選択します。ドロップダウンリストが表示されるので、その中の【拡張機能の設定】を選択します。下画像のようにindent-rainbowの設定を修正ができる画面が表示されます。ルートその2:歯車マークから飛ぶルートその2:歯車マークから飛ぶ方法です。左下の歯車マークを選択します。ドロップダウンリストが表示されるので、その中の【設定】を選択します。Codeのいろんな設定が変更できる画面が表示されます。検索窓にindent-rainbowを入力すると自動で検索され、下画像のようにindent-rainbowの設定を修正ができる画面が表示されます。settings.jsonを修正してインデントの色を変更するsettings.jsonを修正して、インデントの色を変更していきます。Rainbow:Colorsの【settings.jsonで編集】を選択します。settings.jsonが開きます。デフォルト値は下記です。["rgba(255,255,64,0.07)","rgba(127,255,127,0.07)","rgba(255,127,255,0.07)","rgba(79,236,236,0.07)"]インデントの色を変更するにはindentRainbow.colors内のrgbaを修正していきます。行を追加したり削除してもOKです。Codeを再起動させることです。再起動しないと修正した内容が反映されませんので、ご注意ください。1番上のrgbaだけを"rgba(255,0,0,1)",1"rgba(255,0,0,1)",に修正して保存します。settings.json修正前の状態は以下の画像の通りでした。Codeを再起動すると、下記のようにインデントの色が変更されていることが確認できました!今回は修正前後を分かりやすくするため真っ赤にしました。このような色だと目が疲れるかと思いますので、ご自身の好みに合った色に調整して頂ければと思います!rgbaの値を調べるサイトは、こちらの2サイトがおすすめです。Codeの拡張機能の1つのindent-rainbowのインデントの色を変更するやり方の解説です。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。Codeプロフィールこのブログを運営しているたいらと言います。プログラム言語を合計5言語経験している12年目エンジニアのブロガーです。このブログでは、どこよりも分かりやすくプログラムやツールのインストール方法などを解説し、エンジニアにの疑問解決に役立つ情報を発信します。お問い合わせなどがありましたら、下記のリンクからお願いします。お問い合わせこちらから記事の検索ができます。IDEAXAMPPお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。