

Macで使用していますが、VSCode の Live html preview という拡張機能でプレビュー表示がされません。  
HTML画面にてcommandやshift等を用いて入力しましたが全く表示されずです。


CC BY-SA 4.0
2020-06-04T18:29:02.910
67294
2021-03-07T06:29:20.897
2021-03-07T06:29:20.897
3060
40384
question
html vscode
VSCode の Live html preview で HTML のプレビュー表示が出来ません


[![](https://i.stack.imgur.com/vdAVl.png)](https://i.stack.imgur.com/vdAVl.png)  
<https://code.visualstudio.com/Docs/languages/html>  
こちらに記載の通り、プレビュー機能はついていません。VS Code
Marketplaceで利用できる拡張機能があります。拡張機能ビュー（⇧⌘X）を開き、「ライブプレビュー」または「htmlプレビュー」で検索して、使用可能なHTMLプレビュー拡張機能のリストを表示します。  
拡張機能を入れずに、作成中のhtmlファイルを叩いてクロムで確認しながら進めればいいと思います。

別途、 以下のページも参照してみてください。

[web制作が捗りそうな便利なwebツール【随時更新】 - Qiita](https://qiita.com/ta-ke-no-
bu/items/c2b8b8b77555fbf50370)


CC BY-SA 4.0
2020-06-04T22:24:32.493
67298
2020-06-05T00:28:09.130
2020-06-05T00:28:09.130
3060
40486
67294
answer


もし [Live HTML
Previewer](https://marketplace.visualstudio.com/items?itemName=hdg.live-html-
previewer) という拡張機能をお使いであれば、2020 年 6 月現在、この拡張機能にはプレビューができないというバグがあります。VSCode
のアップグレードに伴って Live HTML Previewer
が使っていた機能が[使えなくなった](https://github.com/HarshdeepGupta/live-html-
preview/issues/25)ためです。

代わりに他の拡張機能を検索し、使ってみてください。たとえば [HTML
Preview](https://marketplace.visualstudio.com/items?itemName=tht13.html-
preview-vscode) という拡張機能があったりします。


CC BY-SA 4.0
2020-06-05T04:08:44.527
67313
2020-06-05T04:08:44.527
19110
67294
answer


angular ならこれ参考になります！  
英語ですみません  
<https://medium.com/@MarkPieszak/debugging-angular-cli-inside-vscode-with-
browser-preview-8dcc4b18ed64>  
基本的にbrowser preview と debugger for
chromeをインストールしたら十分だけどangularならjsonファイル設定が必要。


CC BY-SA 4.0
2020-07-22T00:20:25.900
68803
2020-07-22T05:58:35.353
2020-07-22T05:58:35.353
41201
41201
67294
answer