Skip to main content

​
WebIDE 预览

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

​
环境布局

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

​
终端访问

您可以通过两种方式打开终端：
  1. 点击左下角的 图标，切换到终端选项卡；
  2. 使用顶部菜单：终端 > 新建终端

​
预览 HTML

要预览您的 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. 您可以通过单击“在新标签页中打开”按钮在新标签页中打开预览。它将在新的浏览器标签页中打开预览。
“Go Live”将自动：
  • 启动 Web 服务器
  • 在您修改代码时提供实时更新
提示：LabEx VM 在端口 8080 上托管预览。您可以与他人共享预览链接以展示您的工作。在您的 lab vm 停止后，预览链接将不再起作用。

​
使用场景

您的第一个 Java Lab

这是一个 Java 示例 lab，演示了如何使用 LabEx WebIDE 编写、编译和运行一个简单的 Java 程序。
在 WebIDE 中使用 Java 项目：
  1. 通过资源管理器创建一个新的 Java 文件
  2. 使用语法高亮显示编写您的 Java 代码
  3. 在终端中编译和运行：
  1. 实时查看编译错误和警告

您的第一个 HTML Lab

这是一个 HTML 示例 lab，演示了如何使用 LabEx WebIDE 创建一个简单的网页。
对于前端开发任务：
  1. 创建 HTML、CSS 和 JavaScript 文件
  2. 单击右下角的“Go Live”按钮
  3. 通过以下方式访问您的网页：
    • LabEx VM 顶部的 Web 8080 选项卡
    • 使用 + 按钮创建新的端口预览选项卡
注意：您的项目会自动部署到 LabEx 服务器上的公共 URL，使其可以通过 Web 选项卡访问。

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

这是一个 Python 示例挑战，演示了如何使用 LabEx WebIDE 处理宇航员姓名。
对于 Python 编程：
  1. 在资源管理器中创建一个 Python 文件
  2. 编写您的 Python 代码，包括：
    • 语法高亮显示
    • 代码补全
    • 错误检测
  3. 在终端中运行您的脚本：
  1. 使用集成的调试器进行逐步执行

​
常见问题解答

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 包管理器安装其他工具：
对于特定于语言的包管理器：
  • Node.js/npm：
  • Python/pip：
请记住，安装是临时的，将在您的会话结束时重置。
WebIDE 提供了几种管理文件的方法：
  1. 上传文件：
    • 将文件拖放到资源管理器中
    • 在资源管理器中右键单击后使用上传/下载
  2. 下载文件：
    • 在资源管理器中右键单击文件
    • 选择“下载”
  3. 复制/粘贴：
    • 文本内容可以在您的本地计算机和 WebIDE 之间直接复制
    • 二进制文件应使用上传/下载功能
请记住，所有文件都是临时的，将在您的会话结束时丢失。