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

作成日:

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

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

favicon
Preview on Web Server - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server

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

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

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

おかしい。

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

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

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

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

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

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。