为你的 VS Code 搭建远程开发环境

开篇先说一下自己遇到的烦恼，介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的，那台台式机基本上处于闲置状态，偶尔用来看看文档。后来随着自己需要做服务端开发，有时候需要同时跑前后端数个项目，那台低配 Mac 开始发烫，风扇呼呼的转，变得越来越卡。以至于影响到了我的工作效率和开发体验，于是我决定把那台台式机好好的利用起来。

我自己的想法是在 Mac 上写代码然后把代码及时的同步到台式机上，项目跑在远程的台式机上。这个同步过程一定要快，而且可以自动同步，不然将大大影响开发体验。

有的人可能会问你直接在台式机上开发不得了？哈哈，可以是可以，只是这样离我理想的状态有点远。macOS 上有多效率工具、开发工具都是很难在那台 Ubuntu 的台式机上找到替代品，而且台式机也完全没有便携性，开会什么的不方便。如果我可以实现自己的需求，就可以将两者的优点结合起来，何乐而不为呢？

我最初时打算自己整一套东西来实现自己的这个需求，后来发现 VS Code 有现成的插件可以满足自己的需求，体验很好，省的我自己折腾了。现在我们一起来看一下这个插件：

在 VS Code 的插件市场上搜索一下 ftp-kr(看名字就可以猜到这一位韩国小哥开发的插件)，下载完成之后执行一下 刷新一下 VS Code 窗口，使插件生效。下面我们来看一下这个插件的基本使用：

插件配置

首先执行一下 ，这会生成一个 ftp-kr.json 文件放到项目根目录下的 .vscode 文件夹中。我们来看一下如何配置这个插件：

下面的注释只是为了方便解释，json 不允许注释，在拷贝下面配置时请留意。

详尽的配置可以参考这里。

插件命令

配置完以后， 我们来看看插件的常用命令：

- 上传本地所有和远程机器不同大小的文件

- 从远程机器上下载所有本地不存在的文件

- 上传这个文件

- 下载这个文件

- 从远程机器上删除这个文件

- Diff 这个文件

- 刷新远程文件

- 重新连接到远程机器

- ssh 命令， 直接定位到远程机器的对应目录

全部命令可以参考插件介绍。

一些小技巧

一些前端项目在 debug 模式下打出的 JS 包会很大，在网络慢的情况下会导致浏览器 报错或者刷新慢的问题。这里以 webpack devServer 为例，将 devServer 的 compress 属性设为 true 就可以解决这个问题。

在 VS Code 左侧 EXPLORE 那一栏中，鼠标移到对应文件，右击鼠标，会列出一些常用命令。而且 EXPLORE 那一栏会多一个 FTP-KR：EXPLORE，在这里可以查看远程机器上的文件情况。

使用几天之后发现比在直接本跑项目的体验好太多，有我之前一样烦恼的同学可以试试。VS Code 还有其它类似的插件，我试了一些均不如这个体验好，感兴趣的同学可以都试试比较一下，或者自己开发一个哈哈！

文章来源于网络，如有侵权请联系我们，将予以删除

资源分享