【云IDE】CSDN云IDE的初探以及实战操作

---

前言

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

在CSDN的云IDE诞生之前，就已经有一些可以供程序员使用的云IDE产品了，如老大哥Github的Codespace所代表的vscode系列的云IDE，利用vscode的强大优势，为开发者提供了可以随时随地进行开发的工作环境，你仅需要在浏览器端直接进行代码开发，代码的运行和调试都是云端操作，初次以外还支持插件安装等，可以说是特别方便了。初次以外还有另一个派系——theia，这是一个开源的云IDE，它所走的路线和vscode是高度相似的，甚至界面也是高度相似，支持多种插件。不同的是他是根据Eclipse的theia构建的，并且你可以发布任何你自己的IDE，因为它的定位就是IDE的IDE。
另外，还有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

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

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）

1
2
3
4
5
6
7
8
9

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

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使用教程