みなさん、こんにちは！
フリーランスエンジニアのKATSUMIです。
コーディングをする際、シェア１番のVS Codeというテキストエディタを使う人が多いです。
そこでオススメなVS Codeの拡張機能を紹介します。
VS Codeの拡張機能のおすすめは「Live Preview」
テキストエディタ VS CodeでHTMLやCSSを編集する際、編集のたびに保存してブラウザを開いて更新確認をするのは面倒です。
そこでオススメな拡張機能は、「Live Preview」です。
Live Previewとは、VS Code内でリアルタイムにHTMLファイルのプレビューを表示できる拡張機能です。
この拡張機能を使うと、ブラウザを別ウィンドウで開く必要がなく、エディタ内で直接Webページの見た目や動作を確認できます。
インストール方法
VSCodeを開き、サイドバーの「拡張機能」で「LivePreview」を検索してダウンロードします。
プレビューをする方法
編集しているHTMLファイルを右クリックして「プリビューの表示」を選択するか、右上の「プリビューの表示」アイコンを押すとプリビュー画面を確認できます。
| ホームページ制作費無料のサブスクやフリーランスエンジニアを育成するメンター業を右記で請けおってます |  |
ファイル保存をせずに、埋め込みプレビューを更新
html、cssを修正したときには、ファイル保存をせずに、プレビューを更新することができます。
なお、プレビュー更新タイミングは、設定で変更可能です。
設定(WinはCtrl + ,)(Macはcommand + ,) → 拡張機能 → Live Preview → Auto Refresh Preview で、以下から選択します。
・On All Changes in Editor(デフォルト)：保存しても、しなくても、更新
・On Changes to Save Files：保存したときのみ、更新
・Never：更新しない
まとめ
以上、VS CodeのLive Previewの基本的な使い方を説明しました。
HTMLやCSSの変更がリアルタイムで分かるのは編集する際にすごく便利です。
今回の記事が、フロントエンドエンジニア、Webデザイナーを独学で目指している方の参考になれば幸いです。
下記を押していただけると励みになります！
↓
 |
人気記事
最近のコメント