Visual Studio Codeの機能拡張しよう!

Visual Studio Code(以後VS Code)で便利なプラグインをインターンの学生に教えて貰いましたので共有しておきます。
ホントに便利で良かったですζ(*’ω’*)ζ

せっかくなのでVS Codeでプラグインのインストール方法なども合わせて紹介します。

VS Codeを起ち上げよう

まずはVS Codeを起ち上げてください。
左側のメニューアイコンで上から5個目ある四角いアイコンをクリックするとプラグインメニューが開きます。

上記のようなメニューが出てきたでしょうか?

上の項目が有効になっているプラグイン。

下がオススメしてくるのプラグインです。

入れたいプラグイン名で検索しよう

Marketplaceと書かれている入力欄にプラグイン名を入力してインストールしていきます。

該当のプラグインをクリックしたら詳細ページのようなものが出ます。

そこのインストールボタンを押すだけでインストールされます。

場合によってはVSCodeの再起動が必要ですが、簡単ですね。

Bracket Pair Colorizer

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

対になっている括弧を線で引いてわかりやすくしてくれます。

閉じ括弧を見失いがちな人にオススメ。

indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Bracket Pair Colorizerと用途は似ていますが、インデント自体に色を付けてくれるプラグインです。

インデントの深さで色が変わるのでなんか見ていて楽しいです。

Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

VSCodeのファイルアイコンを変更してくれるプラグインです。

EJSとかのテンプレートだとアイコンが味気なかったり。ちょっと寂しいですよね。

ちょっと直接な開発効率に関係はないかもですが、ぱっと見でなんのファイルなのかわかりやすくなっていいです。

気に入ったプラグインがあれば試してみてください。

またオススメのプラグインがあればコメントかTwitterなどで教えて頂ければ喜びますζ(*’ω’*)ζ

あわせて読みたい