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

Visual Studio Code のアドオンで簡単にFTP転送をする方法 WEB

私は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にします

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

SFTPまたはFTPの接続先サーバーを選択

※ 接続先サーバーが表示されない場合は、”sftp.json” の内容が間違っている可能性がありますので、ご確認ください。

〔. choose current folder〕を選択し、接続先サーバーの指定ディレクトリ以下のデータをダウンロード。

画面下部にダウンロード中アイコンが表示されます。完了するまで待ちます。

これで設定は完了です。ダウンロード後に対象の右クリックメニューからUploadやDownloadなどができるようになります。

まとめ

Visual Studio Codeだけで、FTP操作も完結できるのでかなりの効率化ができます。

FTPクライアントを併用するよりもかなり便利ですのでとてもお勧めです。

THIS POST
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
MEMOWEB
SERVER
スターサーバー

当サイトは、安くてハイスペックな、このスターサーバーを使用しています。
スタードメインでドメインを取得すれば、たまったポイントでサーバーが更に安くなります。
◎ オールSSD!高速サーバー環境
◎ 無料で使える!独自SSL機能
◎ 即時プラン変更にも柔軟に対応
◎ 大量アクセスに強いWebサーバー”nginx”
△ データ転送量がロリポップより少ない

ロリポップ

こちらもコスパの良いロリポップ。サポート体制が充実しているのに加え、利用者数も多いので、困ったときの情報はネットに多くあるかもしれません。
◎ データ転送量が多い
◎ 無料独自SSL機能
◎ 充実したサポート体制
△ サーバーストレージはHDD ※DBサーバーのみSSD
△ WebサーバーがApache 2.4.x

エックスサーバー

それなりのアクセス数が見込まれる場合はエックスサーバーがおすすめです。
ただ、値段もそれなりにするので、ブログ開設時には、ここまでのスペックは必要ないかもしれません。
◎ 圧倒的なハイスペック環境
◎ 無料独自SSL機能
◎ 大量アクセスに強いWebサーバー”nginx”
◎ モリサワのWebフォントが無料で使える
△ 低価格プランがない

COLOR CODE