《FTP快適環境！》Visual Studio Code のアドオンで簡単にFTP転送をする方法

私はVisual Studio Codeを数年前からメインエディタとして使っています。軽量、複数ウィンドウ表示、拡張性があるところが特徴で、Git操作もできます。

今回は、アドオンを使ってFTP/SFTPのファイル転送を簡単に行う方法を紹介します。

※ Visual Studio Code をインストールしていない方はこちらからインストール。

1. FTPの同期用フォルダを準備する

① 任意の場所にフォルダを作成します。既存のフォルダを使用する場合は作成不要です。

※ このフォルダにFTP接続先のデータがコピーされます

2. ワークスペースを作成する

ワークスペースにフォルダを追加する

①〔ファイル〕- ②〔フォルダーをワークスペースに追加〕をクリック。

1で準備したFTPの同期用フォルダを選択します。

追加が完了すると以下のように表示されます。

ワークスペースを保存する

①〔ファイル〕- ②〔名前を付けてワークスペースを保存〕をクリック。

保存が完了すると、以下の通り反映されます。

3. Visual Studio Code のアドオン “SFTP” をインストール

① 〔Extensions〕をクリック

② 検索ボックスに ”sftp” と入力

③ 表示された〔SFTP〕を選択

④ SFTPの〔Install〕をクリックし、インストール

インストールが完了すると以下の表示になります。

〈Ctr〉+〈Shift〉+〈p〉を押し、① ”SFTP”と入力し、② ”SFTP:Config” を選択

※ フォルダの選択肢が表示された場合は、フォルダを選択してください。

設定を記載し保存する。設定の意味はこちらに記載があります。

{
    "name": "My Server",　←　任意の識別名
    "host": "localhost",　←　ホスト名 or IPアドレス
    "protocol": "sftp",　←　プロトコル
    "port": 22,　←　ポート番号
    "username": "username",　←　FTPサーバーユーザー名
    "username": "password",　←　FTPサーバーパスワード　　
    "remotePath": "/",　←　FTPサーバーリモートパス
    "uploadOnSave": true　←　自動保存するかどうか
    "ignore": [ ←　除外対象を指定
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store",
        ".gitignore"
    ]
}

※ 手動でアップロードする場合はuploadOnSaveをfalseにします