Visual Studio Codeに入れておきたい拡張機能！
Visual Studio Code、略して VS Code と呼ばれているテキストエディタです。
エンジニア界隈では、毎年人気ランキングで 1 位を誇るテキストエディタで、多くの人が使っています。
私は、メモ帳→terapad→DreamWeaver→Atom→Visual Studio Codeというエディタ遍歴を持っています。
やはり、豊富な拡張機能が魅力的なのです。
まだ、Visual Studio Code を使っていない方や、拡張機能のオススメは何がいい？という方向けにも参考になれば幸いです。
Live Server
html ファイルをブラウザ上で実行できる拡張機能です。
通常、ホームページ制作において html ファイルをブラウザにドラッグ&ドロップしなければ確認ができませんよね。
そこで、その手間が一切必要無くなる拡張機能としてオススメなのが『Live Server』です。
Live Server をインストールしておくと、Visual Studio Code 画面の右下あたりに Go Live という表示が出てきます。
html ファイルを開いておいた状態で、Go Live をクリックすると自動的にブラウザが開き、html ファイルが実行されるのです！
かなり便利なので、拡張機能 Live Server はオススメです。
ただし、php ファイルは実行できないので、html ファイルのみという場合に限り有効です。
そこで、php ファイルが実行できる拡張機能もご紹介いたします！
PHP server
PHP ファイルを一発で実行できる環境が手に入ります！
今までは、MAMP 環境などで構築するなど煩雑なイメージでしたが、『PHP server』なら一発で整います。
Live Server は Visual Studio Code 画面の右下に Go Live と表示されていましたが、PHP server の場合は少々異なります。
php ファイルを開いておいて、画面上で右クリックします。
『PHP server:Server Project』をクリックすると、自動的にブラウザに表示されます！
とても便利ですね！
ただ、ちょっと不便な点として、最初のみブラウザで自動表示されるため、実行中のタブを閉じて、再度実行しても自動的には開いてくれません…
そのため、同時に開かれるターミナルから 3000 ポートの URL をコピーするなどして対応する必要があります。
あとは、特に不便さを感じません！
PHP 使いの方にとてもオススメです！
Bracket Pair Colorizer 2
コーディングを沢山していると、困ったことが起きます。
それは、スタートタグとエンドタグのペアが見つかりにくくなる点です。
長時間の作業で目を酷使してしまっているので、どれがどのエンドタグなのか、探すのがとても大変です。
そんな時オススメしたい拡張機能が『Bracket Pair Colorizer 2』です！
なんと、エンドタグまで丁寧にカラーラインが引かれるため、かなり分かりやすくなるんですね！
もう手離せませんよ！
Auto Rename Tag
これは賛否両論あるのですが、閉じタグを自動生成してくれる拡張機能です！
仕事で使う際には、とても重宝します。
例えば h1 タグではなくて p タグだった時に書き直す箇所が一箇所で済みます。
これは本当に便利ですが、タグで要素を囲みたい場合に不便です。
解決方法はこちらに (opens in a new tab)書かれているのを参考にすると、便利に扱えます。
以下にもまとめておきます。
設定画面で「HTML: Auto Closing Tags」を検索
↓
チェックを外す
↓
Auto Close Tagを導入
↓
設定画面で「Auto-close-tag: Sublime Text3 Mode」をチェック
↓
「Auto-close-tag: Activation On Language」の「settings.jsonで編集」をクリック
↓
設定の中に「"html",」を追加
↓
「**自分で</まで入力したときだけ、残りをVS Codeが補完する**」という動作になります。
>
https://teratail.com/questions/189128vscode-icons
ファイルの左に、アイコンが表示されます。
何の拡張子なのかが一目瞭然で分かるようになるため、視認性が良くなります。
Auto Rename Tag
これはメチャクチャ便利です。
開始タグを編集すると、自動的に終了タグを変更してくれます。
開発効率が高まりますね！
IntelliSense for CSS class names in HTML
CSS の強力な呼び出し拡張機能です。
Bootstrap などを利用していたり、他のメンバーと CSS を共有している場合など大変重宝します。
CSS のクラス名や Id 名を忘れていても大丈夫ですね！
他にもオススメの拡張機能があれば、随時更新していきます！