linux 打开浏览器_基于云的IDE,在浏览器上运行VSCode——code-server

介绍

code-server 是一个可以在远程服务器上运行 VS Code 的工具,可以说是服务器端的VSCode,你可以部署到远程服务器,然后在浏览器进行访问,来达到近乎本地的体验效果,code-server就是这样一个工具,为云端编辑器提供了强大的解决方案,而且是开源的!


ec6e58f74a34f854af20dfa3766ee19b.png

Github和官网

https://github.com/cdr/code-server/

https://coder.com/

code-server的优势

1、很明显,你可以不用下载本地应用,直接部署到服务器之后,在本地浏览器就可以打开,非常的方便;

2、多端开发环境统一,已经在云端,那么你只需要配置一个环境,就全部统一了,不需要在多端同步,未来很多应用可能只是你书签中一个某一个而已;

3、包括流畅性和功能上,几乎和原生VSCode拥有一致的体验,当然这取决于你的网络环境。


d51bedae9398a3fbbf70648497914ba0.png

安装步骤

本篇将在Linux上进行演示,由于条件限制,就在本地的Deepin linux上进行测试,执行以下命令即可(可能会有网络问题,最近Github可能访问效果不佳,稍后会打包上传至Gitee附件),除了可以部署在本地,你还可以部署到Docker容器中,因为笔者docker用的不多,本文就不在细说。


wget https://github.com/cdr/code-server/releases/download/1.1156-vsc1.33.1/code-server1.1156-vsc1.33.1-linux-x64.tar.gztar -xzvf code-server1.1156-vsc1.33.1-linux-x64.tar.gzcd code-server1.1156-vsc1.33.1-linux-x64chmod -R 777 code-server./code-server

以上命令不在细说,你可以分步执行,也可以一起粘贴过去执行,都没问题,不出意外,应该和以下截图类似


e4a8dc3d7db606e1aeb95687b1817922.png

此时你就可以打开你的浏览器进行体验了,访问你的8443端口,如下图可能会出现安全提示,我们先不管,因为是http的请求


9cff64e1fe3fe28fb492e9985647edbe.png

点击继续访问,然后就会到一个登录界面来,输入密码,密码在你的终端上


99a1f834e0ff545ee2cef5a79e2cb2ae.png

a2680839e730cc5a8a27312354829ffb.png

密码复制下来,输入,惊喜的时刻到了,看图


804f8f15dd6a4db56d47ccbcf0df2d03.png

这可不就是VSCode,接下来可能还够你折腾一阵子。

体验一下

我这里只以最简单的例子来测试,如下图,一个最简单的html


9702555b1a2ab3e30b4f49e17be6feeb.png

我们在这个地方安装一个扩展live server,这是我经常用的扩展,浏览器可以实时刷新,非常实用


71dc9942987121ae27ac55b0fbf30d5e.png

安装完成后我们到index.html文件,右击


b693dba7f20af19eebb2bcedd400c1bb.png

不出意外地话,会提示启动在本地的5500端口,我们在浏览器打开测试,如下图:


9b2bdae482403b83e6daa46d805b171d.png

由于是在本地,一切看上去都是那么的美好!

扩展安装

我在本地测试,很多安全性的工作并没有做,在安装扩展的时候我可以直接安装,除部分类似语言包不支持以外,其他插件,类似主题、图标、路径自动完成、智能提示等都是正常安装,如下图


2bf92a4269205e4fb63c5eace82273c0.png

主题正常安装


5f5da76642cedeb6887955dc6ce48fc1.png

可能有些小伙伴在安装扩展的时候会遇到很多问题,在安装到服务器的时候,安装扩展可能没那么容易,所以还有一种解决方案就是,你可以到下载离线的扩展包,然后通过离线的方式进行安装,前提是你有一定的权限。这部分就需要你自己好好把控了,毕竟安全为重!

官方原话:目前我们无法使用官方VSCode Marketplace。我们创建了一个专注于开源扩展的自定义扩展市场。但是,如果您有权访问.vsix文件,则可以手动安装扩展。


离线安装方法:

之前在Windows 10的linux子系统中安装遇到各种奇葩问题,在确定是在浪费时间后,直接转到Linux安装后,非常的顺畅


70a20de511aa1637efe9db962d7ad72b.png

其它事项

因为我是在Deepin的桌面版Linux上进行测试的,每个人测试的环境可能不一样,遇到的问题可能也不一样,所以感兴趣的小伙伴可以自行尝试,如果你和我一样也是本地测试,那么非常容易的事情就是可能一切你都只需要点点鼠标,特别是对Linux不熟的,比如我自己,就不需要那么多命令了。Deepin个人感觉对我们开发人员而言已经相当的友好了!


1e90d0a23ade702ae035cd945594fab2.png

总结

code-server确实是一个非常强大的工具,我相信在将来,云端编程可能会是一种趋势,这样能节省大量的安装配置工作,一切都在云端共享,code-server不会是第一个,也不会是最后一个,由于笔者对Web技术的热爱,真心希望更多优秀的Web产品百花齐放,也祝愿所有热爱软件开发和学习的朋友能够实现自己的理想!

由于近期Github访问不稳定,也有可能是我本地网络原因,访问不是很顺畅,那么我也将code-server的发布版备份到了我的一个码云仓库,如下,点击附件,找到你想要的

https://gitee.com/null_341_5574/chrome_plugin


011502a04c0a44b736ef9b4783fb87f6.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值