【玩转 Cloud Studio】简单体验与思考

一. 功能体验

1. 界面

界面跟vscode差不多, 可以安装vscode插件, 打开终端, 整体体验跟本地vscode没啥区别

image.png

2. 在线预览调试

可以通过配置preview.yml文件, 来控制预览

比如我的教程中, 要打开示例页面, 就通过node写了个服务, 通过配置文件, 来运行命令, 开启服务

可以看到他给页面分配了外网地址, 可以直接在浏览器访问, 当然在代码中如果想访问页面或者接口, 是可以直接访问localhost的

image.png

配置文件主要还是关注run和root的参数配置, run的命令可以在package.json里组织好, 例如我的就是运行一个js文件

image.png

# .vscode/preview.yml
autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
apps:
  - port: 3000 # 应用的端口
    run: yarn start # 应用的启动命令
    root: ./ # 应用的启动目录
    name: testWeb # 应用名称
    description: 爬虫测试 # 应用描述
    autoOpen: true # 打开工作空间时是否自动开启预览（优先级高于根级 autoOpen）

3. 协作功能

可以邀请大佬加入进来, 对代码进行指导, 可以视频+语音, 整体如果网络顺畅的话, 体验还是很爽的

1660322525769.png

语音和视频功能, 直接可以放弃那些远程工具了, 直接通过网页干全部事

1660322769015.png

跟随功能可以, 点击跟随后, 对方打开文件, 自己这边也会跟着打开

1660322856204.png

4. 文档详细

其实IDE基本操作和本地vscode差不多, 主要还是一些特殊的功能, 比如预览, 协作啥的, 文档都有介绍

1660323136724.png

二. 遇到的问题

1. apt有些包安装不了

估计是安全问题, 限制了包的安装, 这样也导致了我的puppeteer在这个环境中没法跑, 按issue介绍, 需要apt安装一些依赖

2. 预览网址跟本地网址不一致

这应该没法避免, 毕竟IDE的环境在内网, 而预览用的是外网

3. 关闭tab没提示

虽然关掉了, 还能在全部空间里找到, 但是直接就能叉掉, 还是有点慌乱, 怕没自动保存成功, 是不是加个onbeforeunload拦截, 防止误操作

1660323650921.png

三. 自定义模板

用Cloud Studio做了个爬虫教程 模板链接: https://cloudstudio.net/templates/h3mm9OTGWuz 模板源码: https://github.com/klren0312/spiderTemplate

模板可以用在笔试题, 教程, 还有项目基础框架等方面, 主要就是别人点了模板链接, 就可以拎包入住, 不用管基础环境, 尽管编码

我做的爬虫教程自定义模板, 主要就是在介绍爬虫的同时, 使用的人也可以自己修改爬虫代码, 去体验, 而不是像原来只是看文字, 自己环境搭建还浪费时间, 就失去了尝试的欲望

四. 总结

Cloud Studio整体给我带来了新的开发体验

1. 不需要关心自己电脑的配置, 只要网络基本正常, 就可以直接开发, 我现在公司的电脑8G内存卡到爆.
2. 可以协作开发, 以前朋友问问题, 都是用远程工具远程, 或者他上传到github, 我再去拉下来看看改改, 然后顺便开个微信语音骂骂, Cloud Studio把这些全部集成了, 还是很爽