前言

近几年由于疫情的原因,大家不得不被封锁在家进行工作,从此开启了远程办公的时代。对于远程办公,现在有很多人进行了探索,程序员就是其中一种特别的群体。程序员可能随时都需要写代码,但是会面临着一些问题,比如没有一台合适的电脑,就算有,也不一定有合适的工作环境,如果开启远程桌面来写代码,那么写代码的流畅程度将大打折扣。为了解决这些问题,就催生出了一些专属于程序员的远程办公方式,也就是云IDE。云IDE最大的优势就是不需要你准备开发环境,打开即用,对于需要在家办公的打工人来说,是一种极为方便的工作方式。

在CSDN的云IDE诞生之前,就已经有一些可以供程序员使用的云IDE产品了,如老大哥Github的Codespace所代表的vscode系列的云IDE,利用vscode的强大优势,为开发者提供了可以随时随地进行开发的工作环境,你仅需要在浏览器端直接进行代码开发,代码的运行和调试都是云端操作,初次以外还支持插件安装等,可以说是特别方便了。初次以外还有另一个派系——theia,这是一个开源的云IDE,它所走的路线和vscode是高度相似的,甚至界面也是高度相似,支持多种插件。不同的是他是根据Eclipse的theia构建的,并且你可以发布任何你自己的IDE,因为它的定位就是IDE的IDE。
theia另外,还有JetBrains所提供的方案,远程IDE。受益于JetBrains强大的生态和JetBrains Space,它的特点就是你需要下载对应的客户端,比如说你得下载idea才可以使用远程开发,尽管后面听说它也是支持在网页端开发的,我是没有体验过的。

现在,CSDN最新产品【云IDE】来啦,他就是CIDE,它为开发人员提供了秒级构建的云开发环境,预置Python,Java,Nodejs等多种开发环境,并且服务器在国内,云IDE打开速度均是秒级,光这一点就碾压以上各种云IDE;CIDE还支持实时预览,持久化,只要你写的代码就会被保存到云端,它拥有vscode的所有功能,其流畅程度和离线IDE几乎没有差别,可以安装各种插件来提高你的效率而不用在乎你的硬盘够不够用。他还支持低代码开发,模型业务通过拖拽就可以生成各种应用和代码,支持可视化编程和可复用组件,高度提升开发效率。


云开发实战

1. 创建工作空间

首先进入云IDE控制台,其地址是,点击直达

https://mydev.csdn.net/product/ide/dashboard


点击新建工作空间进入创建工作空间页面,

  1. 在这里需要填入工作空间名字,你可以按照自己的喜好来填写你的工作空间名字
  2. 选择预置环境,这就是你所需要的云开发环境,目前支持python,java和nodejs,或者你可以偷个懒直接选择All in one,索性全选也是可以的
  3. 选择开发环境的规格配置,也就是云服务的配置,目前CIDE只支持2H4G的配置,因此这里默认即可
  4. 选择代码来源,也就是你的代码仓库,如果你填的是远程github仓库,那么IDE会自动给你clone好代码,并且安装依赖,这里选择的是CIDE提供的默认模板作为演示。
  5. 点击确定创建,工作空间就创建好了。

如果你的操作没有问题,那么会进入和我一样的页面,页面内分为两行,上面一行的信息主要是你账号所拥有的资源,即使用时长和可使用时长。下面一行是你的工作空间列表,显示你曾经创建过的工作空间,并且显示部分工作空间的信息和操作。
工作空间右侧为操作功能,从左到右分别是开关编辑删除,下面还有查看详情,用来查看你的工作空间使用情况。

使用情况

2. 打开工作空间

在控制台,选择你创建好的工作空间,点击开始按钮,即可进入你创建好的工作空间
如果执行操作是没有问题的,那就会进入对应的工作空间,如下图
作为一个开发人员,对vscode的界面肯定是相当熟悉的,那些大家都知道的就不需要再讲了,值得注意的是,最后侧是实时预览窗口,中间是代码编辑器,下面是日志窗口,大家已经很熟悉了。

3. 工程文件

CIDE提供的springboot模板其工程文件如下图,其中一些Java开发必须要了解的东西,比如源码目录,静态文件目录,pom文件都就不给予介绍了,相信大家肯定接触了很多了,这些文件中有一个文件时特别显目的,就是preview.yml


其内容如下,可见其应该是个提供工作空间打开时行为的配置文件

  • autoOpen表示打开工作空间时是否自动开启所有应用的预览,apps里面也有个相同的配置,是比根级的优先级要高的
  • apps用来配置当前应用的配置信息,如端口,名字,启动目录,运行的命令等。
autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
apps:
  - port: 8080 # 应用的端口
    command: mvn spring-boot:run # 应用的启动命令
    root: /ide/workspace/springboot-demo # 应用的启动目录
    name: springboot-demo # 应用名称
    description: 我的第一个 App。 # 应用描述
    autoOpen: true # 打开工作空间时是否自动开启预览(优先级高于根级 autoOpen)

这个配置文件的作用就是,一打开工作空间,就会自动启动所有的应用,并打开预览,就和下图一样。

4. CIDE的高级操作

CIDE是提供了一些高级操作的,最突出的一个就是可以直接从GitHub直接导入CIDE项目,例如我之前有个学习React的仓库,我想导入到CIDE。

在浏览器地址处添加ide就可以导入了,原本网址是这样的

然后添加ide
回车后就可以将我的仓库导入至CIDE了,此时会自动导入代码和依赖
> 对GitHub有了解的人知道,在项目页面按键会进入codespace,梦幻联动啊

注意,如果你出现了以下画面,需要添加ssh key才可以导入
此时你需要添加密钥,在控制台点击密钥管理
然后将显示的key添加到你的github

这样代码就可以导入成功了

总结

在我本次体验中,可以说是相当丝滑了。在我所体验过的众多云IDE中,CIDE绝对算是个出色的云IDE了。我的体验中,最令我感到舒服的就是这个速度了,可以说是相当的快,其他的云IDE都有一个共同的特点就是服务器在国外,老是被墙,以至于有时候都打不开。

一点小建议
在开发时,包源很大程度上决定了导入依赖的流畅程度,希望可以自动的配置好依赖源,比如npm,maven的源,而不需要手动去添加和修改,这样会大大提高使用体验。


CSDN 云IDE

免费使用地址:点击【云IDE】,即可开始创建工作空间啦~

CSDN最新产品【云IDE】来啦!【云IDE】将为各位技术er一键秒级构建云开发环境,提升开发效率!为持续提升产品体验,现CSDN特开展产品评测有奖话题征文活动,诚邀各位技术er免费试用【云IDE】,撰写使用体验,参与即可获得【话题达人】勋章+CSDN电子书月卡(站内千本电子书免费看),更有机会获得CSDN官方会员卡+周边大奖!

更多云IDE高级用法,黑科技云IDE使用教程

Logo

让你的灵感快速落地!InsCode 是一个无需安装的编程、协作和分享社区。

更多推荐