VSコードでエディタとブラウザを並べて表示する方法

VSコードで開発作業をしているときに、エディタとブラウザを並べて表示したいと思うことがよくあります。特にWeb開発においては、リアルタイムで変更を確認できる環境が求められます。この記事では、VSコードでエディタとブラウザを並べて表示する方法について解説します。

1. VSコードのライブサーバー拡張機能をインストールする

VSコードでエディタとブラウザを並べて表示する最も簡単で効率的な方法の一つは、ライブサーバー（Live Server）拡張機能を使うことです。この拡張機能をインストールすると、VSコード内で作成したHTMLファイルをリアルタイムでブラウザに反映させることができます。

まず、VSコードを開き、左のサイドバーの「拡張機能」アイコンをクリックして「Live Server」と検索し、インストールします。

インストールが完了したら、HTMLファイルを開いて右クリックし、「Open with Live Server」を選択します。これで、ブラウザが自動的に起動し、編集した内容がリアルタイムで反映されます。

VSコードのエディタを左側、ブラウザを右側に表示することで、作業効率が大きく向上します。また、ブラウザが更新されるたびに自動で最新の内容が反映されるので、手動でブラウザをリロードする必要もありません。

エディタとブラウザを並べて表示するためには、ウィンドウの配置を適切に行うことが大切です。通常、複数のモニターを使用している場合は、VSコードを片方の画面に表示し、もう一方の画面にブラウザを表示するのが理想的です。

また、1つのモニターで作業している場合でも、VSコードとブラウザをそれぞれウィンドウとして開き、適切に配置することで並べて表示できます。WindowsやMacのデスクトップ環境でウィンドウをスナップする機能を利用すると便利です。

VSコードのターミナルを利用して、ブラウザを開く方法もあります。ターミナルで以下のコマンドを入力することで、特定のURLを直接ブラウザで開くことができます。

start chrome http://localhost:5500

このコマンドを使うことで、ローカルサーバーで動作するサイトをブラウザで簡単に表示できます。

VSコードでエディタとブラウザを並べて表示する方法は、主に「ライブサーバー拡張機能」を活用する方法が便利です。これにより、リアルタイムで変更を確認でき、効率よく作業を進めることができます。また、ウィンドウ配置やターミナルのコマンドを活用することで、作業環境をさらに快適にカスタマイズできます。