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：文件删除会自动同步

>>更多配置请看这里

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 都关闭的情况下使用。

六、结语

全文结束，希望对你有所帮助。