【VisualStudioCode】編集中のファイルを直接サーバーにアップロードする方法【sftp】

VisualStudioCodeで編集しているファイルを直接サーバーにアップロードする方法をメモに残します。

「sftp」というプラグインを利用して実現することが可能です。

「sftp」プラグインのインストール

以下の図のような手順で拡張機能から「sftp」を検索してVisualStudioCodeにインストールを行います。

フォルダを作成してVSCodeで開く

任意の場所にフォルダを作成してVSCodeでそのフォルダを開きます。

メニューバーの「ファイル(F)」→「フォルダーを開く(F)」で作成したフォルダを指定するか、 VSCodeのウィンドウ上に作成したフォルダをドラック＆ドロップするとフォルダを開くことが出来ます。

初期設定（コンフィグファイルの作成）

F1キーでコマンドラインを表示します。
表示したコマンドラインにて「sftpconfig」と入力してEnterキーを押します。
そうすると、対象のフォルダ配下に「.vscode」という名前のフォルダが自動的に作成され、 さらにその配下に「sftp.json」という名前にSFTP専用のコンフィグファイルが作成され ウィンドウ上にオープンされているかと思います。

このファイルを編集することで「sftp」が利用できるようになります。

コンフィグファイルの設定

オープンされたコンフィグファイルを以下のように設定することで sftpを利用したサーバーとの連携が可能になります。

パスワード認証のみで接続する場合（最低限）

※アップロードする際にパスワードの入力が必要になります。（VSCodeが再起動されると再度入力が必要になります）
設定ファイル内にパスワードを設定する場合は、「"passowrd": "パスワード"」と 上記コンフィグに追加すると省略できます。

鍵ファイルを利用して接続する場合（最低限）

プロトコル「FTP」で接続する場合（最低限）

sftpの使い方

サーバー上のファイルを全てダウンロードする

「remotePath」に設定したフォルダ配下のファイルを全てダウンロードするには 「F1」キーを押して「sftpdownload」コマンドを実行します。
※対象のファイル数、サイズが多い場合は時間・通信容量がかかるので注意して下さい。

個別にファイルをアップロード/ダウンロードする

対象のファイルを開いた状態で「右クリック」すると対象のファイルをアップロードまたは ダウンロードできます。



「sftp」の詳細な情報等は以下のgithubが参考になるかと思います。（英語）