![vscodeでリアルタイムプレビューを実現する方法](https://img.php.cn/upload/article/000/000/041/5e0ab78d0f187432.jpg)
VScode を開き、座標ツールバーの最後のものをクリックしてプラグインのインストールに入ります
![1577760704517470.png vscodeでリアルタイムプレビューを実現する方法](https://img.php.cn/upload/image/718/802/910/1577760704517470.png)
ツールバーが左が表示されない場合は、ビューで拡張機能を検索し、プラグインのインストールを入力することもできます。
![1577760736253992.png vscodeでリアルタイムプレビューを実現する方法](https://img.php.cn/upload/image/658/815/901/1577760736253992.png)
## 検索ボックスに「Live Server」と入力し、検索結果で次を見つけます。インストールの選択
![1577760782621675.png vscodeでリアルタイムプレビューを実現する方法](https://img.php.cn/upload/image/858/182/384/1577760782621675.png)
インストールが完了したら、ソフトウェア プラグインを再起動して有効にする必要があります。
再起動後、新しいワークスペースを作成し (フォルダーを vscode に直接ドラッグすることもできます)、テスト用にここに HTML ファイルを作成します。新しい HTML ファイルを別途作成して IDE にドラッグすることはできないことに注意してくださいライブサーバーの場合は、作成したワークスペース(フォルダー)にこのHTMLファイルを入れる必要があります。新規作成が完了すると、ステータスバーに「Go Live」が表示されますので、これをクリックすると自動的にブラウザが起動して表示されます。
ヒント: 以前に HTML プロジェクトがある場合は、プロジェクトのルート フォルダーを VScode に直接ドラッグすると、ワークスペースに自動的に追加されます。
![1577760835728275.png vscodeでリアルタイムプレビューを実現する方法](https://img.php.cn/upload/image/715/808/506/1577760835728275.png)
ステータス バーがない場合は、ファイルを右クリックして [ライブ サーバーで開く] を選択することもできます。
次にコードを変更するには、ctrl S を押して変更したコードを保存するだけです。ブラウザは自動的に更新されます。
![1577760899443622.png vscodeでリアルタイムプレビューを実現する方法](https://img.php.cn/upload/image/430/342/233/1577760899443622.png)
推奨関連記事チュートリアル:
vscode チュートリアル
以上がvscodeでリアルタイムプレビューを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。