【無料】有能なVSCodeプラグイン8選

こんにちは、投資家 兼 Webクリエイターのたかひで（@takahide_web）です。

本日は「有能なVSCodeプラグイン8選」について紹介していこうと思います。

あなたはこんなお悩みないでしょうか。

最近、Visual Studio Codeでコーディングしているんだけどおすすめのプラグインないかな？

すでに使ってはいるけど改めて見返して良さそうなのは取り入れたいなあ

私自身もVSCodeの初期設定のまま進めていたことがあり、後からプラグインの存在を知って猛烈に「早く知りたかった！」と思いました。

いろいろ試した結果、おすすめなプラグインを厳選して紹介していこうと思います。

Japanese Language Pack for Visual Studio Code

VSCodeの初期設定は英語のUIのため、まずは本プラグインをインストールし、日本語UIに設定しましょう。

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

Highlight Matching Tag

始まりのタグをクリックするとマッチした終了タグがハイライトされます。

長いコードでも見つけるのが簡単になり、重宝します。

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

Auto Rename Tag

開始タグや終了タグ等の片方のタグを修正すれば、もう一方のタグが自動的に修正される優れものです。

入力ミスやコーディングの効率化につながります。

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

LIVE Server

コードを修正していく中で、HTMLやCSSファイルを保存すると自動でブラウザが更新されます。

インストール後、フォルダを開くと、画面右下に「Go Live」という表記が出ますので、クリックすると自動でWebサイトが立ち上がります。

HTMLやCSSが修正される度にサイトが更新されるので確認が簡単です。

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Path Intellisense

ファイルパスを補完入力可能なプラグインです。

今まで画像フォルダ開いてコピペしたり、 手入力してたのでミスが減りました。

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

zenkaku

謝って全角入力してしまった場合、すぐに気づくことができ、よくあるエラーに対処できます。

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

indent-rainbow

インデントに色づけされ、対応部分がひと目でわかるようになります。

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

Bracket Pair Colorizer 2

{ }や () などの括弧を同じ色として区別し、見やすくできます。

長いコードを書くとどの括弧が対応するのかがわかりにくくなることよくありますよね。。。

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

おわりに

まだインストールしていないプラグインがあれば、インストールしコーディングの効率化につなげて下さい！

あなたにとって今回紹介した「有能なVSCodeプラグイン8選」が参考になれば嬉しいです。