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

2018-02-26 admin

开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 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 还有其它类似的插件,我试了一些均不如这个体验好,感兴趣的同学可以都试试比较一下,或者自己开发一个哈哈!

[转载]原文链接:https://zhuanlan.zhihu.com/p/34009714

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-7177.html

文章标题:为你的 VS Code 搭建远程开发环境

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
零基础-5小时开发一个electron应用-[实践]
一、背景 三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electron比较感兴趣,又是要做工具,那就直接怼 1.electron介绍 ​ electron最开始不叫这个名字,叫...
2017-12-26
回到顶部