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」を検索
https://teratail.com/questions/189128
↓
チェックを外す
↓
Auto Close Tagを導入
↓
設定画面で「Auto-close-tag: Sublime Text3 Mode」をチェック
↓
「Auto-close-tag: Activation On Language」の「settings.jsonで編集」をクリック
↓
設定の中に「”html”,」を追加
↓
「自分で</まで入力したときだけ、残りをVS Codeが補完する」という動作になります。
vscode-icons
ファイルの左に、アイコンが表示されます。
何の拡張子なのかが一目瞭然で分かるようになるため、視認性が良くなります。
Auto Rename Tag
これはメチャクチャ便利です。
開始タグを編集すると、自動的に終了タグを変更してくれます。
開発効率が高まりますね！
IntelliSense for CSS class names in HTML
CSSの強力な呼び出し拡張機能です。
Bootstrapなどを利用していたり、他のメンバーとCSSを共有している場合など大変重宝します。
CSSのクラス名やId名を忘れていても大丈夫ですね！
他にもオススメの拡張機能があれば、随時更新していきます！
