2024年5月13日星期一

[VS CODE]HTMLをリアルタイムでプレビューする方法

Web制作の過程でリアルタイムプレビューを使いたい場合、Visual Studio Code(VS Code)の利用をおすすめです。

Visual Studio Code(VS Code)はマイクロソフトが提供している無料のコードエディタです。昔はAdobeのDreamWeaverを利用し、非常に高機能で使いやすかったが、MACのOSアップデートで、一括支払いバージョンからSaaSになって、高額で諦めました。

「コードエディタを使ってリアルタイムプレビューの環境を作る」と聞くと難しそうな印象を受けるかもしれませんが、実際は非常に簡単で3分ほどで完了します。

「VS CodeのUI上でプレビューする方法」があります。まずはVS Codeが必要なので、下記のページからダウンロードしてPCにインストールしましょう。



https://code.visualstudio.com/download

VS CodeのUI上でプレビューできる拡張機能もあります。ExtensionsからHTML Previewと検索し、下記が表示されたらインストールしてください。

ファイルに戻り、command + Shift + P(Windows:Ctrl + Shift + P)を押すと上に表示される検索窓から、HTML: Open Preview the the Sideを選択します。そうすると、右にプレビュー画面が出てきて、所見既所得....

DreamWeaverのような高機能ではありませんが、基本的なHTML、CSS、Javascriptについて、問題がありません。ただし、Pluginの開発は2018からすでに停滞しているので、いつかに使えなくなるのが心配です。

まだ、問題となりのがリンクです。プレビュー画面からリンクを経由でNext Pageの確認が不可です。全てAzureに誘導され、Azureの共有リンクから探しているようです。設定不備かエンジンのバグだと思います。

没有评论:

发表评论