こんにちは。Visual Studio Code（以下 VSCode）ヘビーユーザーの”はやぶさ”@Cpp_Learningです。仕事でもプライベートでもVSCodeを愛用しています。
本記事ではWebアプリ開発に役立つVSCodeの拡張機能を紹介します。
Contents
Live Preview
VSCode上からlocalhost（ローカルホスト）にサーバを立て、HTMLファイルをリアルタイムでプレビューする拡張機能
使い方や特徴については、公式サイトが丁寧に解説しています。
Browser Preview
HTMLファイルが存在しない場合、 Live Preview は使えません。VSCodeからWebアプリやWebサイトを開きたいときは、Browser Preview が大活躍します。
下図のように画面左側にある Browser Preview のアイコンをクリックし、アドレスバーに任意のアドレス（例えば、localhost:8080 や https://www.youtube.com/ など）を入力すれば、VSCodeから開けます。
あるいは「適当なファイルを選択」⇒「右クリック」⇒「Open in Browser Preview をクリック」でもOKです。
公式サイトに以下の文言があるため、いつかインストールできなくなる恐れがあります（便利だから廃止しないでほしい）
Deprecation Notice
This extension has been deprecated in favor of the Live Preview extension.
REST Client
REST APIを開発する際、ターミナルからcurlコマンドでHTTPリクエストを投げてレスポンスを確認する機会が多いと思います。
REST Client を使えば、VSCode上からHTTPリクエストを投げて、VSCode上でレスポンスを確認できます。使い方については、公式サイトや以下の記事が参考になります。
実践！VSCodeからHTTPリクエストを投げる
以下の記事でFessサーバーにHTTPリクエストを投げて全文検索結果のレスポンスを受けとる「全文検索アプリ」を作りました。
「Fessの検索API」の動作確認で REST Client を使ったので、そのとき書いた test.http を公開します。
先ほど紹介したQiita記事には説明がありませんでしたが、「マウスカーソルを任意のコマンド上に移動」⇒「右クリック」⇒「Send Request」でHTTPリクエストを送信できます。このやり方が一番簡単だと思います。
例えば GET http://localhost:8080//json/?type=ping を送信したときのレスポンスは以下の通りでした。
【おまけ】CURLとは
という人やフクロウは以下の記事が参考になりますよ。
まとめ
Webアプリ開発に役立つVSCodeの拡張機能３選を紹介しました。最後に改めて、おすすめの拡張機能３選を列挙しておきます。
VSCodeは優れたエディタですが、拡張機能を活用することで更に便利になります。
Webアプリ開発に限らず、全ての人に教えたい拡張機能については、以下の記事で紹介していますので、参考にしてください。
