vscode⇔ブラウザを行ったり来たりするのがめんどくさい！
今まで私がフロントエンドの開発を行うときは、
- vscodeでコーディング・ターミナルでプロジェクト実行
- chromeでローカルホストにアクセスして画面確認
の流れで作業していました。
会社の作業環境はディスプレイが2台あるため、特に不便は感じていなかったのですが、自宅にはディスプレイが1台しかなく、vscodeとchromeを行ったり来たりしなければなりませんでした。
最近これが億劫になってきたので、「vscode内でブラウザも開けないかなぁ」と調べていたところ、「Browse Lite」という拡張機能を見つけたので、ご紹介します。
「Browse Lite」の使い方
「Browse Lite」はvscodeのタブ内でブラウザを表示することができる機能です。
拡張機能のメニューを開いて、「Browse」と検索すると上位に表示されるので、これをインストールします。
インストールが完了したら、Ctrl＋Shift＋Pでコマンドパレットを開き、「Browse Lite: Open...」と入力します。
Enterを押してコマンドを実行すると、「Browse Lite」のタブが開き、検索ができるようになります。
「about:blank」と入力されているところにbingのURLを貼り付けてEnterを押すと、ちゃんとbingの画面に遷移します。
「Browse Lite」を使用すると、下記画像のように、
コーディング・プロジェクト実行・動作確認（※）をvscode内でできます！
※正式な動作確認を行う際は、chromeやedgeなどのブラウザアプリを使用したほうが良いです。
まとめ
「Browse Lite」をインストールすると、フロントエンド開発をほぼvscode内でできそうです。
本当はbingの検索画面を初期表示のデフォルトに設定したかったのですが、設定方法がよくわからず、断念しました。
（拡張機能の設定に「Start Url」というものがあり、いろいろと入力してみましたが、初期表示に設定できず。方法がわかったら追記しようと思います。）