VSCode 安裝 SFTP/FTP sync 實現即時更新上傳

July 23, 2020
Posted By Adam Ou-Yang

VSCode 安裝 SFTP 實現即時更新上傳

在多數付費IDE 都具備有 SFTP/FTP sync 更新即時上傳SFTP功能，實現本地開發遠端程式碼。

在這裡說明 VSCode 的擴充，如何達到本地開發遠地程式碼的流程設定。

安裝SFTP擴充

在 VSCode 擴充，搜尋 SFTP

https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

在專案建立設定檔

開啟專案，在VSCode輸入 Command+Shift+P (mac)或 Ctrl+Shift+P (windows) 啟用命令窗，輸入

>SFTP:Config

sftp.json

{
    "name": "DevelopServer",
    "host": "遠端主機IP",
    "username": "root",
    "privateKeyPath": "/Users/使用者名稱/.ssh/id_rsa",
    "protocol": "sftp",
    "port": 22,
    "remotePath": "/var/www/html/專案路徑",
    "uploadOnSave": true,
    "watcher": {
        "files": "**/*",
        "autoUpload": true,
        "autoDelete": true
    },
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store"
    ]
}

連線到遠端目錄

開啟專案，在VSCode輸入 Command+Shift+P (mac)或 Ctrl+Shift+P (windows) 啟用命令窗，輸入

>SFTP: Sync Local -> Remote

即可連線到遠端目錄。

這時可嘗試新增檔案並且修改內容，在檢查是否有上傳到遠端。

查看遠端資料目錄

在側邊選單，可以看到遠端文件icon，點擊後，可以直接查看遠端的目錄及檔案