LabEx VM WebIDE 界面

​

WebIDE 预览

1. 用各种编程语言（Java、JavaScript、Python 等）编写和调试代码
2. 具有实时预览功能的 Web 开发项目，请参阅 在 WebIDE 中创建您的第一个 HTML 页面
3. 通过直观的界面管理项目文件和目录
4. 用于命令行任务的集成终端操作

​

环境布局

1. 左侧边栏：
   • 用于项目导航的文件资源管理器
   • 搜索功能
   • 用于 Git 操作的源代码管理
   • 扩展面板
2. 编辑器区域：主要编码工作区
3. 底部面板：终端、问题和输出
4. 状态栏：快速访问设置和实时预览
5. 顶部菜单栏：文件、编辑、查看和其他选项

​

终端访问

1. 点击左下角的 图标，切换到终端选项卡；
2. 使用顶部菜单：终端 > 新建终端

​

预览 HTML

1. 在 WebIDE 中，单击右下角的“Go Live”按钮。
2. 将打开一个新浏览器标签页，其中呈现您的 HTML 页面。
3. 或者，您可以单击“Web 8080”选项卡以打开预览。
4. 如果您的项目位于子目录下，您可以通过单击资源管理器中的子目录名称来访问它，然后它将自动预览该目录中的 index.html 文件。
5. 如果您的项目有多个 HTML 文件，包括 index.html，您可以将文件名附加到 URL 以直接预览它。例如，https://xxx.labex.io/another-file.html。
6. 您可以通过单击“在新标签页中打开”按钮在新标签页中打开预览。它将在新的浏览器标签页中打开预览。

• 启动 Web 服务器
• 在您修改代码时提供实时更新

提示：LabEx VM 在端口 8080 上托管预览。您可以与他人共享预览链接以展示您的工作。在您的 lab vm 停止后，预览链接将不再起作用。

​

使用场景

Java 开发示例

您的第一个 Java Lab

这是一个 Java 示例 lab，演示了如何使用 LabEx WebIDE 编写、编译和运行一个简单的 Java 程序。

在 WebIDE 中使用 Java 项目：

1. 通过资源管理器创建一个新的 Java 文件
2. 使用语法高亮显示编写您的 Java 代码
3. 在终端中编译和运行：

Copy

javac MyClass.java
java MyClass

4. 实时查看编译错误和警告

Web 开发示例

您的第一个 HTML Lab

这是一个 HTML 示例 lab，演示了如何使用 LabEx WebIDE 创建一个简单的网页。

对于前端开发任务：

1. 创建 HTML、CSS 和 JavaScript 文件
2. 单击右下角的“Go Live”按钮
3. 通过以下方式访问您的网页：
   • LabEx VM 顶部的 Web 8080 选项卡
   • 使用 + 按钮创建新的端口预览选项卡

注意：您的项目会自动部署到 LabEx 服务器上的公共 URL，使其可以通过 Web 选项卡访问。

Python 开发示例

创建一个宇航员名牌处理器

这是一个 Python 示例挑战，演示了如何使用 LabEx WebIDE 处理宇航员姓名。

对于 Python 编程：

1. 在资源管理器中创建一个 Python 文件
2. 编写您的 Python 代码，包括：
   • 语法高亮显示
   • 代码补全
   • 错误检测
3. 在终端中运行您的脚本：

Copy

python3 script.py

4. 使用集成的调试器进行逐步执行

​

常见问题解答

如何访问我的 Web 应用程序？

LabEx VM 会自动部署您的 Web 项目：

1. 默认端口 8080：
   • 单击 LabEx VM 顶部的“Web 8080”选项卡
   • 您的应用程序将通过公共 URL 访问
2. 自定义端口：
   • 单击 + 按钮创建新的端口预览选项卡
   • 每个端口都有自己的公共 URL
   • 适用于运行多个服务（例如，前端和后端）

注意：与本地开发不同，您不能直接访问 localhost，因为 LabEx 在云中运行。

什么是必要的键盘快捷键？

WebIDE 中的常用快捷键：

• 文件操作
  • 新建文件：Ctrl+N
  • 保存：Ctrl+S
  • 查找：Ctrl+F
  • 替换：Ctrl+H
• 面板控制
  • 切换侧边栏：Ctrl+B
  • 切换终端：Ctrl+`
  • 命令面板：Ctrl+Shift+P
• 编辑器功能
  • 多光标：Alt+ 单击
  • 选择所有出现：Ctrl+Shift+L
  • 格式化文档：Shift+Alt+F

我可以安装其他工具或软件包吗？

是的，您可以使用 Ubuntu 包管理器安装其他工具：

Copy

sudo apt update
sudo apt install package-name

对于特定于语言的包管理器：

• Node.js/npm：

Copy

npm install package-name

• Python/pip：

Copy

pip install package-name

请记住，安装是临时的，将在您的会话结束时重置。

如何处理文件上传和下载？

WebIDE 提供了几种管理文件的方法：

1. 上传文件：
   • 将文件拖放到资源管理器中
   • 在资源管理器中右键单击后使用上传/下载
   
2. 下载文件：
   • 在资源管理器中右键单击文件
   • 选择“下载”
3. 复制/粘贴：
   • 文本内容可以在您的本地计算机和 WebIDE 之间直接复制
   • 二进制文件应使用上传/下载功能

请记住，所有文件都是临时的，将在您的会话结束时丢失。