【VSCode】リアルタイムプレビュー

VSCodeでHTMLのリアルプレビューを可能にする拡張機能

「HTML Preview」

を導入した。

HTML Previewの使い方

1. Ctrl + Shift + x (Extensions) -> HTML Previewを検索し、インストール

2. 一度htmlファイルを保存（保存していないとプレビュー表示されない）

3. htmlファイルを開き、下記入力

• Windos: Ctrl + K -> V
• Mac: Cmd + K -> V

3. 他の拡張機能とショートカットがバッティングしている場合、

• Windos: Ctrl + Shit + P
• Mac: Cmd + Shift + P

と押してから、「HTML: Open Preview to the Side」を選択すれば、横にプレビュー表示される

これは便利 ♪

References

Visual Studio Codeでhtmlコーディングはリアルタイムプレビューがすごく良い

私は現在テキストエディターをWindowsとMacの両端末とも、Microsoftから無償で提供されている「Visual Studio Code」に統一している。なぜなら、どちらのOSでも同じように利用でき、とっても便利で拡張性があるから。

HTMLのリアルタイムプレビュー環境を雑に整える - Qiita

はじめに HTMLファイルを書くとき、以前は一回一回VSCodeをターミナルで起動し、ファイルを編集してからChromeで確認するという面倒な方法を取っていました。しかも、普段はVimを使ってるのでV…