Visual Studio CodeからFTPアップロードする方法

Webサービス/ツール

テキストエディタ「Visual Studio Code」からサーバへFTPアップロードする方法です。

拡張機能、ftp-syncをインストール

1.Visual Studio Codeを開く
2.拡張機能ボタンをクリック または 「Ctrl + Shift + X」
3.「ftp-sync」と入力してプラグインを検索

visual-studio-code拡張機能の検索

FTPしたいファイルがあるフォルダにFTPするための設定ファイルを作成

1.FTPしたいファイルがあるフォルダをVisual Studio Codeで開く
2.上記1の状態で「Ctrl+Shift+P」。
3.コマンド入力欄が表示されるのでそこに「Ftp-sync: Init」と入力
4.実行すると、「.vscode」というフォルダが自動作成され、その中にFTP情報を記載する「ftp-sync.json」というファイルも作成されます。

下記キャプチャでは、私がこのコマンドをよく使うので、「最近使用したもの」として出てきました。

ftp-sync.jsonの設定方法

(1)FTP先の接続情報
“remotePath”: “./”,
“host”: “host”,
“username”: “username”,
“password”: “password”,

(2)ファイルの保存時に自動的にアップロードするか否か(する場合はtrueに変更)
“uploadOnSave”: false,

ftp実行

(1)ファイルリストからFTP

ファイル名を右クリックして「ftp-sync:UploadFile/Folder」をクリック



(2)ファイル保存時に自動アップロード

“uploadOnSave”: true, としていれば、保存するたびにFTPされます。

とっても便利です。