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 に追加しちゃいましょう！