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タグだった時に書き直す箇所が一箇所で済みます。

これは本当に便利ですが、タグで要素を囲みたい場合に不便です。

解決方法はこちらに書かれているのを参考にすると、便利に扱えます。

以下にもまとめておきます。

設定画面で「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/189128

vscode-icons

ファイルの左に、アイコンが表示されます。

何の拡張子なのかが一目瞭然で分かるようになるため、視認性が良くなります。

Auto Rename Tag

これはメチャクチャ便利です。

開始タグを編集すると、自動的に終了タグを変更してくれます。

開発効率が高まりますね!

IntelliSense for CSS class names in HTML

CSSの強力な呼び出し拡張機能です。

Bootstrapなどを利用していたり、他のメンバーとCSSを共有している場合など大変重宝します。

CSSのクラス名やId名を忘れていても大丈夫ですね!

他にもオススメの拡張機能があれば、随時更新していきます!