こんにちは！IWACODEの岩村彰斗です。
今回はWeb制作や開発で使用するVisual Studio Code（以下、VSCODE）のおすすめプラグインについてご紹介させていただきます！
もし入れていないプラグインがありましたら参考にして頂けると幸いです。
プラグインのインストール方法
はじめに
プラグインのインストール方法について
VSCODEを起動し、左のサイドバーよりインストールを行います。
プラグインのマークをクリックし、プラグインを検索します。
インストールしたいプラグインをクリックし、インストールボタンを押すとインストールが始まります。
注意点
プラグインはインストール後、ソフトの再起動が必要な場合があります。その場合はVSCODEを一旦閉じて、再度起動してあげるとプラグインが有効となります。
おすすめプラグイン
まず入れておきたいプラグイン
Japanese Language Pack
VSCODEは英語表記のため、日本語で表示してほしいといった方向けのプラグインになります。
Auto Close Tag
開始タグを記載すると、閉じタグが自動で付いてくれます。
例えば<p>と打つと、</p>も自動で記載されます。閉じタグの記載漏れも減るので、とても便利です！
Auto Rename Tag
開始タグの名前を変更すると、終了タグも合わせて変更してくれます。
例えば、<p>・・・</p>を<div>に変更した場合、開始タグの名前を変更するだけで、終了タグも変更してくれます。
変更漏れも防げるのでとても便利です！
入れておくと見やすくなる（視認性が上がる）プラグイン
Color Highlight
色コードの背景色が指定した色になり、設定した色が分かりやすくなります！
Indent-Rainbow
インデントが色分けされて階層がより見やすくなります。
zenkaku
小文字と大文字を識別してくれます。打ち間違えてそのままにするケースがなくなるため、非常に助かります。
Trailing Spaces
コードの末尾に余分なスペースなどが入っている場合に、わかるようになります。
入れておくと効率化が図れる便利なプラグイン
Live Server
VSCODEの変更内容をリアルタイムでブラウザに反映できます。
ローカルサーバとして起動させることができ、VSCODEで保存すると自動的に変更内容が反映されるため、大変効率よくコーディングすることが可能です。
HTMLファイルをchromeなどのブラウザにドラッグアンドドロップする必要もなくなります。
CSS Peek
クラス名にカーソルを合わせて、F12を押すことで定義しているところを表示（ジャンプ）してくれます。
どのようなCSSプロパティがどこで定義されているかすぐわかります！
Alt（Option）+ F12キーでジャンプせずにその場に表示させることも可能なため、行ったり来たりする必要もないです。
IntelliSense for CSS class names in HTML
すでにclassとしてCSSに定義している場合、HTMLに記載する際に自動補完されます。
キーを打っている際に、自動で候補として挙がってくるため、効率よくコードの記載が可能になります。
htmltagwrap
選択したテキストをHTMLタグで囲むことができます。
コードを選択して、Alt（Option） + Wを押すことによって、自動的に開始終了タグが生成されるため、非常に便利です！
デフォルトのタグが<p>になっているので、こちら好みにはなりますが、プラグインの設定画面から変更することが可能です。
コーディングをしていて、レイアウトによっては「この要素に対して親要素を追加したい…」といった場面に遭遇したことはないでしょうか？
コードの量が少なければそれほど手間ではないですが、複数の要素を一気にとなると、下手すると1画面に収まらない場合もあるので、そういった場合に非常に便利です。
さいごに
いかがでしたでしょうか？
プラグインをインストールすることによって、作業時間の短縮や、品質をあげることが可能です。
もし使用していないプラグインや、困っていることが解決できそうなプラグインがありましたら是非お試しください。
今回の記事が少しでも参考になりましたら幸いです。
