VSCode编辑器插件之SFTP工具

简介

sftp工具用来与服务器通讯，上传/下载文件操作。

日常开发工作中，经常会需要打包传到服务器上，每次使用sftp工具连接到服务器，找到指定路径，然后将本地某个目录上传到服务器端。

安装

打开VSCode编辑，搜索插件 sftp ，然后安装，如下所示。

1.png

安装之后可能会提示重启VSCode后生效。

配置

点击视图打开命令面板，或按快捷键 Ctrl + Shift + P (windows) / Command + Shift + P (Mac) ，输入 config ,进行sftp配置，之后VSCode会自动在当前工作空间目录下新建一个 .vscode 文件夹，里面有个 sftp.json 配置文件。操作步骤如下所示

2.gif

接下来我们做如下所示配置

{
    "name": "上传 BOE 到内网 241",
    "host": "192.168.0.241",
    "protocol": "sftp",
    "port": 22,
    "username": "root",
    "password": "password",
    "remotePath": "/work/zte-vue/boe/dist",
    "context": "./boe/dist",
    "uploadOnSave": false
}

配置说明

属性	说明
name	用来上传/下载时显示的名称，多配置时方便区分。
host	服务器ip地址
protocol	协议
port	端口号
username	服务器登录账号
password	服务器登录密码
remotePath	对应的服务器文件夹地址
context	本机文件地址
uploadOnSave	保存本地文件后是否立即上传到服务器

当我们需要把本地文件夹内容上传到服务器端时，我们只需再次打开命令面包(快捷键 Ctrl + Shift + P)，输入 sftp，选择 Upload Project，上传文件到服务器。之后的文件有修改需要再次上传到服务器端，只需要点 Sync Local -> Remote 即可。

3.gif

上传成功或失败，在VSCode编辑器底部状态栏有相应的成功或失败提示。

有些情况下，我们的工作空间是多个项目，需要上传到不同的服务器目录下，这时候我们就需要进行多配置。

多配置如下示例

[
  {
    "name": "上传 zfs-fssc-web 到内网 241",
    "host": "192.168.0.241",
    "protocol": "sftp",
    "port": 22,
    "username": "root",
    "password": "abcd1234",
    "remotePath": "/work/zte-vue/",
    "context": "./zfs-fssc-web/dist",
    "uploadOnSave": false
  },
  {
    "name": "上传 BOE 到内网 241",
    "host": "192.168.0.241",
    "protocol": "sftp",
    "port": 22,
    "username": "root",
    "password": "abcd1234",
    "remotePath": "/work/zte-vue/boe/dist",
    "context": "./boe/dist",
    "uploadOnSave": false
  }
]

上传文件的步骤和上传单文件一样。

写在最后

本文没有大篇章幅的讲述每个配置项的用途，主要已实际用途为主介绍，完整配置项说明点击此处查看。