visual studio codeでhtml＆cssプレビューをしたい。

前提・実現したいこと

（初心者）visual studio codeでhtml＆cssプレビューをしたい。
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

拡張機能をダウンドードしたが起動の仕方がわからずプレビューができないです。

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。
Googleで検索しましたが解決策が見つからずここで質問いたします。
**Open Preview the sideを押した。**画像にある拡張機能をダウンロードしてみたがどれも起動の仕方がわからず（？）プレビューできなかったです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
使っているのはマックです。

いただいたコメントの通り別の拡張機能をダウンロードしてみましたが、未だプレビューできない状態です

行動規範の内容に同意します

回答1件

「Live HTML Previewer」(画像に載っている拡張機能)はこちらでも動きませんでしたし、もうひとつの「HTML Preview」も表示がおかしかったので、JavaScriptも含めて正しく動いている拡張機能の組み合わせを紹介します。「Live HTML Previewer」と「HTML Preview」は、どちらもアンインストールするか無効にしておいてください。

Live Server
Browser Preview

どちらもMarketplaceからインストールできます。

両者をインストール後に、VSCodeの設定画面を(Cmd-,キーなどで)開き、Live Serverの設定「Live Server › Settings: Use Browser Preview」(設定IDはliveServer.settings.useBrowserPreview)をチェックします。

その後、「ファイル」→「開く」で、HTMLファイルを置いたフォルダーを開きます(重要)。単独のファイルを開くのではなく、フォルダーを開いてください。この作業は、Live Serverが、そのフォルダーをドキュメントルートとするローカルサーバーを起動するために必要です。

そして、プレビューしたいHTMLファイルを(左のファイル一覧から)選び、編集している状態で、右クリックメニューの「Open with Live Server」を選択すると、VSCodeの内部で(Browser Previewによる)プレビュー画面が表示されます。Chromiumベースなので、表示はChromeやEdgeと同等です。

補足: プレビュー表示は編集中のファイルを保存すると自動的に更新されます。保存がわずらわしいなら、VSCodeの自動保存設定(ファイルメニュー内)を有効にしてください。

投稿2021/02/26 09:21

編集2021/02/26 09:24