Alex Ruben
Visual Studio Code で HTML ファイルをシームレスにプレビューする方法
VS CodeでHTMLを編集しているとき、いちいち更新ボタンを押さなくてもウェブページの変更を瞬時に確認できると、本当に画期的な機能です。そこで、Live Server拡張機能を使ってライブプレビューを設定する方法をご紹介します。特に、リアルタイムで微調整をする際に非常に便利です。ただし、最初の試みでは完璧に動作しない場合もありますが、再起動したり、設定をいくつか切り替えたりすると改善されることがあります。
ステップ1: HTMLファイルを開く
VS Codeを起動して、index.html編集中のHTMLファイル（あるいは他のHTMLファイル）を開いてください。プレーンHTMLでも、CSSやJavaScriptがリンクされているものでも構いません。重要なのは、エディタですぐに使える状態になっていることです。すべては次に何をするかにかかっているからです。
ステップ2: ライブサーバー拡張機能をインストールする
ここから魔法が始まります。ライブプレビューを実行するには、拡張機能をインストールしてください。
- 左側のサイドバーにある拡張機能アイコンをクリックするか、Ctrl+ Shift+ を押してXマーケットプレイスを開きます。
- 検索ボックスに「Live Server」と入力します。
- Ritwick Deyの「Live Server」というプラグインを探してください。インストール数が多く、アイコンも目立つので、人気のプラグインです。
- 「インストール」を押してください。これで拡張機能が追加されました。設定によっては、初回は失敗する可能性があり、VS Codeを再起動したり、拡張機能を無効化/有効化し直したりする必要があるかもしれません。問題ありません。インストールするだけです。
ステップ3: ライブサーバーを起動する
インストールが完了したら、プレビューを開始するのは簡単です。
- VS Code で HTML ファイルがアクティブになっていることを確認します。
- + +を押してコマンドパレットを開きます。CtrlShiftP
- 「Live Server: Open with Live Server」と入力して選択します。すぐに表示されない場合は、ファイルを最近保存したか、VS Codeを再起動してください。
- これにより、デフォルトのブラウザでウェブページが開き、通常は のようなローカルアドレスから提供されます
http://127.0.0.1:5500/index.html。右下隅に小さなライブサーバーアイコンが表示され、実行中であることがわかります。
ステップ4: 編集して変更をライブで確認する
ここが楽しいところです。HTML（またはリンクされたCSS/JS）を微調整しながら、Ctrl+ キーを押してS保存するだけです。ブラウザが自動的に更新され、最新の編集内容が表示されます。プロジェクトの規模が大きい場合やエラーが多い場合は少し不安定になることもありますが、通常は問題なく動作します。更新されない場合は、手動で更新するか、コマンドパレットからライブサーバーを再起動してみてください。もちろん、Windowsでは必要以上に面倒な処理が必要になることもあります。
追加のヒントとよくある問題
物事をスムーズに進めるには:
- ファイアウォールの設定を確認してください。何らかの奇妙なネットワーク ブロックによってサーバーの通信がブロックされている場合、ページは更新されません。
- ページが更新されない場合は、サーバーを停止して再起動してください。F5キーを押すと更新される場合もありますが、「Go Live」ボタンが利用可能な場合は右クリックしてください。
- コードに壊れたタグや構文エラーがないか確認してください。これらがあるとレンダリングが乱れ、Live Server が動作していないように見えることがあります。
- 複雑なプロジェクトで作業している場合は、設定をエクスポートするか、settings.jsonでポート番号を調整することを検討してください。これは、 「ファイル」>「設定」>「設定」で「liveServer.settings.port」を検索して見つけることができます。
まとめ
- ライブサーバー拡張機能をインストールする
- コマンドパレットから起動-ライブサーバー: ライブサーバーで開く
- 編集して保存し、ライブ更新が自動的に行われるのを確認します
これで誰かの作業時間を数時間短縮できれば幸いです。Ctrl+Rを何度も押し続けることなく、作業の進捗状況をリアルタイムで確認できるのは、何にも代えがたいメリットです。ただ、時々不安定になることもありますが、すぐに再起動すればほとんどの問題は解決します。頑張ってコーディングしてください！