Visual Studio CodeでFTP simple使用時にライブプレビューで躓いた点
作成日:
2018年1月15日
コーディングは主にVisual Studio Codeを使用して、常にFTP Simpleでサーバー上のコードを同期しながら作業を進めております。
これまでは、コードを書き終えたら保存する、そしてブラウザでF5更新して確認sる、という手順を取っていましたが、Visual Studio CodeのプラグインにHTMLのプレビュー機能があるとのこと。
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を楽しんでいます。
コメントをどうぞ