IT知識

VScodeのindent-rainbowでコードを見やすくカラフルにする!

VScodeの拡張機能「indent-rainbow」って知ってる?

プログラミングをしている人に「使っているテキストエディタは?」と聞くとほとんどの人が、VSCode(Visual Studio Code)と答えるのではないでしょうか??

それだけ使用されているVSCodeの人気の理由は、拡張機能が豊富になることです。

拡張機能がわからない方に簡単に説明すると、スマフォのアプリやWordPressのプラグインみたいなもので、自分が使いたい拡張機能をインストールする事で、VSCodeの機能を強化することができます。

一番メジャーなところで言うと、VSCodeを日本語化するのも拡張機能です。

【動画あり】VSCodeを日本語に変える方法利用者が特に多く、エンジニアからプログラミング初心者にも必須のエディタと言えば、VSCode(Visual Studio Code)。 ...

 

そんなVSCodeの豊富な拡張機能の中から、この記事では「indent-rainbow」を紹介します。

indent-rainbowは、その名の通りインデントをカラフルに装飾してくれるので、インデントが見やすくし、間違いを減らすことが可能です。

indent-rainbowの使い方

それでは、「indent-rainbow」のインストールと使い方について解説していきます。

まずは、indent-rainbowの効果がわかりやすくなるようにサンプルのコードを用意します。

それでは、indent-rainbowをインストールします。
インストールは下記のところから行えます。

上記のボタンをクリックしたら、検索窓が現れるのでそこに「indent-rainbow」と入力します。

そうするとindent-rainbowの拡張機能が出てきますので、インストールしてください!
準備はこれだけです!

インストールすると下記の画像のように、インデントごとにカラフルな装飾がされるので見やすくなります。
なお、インストールしたのに上手く反映されない場合は、一度VSCodeを閉じて、再度立ち上げてみてください。

indent-rainbowの使い方のまとめ

いかがでしたか?

非常に簡単にインストール出来て、コードが見やすくなったと思います。

プログラミングを学習し始めた頃は、インデントを整えることを意識しないかもしれませんが、

学習を進めていくとコードが長くなり、インデントを整えるのが、エラー削減のために重要になってきます。

また、他人が見た時にも見やすくなるので、indent-rainbowを使って、インデントを整える癖を付けましょう。

こちらのVSCodeの拡張機能もインデントを整える機能としておすすめです。

【超便利!】VSCodeでインデントを整えるBeautifyって知ってますか!VSコードの拡張機能「Buautify」って知ってる? プログラミングをするのに人気のテキストエディタといえばVSCode(Visua...