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
  }
]

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

写在最后

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

推荐阅读更多精彩内容