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

2023年1月16日 288次阅读 来源: SQL

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

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

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

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

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

插件配置

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

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

{
  "host": "", // 远程机器的 IP
  "username": "", // FTP/SFTP 用户名
  "password": "", // FTP/SFTP 密码，去除这一项，每次同步时需手动输入密码，手动输入密码貌似有 bug
  "remotePath": "", // 同步到远程机器的路径
  "protocol": "sftp", // 协议
  "port": 22, // 端口
  "fileNameEncoding": "utf8", // 文件名编码
  "autoUpload": true, // 是否自动上传
  "autoDelete": true, // 本地删除文件后是否自动同步到远程机器
  "autoDownload": false, // 是否自动下载
  "ignore": [ // 不同步的文件/文件夹
      ".git",
      "/.vscode",
      "/.happypack",
      "/node_modules"
  ]
}

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

插件命令

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

  • ftp-kr: Upload All – 上传本地所有和远程机器不同大小的文件
  • ftp-kr: Download All – 从远程机器上下载所有本地不存在的文件
  • ftp-kr: Upload This – 上传这个文件
  • ftp-kr: Download This – 下载这个文件
  • ftp-kr: Delete This – 从远程机器上删除这个文件
  • ftp-kr: Diff This – Diff 这个文件
  • ftp-kr: Refresh – 刷新远程文件
  • ftp-kr: Reconnect – 重新连接到远程机器
  • ftp-kr: SSH – ssh 命令， 直接定位到远程机器的对应目录

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

一些小技巧

  • 一些前端项目在 debug 模式下打出的 JS 包会很大，在网络慢的情况下会导致浏览器net::ERR_CONTENT_LENGTH_MISMATCH 报错或者刷新慢的问题。这里以 webpack devServer 为例，将 devServer 的 compress 属性设为 true 就可以解决这个问题。
  • 在 VS Code 左侧 EXPLORE 那一栏中，鼠标移到对应文件，右击鼠标，会列出一些常用命令。而且 EXPLORE 那一栏会多一个 FTP-KR：EXPLORE，在这里可以查看远程机器上的文件情况。

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

    原文作者：SQL
    原文地址: https://juejin.im/entry/5a92bb6d6fb9a06337575196
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞