##インストール方法
VSCodeは、多くのプラグインを導入することができます。
コーディングをサポートしてくれるものを入れておくと、作業効率が一気に向上します。
インストール方法は、以下の手順です。
- 拡張機能を選択
- プラグイン名で検索
- インストール
実に簡単にインストールできるので、早い段階でインストールすることをおすすめします^^
#おすすめプラグイン
###Highlight Matching Tag
ペアのタグを強調して表示してくれるプラグインです。
上の画像では、
<div>タグとどこの</div>タグがペアになっているのかを黄色の下線と透明な白色のマスクで教えてくれます。
###Bracket Pair Colorizer
対応する括弧に縦と横の線でハイライト表示をしてくれます。
先ほどのHighlight Matching Tagが、ペアとなるタグを教えてくれるものだったに対して、こちらはペアとなる括弧（ ）``{ }``[ ]を教えてくれます！
###Trailing Spaces
コード中に不要なスペースがある場合に、赤色のハイライトで表示してくれます。
上の画像だと、 <div class="top">の横に不要な半角スペースがある状態を示してくれています。
###Auto Rename Tag
開始タグまたは閉じタグを修正した時に、対になるタグも合わせて修正してくれるプラグインです。
###Indent-Rainbow
インデントを色分けして分かり易く表示することができます。
ユーザ設定にて色などの変更も可能です。
###vscode-icons
VScodeのファイルのアイコンはデフォルトだと非常にシンプルなものですが、vscode-iconsをインストールすると、ファイルの拡張子でアイコンが変更されることはもちろん、testフォルダーやassetsフォルダー、configフォルダーなども対応したアイコンにしてくれます。
フォルダやファイルが視覚的に整理しやすくなるため、オススメのプラグインです。
###Prettier
ソースコードを自動で整形してくれるプラグインです。
ソースコードを保存するとタブのサイズや位置、さらにセミコロンやシングルクォーテーションなどを全て自動で整形してくれます。
主なフロントエンド開発に対応しているため、静的なHTML、CSS、JS（jQuery）での開発時に、非常に役に立ちます。
自動で整形したソースコードを保存するために、
「設定」のFormat On Saveにチェックをいれておきます。
###EvilInspector
ソースコード上の全角スペースを可視化してくれます。
不要なスペースが紛れ込んでいて、エラーとなってしまうケースを回避することができるので大変助かります！
#終わりに
これまでおすすめのプラグインを紹介しました。
これを全てインストールするだけでコーディングの効率が格段に向上するのは間違いないのでぜひインストールしてみてください^^
また、今回紹介した以外にも便利なプラグインがあったらまたお伝えしたいと思います！