Cqing 博客

ftp-sync 插件实现本地客户端和服务端文件同步


Vs code 中Ftp-sync实现本地和服务器文件同步

使用ftp-sync 的需求：

为什么要使用ftp-sync插件来实现本地和服务器文件同步？

小Q 我在做项目的时候，经常要在本地写代码，调试完上传服务器查看真机效果，如果有错误返回本地继续写代码，调试完，继续上传服务器。。。。。可以看一下下图，不断重复上述操作，对于一名前端人员来说更是繁琐；

况且，我还是用FileZilla这款软件来把本地上传到服务器，完全手动，而且还要先手动连接远程服务器，在网速比较不好的情况下，是比较蛋疼的，亲身体验过。

回归正题：

1 安装ftp-sync:

  • 使用vs code的同学，都可以在扩展模块那下载安装ftp-sync;实在找不到，就如下图：
  • window：
  • 安装方法1. Ctrl+Shift+P 输入 ext install [插件关键字/名称]
  • 安装方法2. Ctrl+Shift+P (或F1) 输入Extensions, 选中 Install Extension然后输入插件名称/关键字
  • mac:
  • command+⬆️ +p 即可进入命令行；

2 使用ftp-sync:

1.第一步，初始化

输入命令：Ftp-sync:Init 会出现如下的文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
 "remotePath": "/var/data/",
 "host": "192.168.0.78",
 "username": "shoukii",
 "password": "shouadmin",
 "port": 22,
 "protocol": "sftp",
 "uploadOnSave": true,
 "passive": false,
 "debug": false,
 "privateKeyPath": null,
 "ignore": \[
 "\\\.vscode",
 "\\\.git",
 "\\\.idea"
 \]
}

在这个文件里需要配置好自己的服务器的host username password port基本信息，主要用来连接远程服务器

2 第二步：

把本地文件推送到远程服务器 使用命令 ：Ftp-sync: Sync Local to Remote 基本上到这里就可以实现本地文件到远程服务器的同步， 在这里，只要在本地保存了，就会立即执行ftp-sync 的命令，自动保存文件到远程服务器。

3 题外：

也可以直接从服务器远程拉取文件到本地； 只要使用命令：Ftp-sync: Sync Remote to Local

vs code