【玩转 Cloud Studio】打造在线leetcode刷题神器

前言

Cloud Studio 作为一款在线编辑器已经推出了2.0版本，笔者体验下来的感受是已经能够媲美本地编辑器了。作为云端编辑器，有很多本地编辑器无法比拟的优点，在不同主机、团队协作方面更胜一筹。但在某些方面还是有不足的地方，例如：目前支持的插件比较少、价格比较贵等缺点。如果想用于生产环境，只能等后续继续完善插件生态了。如果嫌价格太贵，可以自己购买云主机创建Cloud Studio工作空间就可以了。

开始

因为Cloud Studio是云端部署的，这一点使他很适合作leetcode的刷题编辑器。无论是在家里还是公司，很可能随时都有刷一道题的冲动。Cloud Studio可以保证一致的用户体验，而且比leetcode网页上的那个编辑器强大得多。

创建一个git仓库

首先新建一个仓库用来存储题目代码，我用的是github。

创建Cloud Studio项目

打开Cloud Studio首页，找到All in One模版并创建。

等待初始化完成后就可以看到编辑器界面了。

点击克隆仓库

选择github远程源。

image.png

这时候会弹框提示需要登录，点击允许会跳转到github登录页面授权登录就可以了。

image.png

然后输入关键词就可以找到自己的仓库了。

image.png

选择克隆的目录。

在Cloud Studio中打开leetcode

一般我们需要边看题目边写，写完还得运行。如果单独开一个浏览器页面来回切换比较繁琐，下面我们来让项目初始化完成后自动在Cloud Studio中打开leetcode页面。

启动node服务

我们需要启动一个node服务，然后访问node服务的路径，在node服务中将页面重定向到leetcode页面中。下面是服务的代码，需要预先安装一下fastify。

// 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服务。

{
  "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