VS Codeの拡張機能のインストール方法

簡単に、VS Codeの拡張機能のインストール方法をお教えします。

①「拡張機能ボタン」をクリック。
↓
②検索フォームで、インストールしたい拡張機能の名前を入力する。
ここでは、「PHP Intelephense」と試しに検索します。
↓
③検索結果が出てくるので、該当のものを見つけて、「インストール」ボタンを押します。
ここでは、拡張機能「PHP Intelephense」が一番上に出ています。（ゾウさんのアイコンです！）

※同じような名前の拡張機能が多いです。間違えてインストールして面倒なことにならないよう、アイコンを確認するか、レビュー評価の数字（☆横の数字。PHP Intelephenseでは☆4.5となっています。）が低すぎないか、確認して下さい。

手順は以上となります。簡単ですね！
それでは、拡張機能を紹介していきます。

Japanese Language Pack for Visual Studio Code

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

VS Codeを日本語に対応するプラグインです。
日本人なら必須級の拡張機能です！

Auto Rename Tag

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

開きタグと閉じタグ、両方同時に変更することができる拡張機能です。

「開きタグ」の記述を変更すると、「閉じタグ」が自動で変更されます。
修正したときに「閉じタグの記述の変更を忘れてた！」といった、凡ミスが減ります！

Code Spell Checker

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

英語が苦手な方...！このプラグインおすすめです！

この拡張機能は、英語のスペルミスがあると、該当の箇所に波線を引いてくれる拡張機能です。
「英語が苦手 + タイピングミスが多い」人には必須ではないでしょうか！（私のことです笑）

CSSTree validator

https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree

W3Cに基づき、CSSの書き方に間違いがあったら、該当の箇所を波線を引いて教えてくれる拡張機能です！
簡単に、CSSのエラーを検知する！と思ってください。

Live Server

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

おそらく、コーダーには一番人気の拡張機能ではないでしょうか。

ローカルでサーバーを瞬時に立ち上げ、ブラウザに表示してくれる拡張機能です。
HTMLやCSSといったファイルのコードを更新すると、更新を検知して自動でブラウザを更新してくれます！
windowsユーザーなら、保存するショートカットキー（ctrl+S）を押すだけで、ブラウザの表示がリアルタイムで表示されます。

はじめて使ったときは、感動しました。これが無料でいいのかと...!

ただし、二人で同じローカルフォルダを編集したりしていると、更新するタイミングが二人分になって、うまくブラウザ表示ができなかったりするので、最近は使わなくなりました。
時と場合を分けて使えば、最強の拡張機能だと思ってます！

Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

WEB制作だけでなく、WEB開発でも大人気の、コード整形フォーマッター「Prettier」のVS code拡張版です！
HTMLやCSS等のコードを、綺麗に整えてくれます。
細かい設定が可能で、自分が使いやすいように設定すると、なくてはならないコーディングの相棒になります。

zenkaku

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

全角スペースがあると、分かりやすく表示してくれる拡張機能です。

全角スペースのせいでうまく動かなかったりもするときもあるので、ミス防止に最適です！

Path Intellisense

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

ローカルのパスの、入力補完をしてくれる拡張機能です。
どういった機能なのか、うまく説明はできないです...使ってみた方が早い...！

個人的に、この拡張機能に一番助けられてます。実際に使ってみて、じわじわとありがたさに気づいていきました。

「画像のパスを記述する時」「アンカーリンクのパスを記述する時」等、コーディングでは毎日使っていたと言っても良いでしょう！
「パスを書くのが苦手な方」は特に、試してみることをおすすめします！

まとめ

ここまで読んで頂き、誠にありがとうございました！そして、お疲れ様でした。

どの拡張機能も、ちょっとしたお助けツールみたいなものだったと思います。ですが、コーディングの時間短縮には、こういったちょっとずつの積み重ねが大事だと考えています。

「ショートカットキーを覚える」「Emmetを覚える」といったことでもコーディングの効率化はできますが、「覚える」コストがかかります。
拡張機能はインストールするだけで（必要あれば設定して）時間短縮に繋がるので、非常に良いと思います。

個人的にはVS Codeを自分好みにカスタマイズしていくのが楽しく、一年に一回くらい「新しい便利な拡張機能ないかな？」とgoogleで探したりします。

是非皆さんも、ワクワクしながら拡張機能を試してもらえると、幸いです。