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

问题描述

有两台笔记本，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 用作查看其他程序文件。

参考文献

WikiNotes/在浏览器中编辑代码
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