環境TwitterFacebookPocketLINEPinterestコピー2019.08.12VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法スポンサードサーチContentsindent-rainbowとは?デフォルトでは虹色ではない、indent-rainbow色をカスタマイズする方法settings.jsonを開くコードを追加する色を追加するまとめindent-rainbowとは?その名の通り、インデントが色付きになる拡張機能です。通常のエディタ画面はこんな感じで、インデントは背景色と同じになっています。このインデントに色を付けられるのが『indent-rainbow』です。色を付けられると何がいいの?直感的にインデントの深さが分かる所...ですかね。人によっては見ずらいと感じる場合もあるので、好みによってインストールかどうか分かれる拡張機能だと思います。デフォルトでは虹色ではない、indent-rainbowインストールすると分かりますが、初期設定(デフォルト)では、4色でインデントが色づけされます。ネコーダーレインボーじゃないんかーいスポンサードサーチ色をカスタマイズする方法4色のままでもいいかもしれませんが、せっかくなのでその名の通り、虹色に設定してみます。以下、手順を示します。indent-rainbow歯車のアイコンをクリックcolorsの下の「settings.jsonで編集」をクリックコードを追加するこのsettings.jsonでコードを追加します。indent-rainbowのインストール画面の概要欄に、デフォルトのコードが載っていますので、そちらをコピペするのが確実だと思います。(↓の画像で選択している部分です)一応コードも貼っておきます。[“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に貼り付けます。Highlight」という別の拡張機能を入れているおかげです。この拡張機能も非常に便利なのでインストールすることをおすすめします。色を追加する今回、虹色ということで、7色のカラーコードで虹色を再現しました。虹色キター!これではさすがに見にくいので、rgbaの括弧内、4つ目の値(透明度)を低くします。(0~1で設定できます。)すべての透明度の値を0.2にしてみました。実際のコーディング画面はこのようになります。緑と青の所が見にくいので、そこだけ透明度の値を上げてもいいかもしれませんね。まとめ今回虹色にしてみましたが、虹色のカラーコードを検索していると、流行りの『グラデーション』が検索結果に引っかかりました。「インデントをグラデーションさせたりすることも出来るのかな?」と少しワクワクしました。いつも使うエディタだからこそ、使いやすく、そしてワクワクできるデザインで使いたいですね。Serverという拡張機能で表示されたページとブラウザで表示したページでズレがありました。CSSSass(sass,scss)でクラス名を自動補完してくれるVSCodeのおすすめ拡張機能(プラグイン)BEMやMindBEMdingではクラス名が長くなるので、手が疲れるし時間がかかるし、打ち間違えをする可能性もあります。Sass(scss)でもクラス名を自動補完してくれるVSCodeの拡張機能(プラグイン)をご紹介。コメントをキャンセルメールアドレスが公開されることはありません。上に表示された文字を入力してください。小学校・中学校の先生Web未経験でWebデザイナー/コーダーに転職Webデザインやプログラミングなど様々な情報を発信しています。YouTubeにドラム関連の動画を投稿しております。小学校・中学校の先生Web未経験でWebデザイナー/コーダーに転職Webデザインやプログラミングなど様々な情報を発信しています。YouTubeにドラム関連の動画を投稿しております。!失敗するコーディング方法5選+おすすめ対策方法2019.10.142019.10.22Sass(sass,scss)でクラス名を自動補完してくれるVSCodeのおすすめ拡張機能(プラグイン)2019.11.042019.11.05タイトルとURLをコピーしました。