Visual Studio Code

Visual Studio Code の便利な拡張機能

SFTP の使い方

Visual Studio Code の SFTP 拡張機能を利用すると，リモートサーバのファイルをローカルに同期できます．さらに，ローカルで編集して保存するとリモートサーバに自動的に変更を反映させることができるようになります．

ここでは，IP アドレスが 192.168.56.100 のリモートサーバの /home/vagrant/Documents/myreport フォルダをローカルに同期する設定方法を示します．なお，リモートサーバのユーザ名は vagrant とします．まず，ローカル PC の任意の場所に myreport フォルダを作成し，このフォルダを Visual Studio Code で開きます．

次に，myreport フォルダ内に，.vscode という隠しフォルダを作成します．この .vscode フォルダに sftp.json ファイルを設置し，次のような内容を入力します．このとき，"name" には任意の名前を，"host"，"username"，"remotePath" にはその環境に応じた値（文字列）を設定してください．

.vscode/sftp.json
{
    "name": "Vagrant100",
    "host": "192.168.56.100",
    "protocol": "sftp",
    "port": 22,
    "username": "vagrant",
    "remotePath": "/home/vagrant/Documents/myreport",
    "uploadOnSave": true,
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store"
    ]
}

sftp.json ファイルの準備ができたら，Ctrl + Shift + P でコマンドパレットを起動し，「sftp」と入力して得られた検索結果から，「SFTP: Sync Remote -> Local」を選択します．なお，macOS では ⌘ + Shift + P でコマンドパレットを起動します．

表示されたリストから接続したいリモートサーバの名前（今回は Vagrant100）を選択します．

リモートサーバのパスワードを入力して Enter を押すと，リモートサーバの myreport フォルダ内にあるファイルがローカルにコピーされます．

リモートサーバの myreport フォルダ内にある2つのファイルがローカルにコピーされたことが確認できました．このあとは Visual Studio Code でローカルの chap1.txt などのファイルを編集して上書き保存すると，リモートサーバに自動的に変更が反映されます．

なお，リモートサーバ上でファイルを直接編集したり，Git のブランチ操作やリセット操作などを行った場合は「SFTP: Sync Remote -> Local」コマンドを実行して同期し直す必要があることに注意してください．