前言
Cloud Studio 作为一款在线编辑器已经推出了2.0版本，笔者体验下来的感受是已经能够媲美本地编辑器了。作为云端编辑器，有很多本地编辑器无法比拟的优点，在不同主机、团队协作方面更胜一筹。但在某些方面还是有不足的地方，例如：目前支持的插件比较少、价格比较贵等缺点。如果想用于生产环境，只能等后续继续完善插件生态了。如果嫌价格太贵，可以自己购买云主机创建Cloud Studio工作空间就可以了。
开始
因为Cloud Studio是云端部署的，这一点使他很适合作leetcode的刷题编辑器。无论是在家里还是公司，很可能随时都有刷一道题的冲动。Cloud Studio可以保证一致的用户体验，而且比leetcode网页上的那个编辑器强大得多。
创建一个git仓库
首先新建一个仓库用来存储题目代码，我用的是github。
image.png创建Cloud Studio项目
打开Cloud Studio首页，找到All in One模版并创建。
image.png等待初始化完成后就可以看到编辑器界面了。
image.png点击克隆仓库
image.png选择github远程源。
image.png这时候会弹框提示需要登录，点击允许会跳转到github登录页面授权登录就可以了。
image.png然后输入关键词就可以找到自己的仓库了。
image.png选择克隆的目录。
在Cloud Studio中打开leetcode
一般我们需要边看题目边写，写完还得运行。如果单独开一个浏览器页面来回切换比较繁琐，下面我们来让项目初始化完成后自动在Cloud Studio中打开leetcode页面。
启动node服务
我们需要启动一个node服务，然后访问node服务的路径，在node服务中将页面重定向到leetcode页面中。下面是服务的代码，需要预先安装一下fastify。
代码语言：javascript复制// Require the framework and instantiate it
const fastify = require('fastify')({ logger: true })
// Declare a route
fastify.get('/', async (request, reply) => {
reply.redirect(302, 'https://leetcode.cn/problems/median-of-two-sorted-arrays')
})
// Run the server!
const start = async () => {
try {
await fastify.listen({ port: 3000 })
} catch (err) {
fastify.log.error(err)
process.exit(1)
}
}
start()然后在package.json中增加一个start命令来启动node服务。
代码语言：javascript复制{
"name": "leetcode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"repository": {
"type": "git",
"url": "git https://github.com/qq865738120/leetcode.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/qq865738120/leetcode/issues"
},
"homepage": "https://github.com/qq865738120/leetcode#readme",
"dependencies": {
"fastify": "^4.5.2"
}
}最后在.vscode目录下创建一个preview.yaml文件。
image.png# .vscode/preview.yml
autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
apps:
- port: 3000 # 应用的端口
run: npm run start # 应用的启动命令
root: ./ # 应用的启动目录
name: leetcode # 应用名称
description: leetcode # 应用描述
autoOpen: true # 打开工作空间时是否自动运行命令（优先级高于根级 autoOpen）
autoPreview: true # 是否自动打开预览, 若无则默认为true这里是对工作空间应用预览的一些配置。
完成后重新进入工作空间会发现自动启动node服务并且打开了leetcode页面。
image.png
