Visual Studio CodeでFTP simple使用時にライブプレビューで躓いた点

Visual Studio CodeでFTP simple使用時にライブプレビューで躓いた点



コーディングは主にVisual Studio Codeを使用して、常にFTP Simpleでサーバー上のコードを同期しながら作業を進めております。

これまでは、コードを書き終えたら保存する、そしてブラウザでF5更新して確認sる、という手順を取っていましたが、Visual Studio CodeのプラグインにHTMLのプレビュー機能があるとのこと。

Preview on Web Server - Visual Studio Marketplace
参考
Preview on Web Server - Visual Studio Marketplace

Extension for Visual Studio Code - Preview Web Page on Web Server.

Preview on Web Server - Visual Studio Marketplace

早速これを導入してみたものの、何故かプレビューにスタイルシートが反映されていません。
コードやCDN読み込みした他のスタイルシートやJavaScriptは反映されるというのに。

パスが違うのか?いや、サーバーのファイルを確認しても特に問題は無い。

おかしい。

そこでFTP Simpleでローカルに同期ファイルとして保存しているファイルを確認してみる。
すると何故かcssの容量が0。
中身を確認すると、何も入ってない。

ここでようやく合点が行く。

つまり、FTP Simpleはファイルがバッティングしないように、該当ファイルを開いた際に自動で最新のファイルをサーバーからダウンロードして、ファイルを閉じるとローカルのファイルの方は中身が空になってしまうと。

プレビューではcssは読み込んでいたけれど、それは中身が無いものであったと。

それで、該当するcssを開いた状態でプレビューすると、きちんと反映されて確認することが出来ました。

今日はここまで
Visual Studio CodeでFTP simple使用時にライブプレビューで躓いた点

Visual Studio CodeでFTP simple使用時にライブプレビューで躓いた点


開発

コーディングは主にVisual Studio Codeを使用して、常にFTP Simpleでサーバー上のコードを同期しながら作業を進めております。 これまでは、コードを書き終えたら保存する、そしてブラウザでF5更新して確…


関連する記事



こちらはいかが?


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)