VSCodeで快適SFTP生活


以前は PhpStorm のデフォルトで使用可能な SFTP を使い、
修正ファイルをVagrantやDocker上の開発環境へ反映、動作確認していました。

今回、この使い方なら VSCode でもできそうと思ったのでやってみました。

Extension

  • liximomo.sftp

設定

  • プロジェクトをVSCodeで開く
  • コマンドパレットを表示させる
    • Windows : Ctrl+Shift+P
    • Mac : Command+Shift+P
  • コマンドパレットに >sftp:config を入力し、エンター
  • プロジェクトを選択する
  • プロジェクトのルートに .vscode/sftp.json が作成される
    • sftp.json は環境に合わせて書き換える
キー
name 適当な名前
host リモートマシンのホスト
protocol sftp 固定
port 22 固定
username ssh接続時のユーザー名
remotePath 反映先のプロジェクトのルートパス
uploadOnSave true(VSCodeで保存したファイルが remotePath へ即時反映される)
  • リモートへ反映する際、ssh接続のパスワード入力が求められます
    • エディタ上部に表示されていて一見気付きにくいので注意
  • ファイルやディレクトリを右クリックし、選択したファイルをリモートへ反映することもできます
sftp.json
{
    "name": "My Vagrant",
    "host": "192.168.33.10",
    "protocol": "sftp",
    "port": 22,
    "username": "root",
    "remotePath": "/var/www/html/",
    "uploadOnSave": true
}

とても簡単な設定!

Sublime Text などのテキストエディタでもこういった拡張、設定は可能です。
お好みのエディタで探してみてはいかがでしょうか。

Extensions で夢が広がりますね!!

(元も子もないですが)PhpStorm なら、デフォルトでこういった便利機能は事前に用意されているので、
一つずつ整えていくのが大変!と思った方は、PhpStorm がありかもしれません。

併せて

  • .vscodeフォルダは .gitignore に追加しちゃいましょう!