本地 IDE 已废!编辑器大结局!GitHub 的云 VSCode 实测
之前写过一篇文章GitHub 里面可以直接用 VS Code 了,真香!当时该功能还处于申请 Beta 权限阶段,有朋友申请成功了,大鹏就赶紧去体验了一下,体验之后的感受就是:
![](https://filescdn.proginn.com/d1a723025a43c74499a96931d8af35e3/58fa90405af3b8862ec17fee3923b528.webp)
1、创建环境
首先进入 GitHub 找到任意一个项目,有 Beta 权限的用户点击 code 之后会发现多出来一个【Open with Codespaces】选项,Codespaces 就是 GitHub 云端 VSCode 的产品名称
![](https://filescdn.proginn.com/992036714363e198960a662bf57b36ba/d0cec5d24a0840645ec0f0255aa0760a.webp)
点击后要进行下一步的选择,如果你之前建立过该项目的编辑环境,则可以进行恢复,或者也可以选择【New codespace】创建新环境,Beta 阶段最多只允许创建 2 个
![](https://filescdn.proginn.com/56b6186cb8573cf6c09e225528346145/0e60cb52e13b8e645cbf0eabef00d8fe.webp)
选择环境之后,就会开始进行初始化
![](https://filescdn.proginn.com/903cda9257d9f7c0efac6a486ad48058/8e81e33f81d30ab69336b84181e98773.webp)
初始化完成后就可以看到完整的开发环境了,整体布局和 VSCode 几乎一模一样,VSCode 可以使用的插件在这里都能找到
![](https://filescdn.proginn.com/9cf59fe5e981e7ecff506f127730eb36/2a0de7196582076d85ffad6b4cede0ee.webp)
2、开发服务器概况
打开开发环境之后,相信大家和我一样,会产生很多疑问,这会不会只是个编辑器?编辑好了之后代码又不能运行?搞这个意义大么?
在这里我要告诉大家:
![](https://filescdn.proginn.com/4e129448261d150d26ad62bc8d80b8df/610c9b3adcfd6fa474c9450d800f21f8.webp)
基本信息
硬盘空间:180GB
![](https://filescdn.proginn.com/9eb0c5b7cd952fe5aebf9a4102b6c35d/768436b07a08ff83d5bb2d2c5f1c23b8.webp)
CPU:2 核
![](https://filescdn.proginn.com/5eef70e5cfc82e6bf4f1543cd496c184/d617e552b914d3fce6c2dd04c7233523.webp)
内存:4GB
![](https://filescdn.proginn.com/36ce5ae39d77766f33a383a19920f5c6/7bf57cccd99ad5f3079a0b3109de9e5d.webp)
操作系统:Ubuntu
![](https://filescdn.proginn.com/62849c5ffa0819bbb2bed37e5cf57af4/c7440b05c466bf284bace271e471cee4.webp)
可以看到,整个开发服务器的配置还是很给力的,开发一些小项目,是非常够用的
开发环境
开发服务器配置倒是还可以,但是开发环境什么的还要自己安装好麻烦
在这里我要告诉大家:
![](https://filescdn.proginn.com/174278c8f5568559afb5c5cda7490b2d/6be95f0e420bac81ac7346d791fe9ddf.webp)
常用的 node、python、java、go 这些语言全都有!
![](https://filescdn.proginn.com/ce8538fab39bf1efc780659514e6f8d5/f0329897cfe597a5b4366d6c889f0261.webp)
gcc、mvn、gradle 这些也都不在话下,都不用自己安装直接用就行!
![](https://filescdn.proginn.com/a36ddaee3452f943cd504f41f502cc56/b4b0a2ccfcb95d53e5ba0df80a28b6df.webp)
3、开发示例
说了这么多,就看环境各种好了,真的能做开发么,在这里给大家一个完整的示例。
首先打开一个前端项目,直接执行yarn
指令安装开发包
![](https://filescdn.proginn.com/7608e73b1f5167cfe314c2695adbeb86/0f73211548374edfdc072e89d5e9d6e6.webp)
安装完成后执行yarn start
指令启动项目,下图中可以看到启动成功了
![](https://filescdn.proginn.com/0c627441f50217ad538d42ffab237624/f8549e47c3d8f3999266387c5a3d9ed7.webp)
这时候遇到了一个问题,启动成功了这个启动地址是本地的http://localhost:3000
,这也没法访问呀。不慌,点击本地地址访问,这个时候就能看到真的有页面!
![](https://filescdn.proginn.com/b6100fc227480f6ac865989eff72a6e4/b0d94e521aefa01b6d6c17e6af748a4e.webp)
访问http://localhost:3000
之后会自动跳转到 GitHub 提供的页面网址
![](https://filescdn.proginn.com/2bde00e96530b680bd4f21b5a4e28578/f3a8fbee8539036487b373e80e590de5.webp)
除此之外,在左侧开发代码的时候,右侧也会自动更新变化,和本地开发的体验完全一致!
4、其他功能
除了和本地开发体验一致的之外,还可以看到更多的优势
不需要自己配置 SSH 了,GitHub 直接帮你配置好了
![](https://filescdn.proginn.com/add176cce5a39a89eee5bdf5cd7ff5c0/66e30506a7858e500583a00bdebd4772.webp)
本地 VSCode 编辑器的菜单栏进行了移动,更好的优化显示空间
![](https://filescdn.proginn.com/837c0a5b322e73b661c0faac1b0c6877/91a3acc8cc9000c3df558bca27e81a49.webp)
Pull Request 和 Issue 的查看非常方便,结合 GitHub Action 简直爽歪歪
![](https://filescdn.proginn.com/bd7ebd5ff5a1d0499a17c949582de794/6b0910ca36de1de797416af70ae6095c.webp)
还有一个 Live Share 功能,使用这个可以一起看代码编程
![](https://filescdn.proginn.com/1ee13bedd8ad922916842d21aa9b5214/c2fb3c2838ee440dd8a7b3f4dcbab7ac.webp)
![](https://filescdn.proginn.com/35f1a0ad120a4aa5df3d020ed0c94d5e/18cb6af4162aafe8c2a0e32196fa5721.webp)
5、小结
【本地 IDE 已废!编辑器大结局!】这句话并非完全的标题党,GitHub 处于 Beta 阶段的云编辑器有相当多的优点!
用完即走,有网络可以随时随地开发,不消耗本地资源 开发环境一应俱全,注册个账号就能直接在线写代码 结合 GitHub Actions 自动集成部署无痛点 结合 Issue、Projects、Wiki 和私有仓库等功能,对于小团队开发吸引力极强
VSCode 在本地开发编辑器中已经占据了半壁江山,如今 GitHub 的 Codespaces 则更上一层楼,期待该功能早日公测,给开发者更多选择和优质的体验
推荐阅读
1、力扣刷题插件
2、你不知道的 TypeScript 泛型(万字长文,建议收藏)
❝关注加加,星标加加~
❞如果觉得文章不错,帮忙点个在看呗