> ## Documentation Index
> Fetch the complete documentation index at: https://support.labex.io/llms.txt
> Use this file to discover all available pages before exploring further.

# LabEx VM WebIDE 界面

> LabEx WebIDE 提供了一个现代化的、类似 VS Code 的开发环境，用于编码任务。它基于 Ubuntu 22.04 构建，提供了一个熟悉的界面，用于编写、编译和运行多种编程语言的代码。

## WebIDE 预览

<img src="https://mintcdn.com/huhuhang/q4ekfuwM7mDVAiiH/images/webide.png?fit=max&auto=format&n=q4ekfuwM7mDVAiiH&q=85&s=da64f20fc4317410e337993b75c16904" alt="WebIDE Preview" width="960" height="640" data-path="images/webide.png" />

WebIDE 环境特别适用于：

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

## 环境布局

WebIDE 界面由几个关键组件组成：

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

## 终端访问

您可以通过两种方式打开终端：

1. 点击左下角的 <i className="fa-regular fa-circle-xmark" /> 图标，切换到终端选项卡；
   <img src="https://mintcdn.com/huhuhang/q4ekfuwM7mDVAiiH/images/screenshot-20241022-fOGlaC78@2x.png?fit=max&auto=format&n=q4ekfuwM7mDVAiiH&q=85&s=d39064241ec13475b8a5f07b9b5b6c0e" alt="Terminal Access" width="1860" height="806" data-path="images/screenshot-20241022-fOGlaC78@2x.png" />
2. 使用顶部菜单：终端 > 新建终端
   <img src="https://mintcdn.com/huhuhang/q4ekfuwM7mDVAiiH/images/screenshot-20241022-wyYSNaTb@2x.png?fit=max&auto=format&n=q4ekfuwM7mDVAiiH&q=85&s=891ad0b51501dc8941fe3c726f853a92" alt="Terminal Access" width="1204" height="584" data-path="images/screenshot-20241022-wyYSNaTb@2x.png" />

## 预览 HTML

要预览您的 HTML 文件：

1. 在 WebIDE 中，单击右下角的“Go Live”按钮。
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/461shots_so.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=d5a94c83ffb5faa003192de94eaed9c8" alt="Go Live button in WebIDE" width="1920" height="1080" data-path="images/461shots_so.png" />
2. 将打开一个新浏览器标签页，其中呈现您的 HTML 页面。
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/429shots_so.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=e49e551fb117a34bfb487062a3310348" alt="HTML page rendered in browser tab" width="1920" height="1080" data-path="images/429shots_so.png" />
3. 或者，您可以单击“Web 8080”选项卡以打开预览。
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/236shots_so.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=86e55e8dcc899fedd7bd3d130ce392b3" alt="WebIDE Web 8080 tab preview" width="1920" height="1080" data-path="images/236shots_so.png" />
4. 如果您的项目位于子目录下，您可以通过单击资源管理器中的子目录名称来访问它，然后它将自动预览该目录中的 `index.html` 文件。
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20250110-11-19-17-1N4fwHBz.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=ef3a2f7bbd795218b50d9b95086b1ed4" alt="WebIDE subdirectory preview" width="425" height="169" data-path="images/20250110-11-19-17-1N4fwHBz.png" />
5. 如果您的项目有多个 HTML 文件，包括 `index.html`，您可以将文件名附加到 URL 以直接预览它。例如，`https://xxx.labex.io/another-file.html`。
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20250113-09-42-31-4EbLwccE.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=07166edb93053840f14d3f73923e2d0e" alt="WebIDE multiple HTML files preview" width="851" height="311" data-path="images/20250113-09-42-31-4EbLwccE.png" />
6. 您可以通过单击“在新标签页中打开”按钮在新标签页中打开预览。它将在新的浏览器标签页中打开预览。
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20250113-09-48-45-BnqYObPj.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=7ba9545421a5bd671ec47a8989342134" alt="WebIDE Open in New Tab" width="872" height="191" data-path="images/20250113-09-48-45-BnqYObPj.png" />

“Go Live”将自动：

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

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

## 使用场景

<AccordionGroup>
  <Accordion title="Java 开发示例" icon="coffee">
    <Card title="您的第一个 Java Lab" icon="flask-conical" href="https://labex.io/labs/java-your-first-java-lab-411751">
      这是一个 Java 示例 lab，演示了如何使用 LabEx WebIDE 编写、编译和运行一个简单的
      Java 程序。
    </Card>

    在 WebIDE 中使用 Java 项目：

    <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20241016-13-50-50-DprQuVyZ.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=188bffef44632334239fd25e7710a872" alt="Java Development" width="1203" height="696" data-path="images/20241016-13-50-50-DprQuVyZ.png" />

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

    ```bash theme={null}
    javac MyClass.java
    java MyClass
    ```

    4. 实时查看编译错误和警告
  </Accordion>

  <Accordion title="Web 开发示例" icon="globe">
    <Card title="您的第一个 HTML Lab" icon="flask-conical" href="https://labex.io/labs/html-your-first-html-lab-92740">
      这是一个 HTML 示例 lab，演示了如何使用 LabEx WebIDE 创建一个简单的网页。
    </Card>

    对于前端开发任务：

    <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20240725-14-54-07-RbKQNn37@2x.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=d86a1ee42ec3fc28320706c8e2af29ad" alt="Go Live Button" width="2402" height="2020" data-path="images/20240725-14-54-07-RbKQNn37@2x.png" />

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

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

  <Accordion title="Python 开发示例" icon="code">
    <Card title="创建一个宇航员名牌处理器" icon="flask-conical" href="https://labex.io/labs/python-create-an-astronaut-name-tag-processor-393083">
      这是一个 Python 示例挑战，演示了如何使用 LabEx WebIDE 处理宇航员姓名。
    </Card>

    对于 Python 编程：

    <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20241008-16-18-06-HuMxDYQy.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=d88a4be0db03de93afc0ea7c2a0962bc" alt="Python Development" width="946" height="641" data-path="images/20241008-16-18-06-HuMxDYQy.png" />

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

    ```bash theme={null}
    python3 script.py
    ```

    4. 使用集成的调试器进行逐步执行
  </Accordion>
</AccordionGroup>

## 常见问题解答

<AccordionGroup>
  <Accordion title="如何访问我的 Web 应用程序？" icon="globe">
    LabEx VM 会自动部署您的 Web 项目：

    <img src="https://mintcdn.com/huhuhang/q4ekfuwM7mDVAiiH/images/screenshot-20241022-Sgt0GGyu@2x.png?fit=max&auto=format&n=q4ekfuwM7mDVAiiH&q=85&s=79d82dcc58719cf5b4b19530b488fcbe" alt="Web Preview" width="1287" height="379" data-path="images/screenshot-20241022-Sgt0GGyu@2x.png" />

    1. 默认端口 8080：
       * 单击 LabEx VM 顶部的“Web 8080”选项卡
       * 您的应用程序将通过公共 URL 访问

    2. 自定义端口：
       * 单击 + 按钮创建新的端口预览选项卡
       * 每个端口都有自己的公共 URL
       * 适用于运行多个服务（例如，前端和后端）

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

  <Accordion title="什么是必要的键盘快捷键？" icon="keyboard">
    WebIDE 中的常用快捷键：

    * **文件操作**
      * 新建文件：Ctrl+N
      * 保存：Ctrl+S
      * 查找：Ctrl+F
      * 替换：Ctrl+H

    * **面板控制**
      * 切换侧边栏：Ctrl+B
      * 切换终端：Ctrl+\`
      * 命令面板：Ctrl+Shift+P

    * **编辑器功能**
      * 多光标：Alt+ 单击
      * 选择所有出现：Ctrl+Shift+L
      * 格式化文档：Shift+Alt+F
  </Accordion>

  <Accordion title="我可以安装其他工具或软件包吗？" icon="wrench">
    是的，您可以使用 Ubuntu 包管理器安装其他工具：

    ```bash theme={null}
    sudo apt update
    sudo apt install package-name
    ```

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

    * Node.js/npm：

    ```bash theme={null}
    npm install package-name
    ```

    * Python/pip：

    ```bash theme={null}
    pip install package-name
    ```

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

  <Accordion title="如何处理文件上传和下载？" icon="upload">
    WebIDE 提供了几种管理文件的方法：

    1. **上传文件：**

       * 将文件拖放到资源管理器中
       * 在资源管理器中右键单击后使用上传/下载

           <img src="https://mintcdn.com/huhuhang/q4ekfuwM7mDVAiiH/images/screenshot-20241022-j7Pl3YZQ@2x.png?fit=max&auto=format&n=q4ekfuwM7mDVAiiH&q=85&s=ab2b59536671cb0184c1f57d3a981fec" alt="Upload Files" width="1412" height="1250" data-path="images/screenshot-20241022-j7Pl3YZQ@2x.png" />

    2. **下载文件：**
       * 在资源管理器中右键单击文件
       * 选择“下载”

    3. **复制/粘贴：**
       * 文本内容可以在您的本地计算机和 WebIDE 之间直接复制
       * 二进制文件应使用上传/下载功能

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