跳转到主要内容

​
WebIDE 预览

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

​
环境布局

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

​
终端访问

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

​
预览 HTML

要预览您的 HTML 文件：
  1. 在 WebIDE 中，单击右下角的“Go Live”按钮。 Go Live button in WebIDE
  2. 将打开一个新浏览器标签页，其中呈现您的 HTML 页面。 HTML page rendered in browser tab
  3. 或者，您可以单击“Web 8080”选项卡以打开预览。 WebIDE Web 8080 tab preview
  4. 如果您的项目位于子目录下，您可以通过单击资源管理器中的子目录名称来访问它，然后它将自动预览该目录中的 index.html 文件。 WebIDE subdirectory preview
  5. 如果您的项目有多个 HTML 文件，包括 index.html，您可以将文件名附加到 URL 以直接预览它。例如，https://xxx.labex.io/another-file.html。 WebIDE multiple HTML files preview
  6. 您可以通过单击“在新标签页中打开”按钮在新标签页中打开预览。它将在新的浏览器标签页中打开预览。 WebIDE Open in New Tab
“Go Live”将自动：
  • 启动 Web 服务器
  • 在您修改代码时提供实时更新
提示：LabEx VM 在端口 8080 上托管预览。您可以与他人共享预览链接以展示您的工作。在您的 lab vm 停止后，预览链接将不再起作用。

​
使用场景

您的第一个 Java Lab

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

您的第一个 HTML Lab

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

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

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

​
常见问题解答

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