「Web IDE」- 在浏览器中编辑代码

  CREATED BY JENKINSBOT

问题描述

有两台笔记本,Laptop0、Laptop1,我们在 Laptop0 中编写代码,并且还会本机的查看其他程序文件。

我们希望在 Laptop0 中编写代码,并且能在 Laptop1 中查看 Laptop0 中的其他代码。

该笔记将记录:我们是如何解决这一问题的,即在 Laptop1 中浏览 Laptop0 中的代码文件。

解决方法

通过在 Laptop0 中运行 Web IDE 服务,然后在 Laptop1 中使用浏览器访问即可。

或者通过文件共享服务,共享 Laptop0 中的程序(但是需要 Laptop1 先挂载,然后才能访问,略有繁琐)。

运行 Web IDE 服务

有很多可选的 Web IDE 方案(我们没有进行对比,对比是件繁琐的事情,我们的需求又比较简单):
1)https://github.com/styfle/awesome-online-ide
2)cdr/code-server: VS Code in the browser
3)……

方法一、我们使用 Eclipse Theia 服务,它基于 VSCode 开发,运行也比较简单:

docker run -it --init \
    -p 3000:3000 \
    -v "$(pwd):/home/project:cached"
    theiaide/theia:next

方法二、或者,重新编译运行 VSCode 程序,以 Web 方式运行:

git clone --depth=1 https://github.com/microsoft/vscode
cd vscode
yarn install
yarn run compile
yarn run web

方法三、使用 teditor 服务,运行即可,可以直接编辑当前目录文件:

npm install -g teditor
teditor

最佳方案

再买新显示器,Laptop0 用作代码编辑,Screen0 用作文档查看,Screen1 用作查看其他程序文件。

参考文献

styfle/awesome-online-ide: 🌩️ A list of awesome online development environments
theia-ide/theia-apps: Theia applications examples – docker images, desktop apps, packagings
run vscode in browser in a single command – DEV
How to Use Git Shallow Clone to Improve Performance | Perforce