VsCode SFTP插件詳細使用介紹

VsCode SFTP插件使用介紹
一、前言
二、SFTP安裝
三、SFTP原理
四、SFTP配置
4.1 常用配置
4.2 示例配置
五、SFTP使用
六、結語
一、前言
前端開發少不了ftp修改文件的情況，通常我們都會用 FlashFXP 等軟件來上傳或下載網站文件，但如果我需要進行網站編碼開發的時候，那麼使用編輯器軟件來上傳文件就方便多了。

這次我介紹用 VsCode 的 SFTP插件來同步網站文件。
ps：SFTP目前不能處理中文文件，我也找不到解決辦法，如果你有，請留言告訴我。

二、SFTP安裝
VsCode安裝插件很簡單，插件管理，搜“SFTP”，然後安裝即可。

三、SFTP原理
SFTP原理是這樣的：首先本地要有一個項目文件夾，同時遠程也有一個項目文件夾，然後通過配置文件來同步二者。
SFTP可以查看遠程項目所有文件，但不能直接操作，必須操作本地項目文件，再同步到遠程項目。

現在我們本地和遠程均有一個文件夾“sftpFolder”，用VsCode打開本地文件夾“sftpFolder”，然後執行 ctrl+shift+p ，搜索 SFTP:Config ，回車後，會生成一個“.vscode/sftp.json”，這個就是配置文件。
同時，如下圖左側會多了一個“遠程目錄”。

四、SFTP配置
4.1 常用配置

{
    "name": "本地文件夾名稱（可自定義）",
    "host": "ip或域名",
    "protocol": "協議：[sftp/ftp]默認ftp",
    "port": 22,
    "username": "username",
    "password":"password",
    "remotePath": "遠程文件夾地址，默認/",
    "context": "本地文件夾地址，默認爲vscode工作區根目錄",
    "uploadOnSave": true,
    "downloadOnOpen":false,
    "ignore": [
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store"
    ],
    "watcher": {
        "files": "*",
        "autoUpload": false,
        "autoDelete": false
    }
}

配置文件不能寫註釋，所以這裏說明一下其中幾個屬性：

uploadOnSave：本地更新文件保存會自動同步到遠程文件（不會同步重命名文件和刪除文件）
downloadOnOpen：從遠程服務器下載打開的文件
ignore：忽略的文件（匹配的文件不會同步）
watcher：監聽器（可以重命名文件和刪除文件）
autoUpload：文件變更會自動同步（修改和重命名）
autoDelete：文件刪除會自動同步
context：默認當前工作根目錄，如果想只上傳dist，可以寫：“dist”
>>更多配置請看這裏

4.2 示例配置

{
    "name": "test", 
    "host": "abc.com",
    "protocol": "ftp",
    "port": 21,
    "username": "username",
    "password":"password",
    "remotePath": "/",
    "uploadOnSave": true,
    "ignore": [
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store"
    ],
    "watcher": {
        "files": "*",
        "autoUpload": false,
        "autoDelete": false
    }
}

五、SFTP使用

Upload Folder 和 Download Folder 在 uploadOnSave 和 watcher 都關閉的情況下使用。

六、結語
全文結束，希望對你有所幫助。