LabEx VM WebIDE 界面
LabEx WebIDE 提供了一个现代化的、类似 VS Code 的开发环境,用于编码任务。它基于 Ubuntu 22.04 构建,提供了一个熟悉的界面,用于编写、编译和运行多种编程语言的代码。
WebIDE 预览
WebIDE 环境特别适用于:
- 用各种编程语言(Java、JavaScript、Python 等)编写和调试代码
- 具有实时预览功能的 Web 开发项目,请参阅 在 WebIDE 中创建您的第一个 HTML 页面
- 通过直观的界面管理项目文件和目录
- 用于命令行任务的集成终端操作
环境布局
WebIDE 界面由几个关键组件组成:
- 左侧边栏:
- 用于项目导航的文件资源管理器
- 搜索功能
- 用于 Git 操作的源代码管理
- 扩展面板
- 编辑器区域:主要编码工作区
- 底部面板:终端、问题和输出
- 状态栏:快速访问设置和实时预览
- 顶部菜单栏:文件、编辑、查看和其他选项
终端访问
您可以通过两种方式打开终端:
- 点击左下角的 图标,切换到终端选项卡;
- 使用顶部菜单:终端 > 新建终端
预览 HTML
要预览您的 HTML 文件:
- 在 WebIDE 中,单击右下角的“Go Live”按钮。
- 将打开一个新浏览器标签页,其中呈现您的 HTML 页面。
- 或者,您可以单击“Web 8080”选项卡以打开预览。
- 如果您的项目位于子目录下,您可以通过单击资源管理器中的子目录名称来访问它,然后它将自动预览该目录中的
index.html
文件。 - 如果您的项目有多个 HTML 文件,包括
index.html
,您可以将文件名附加到 URL 以直接预览它。例如,https://xxx.labex.io/another-file.html
。 - 您可以通过单击“在新标签页中打开”按钮在新标签页中打开预览。它将在新的浏览器标签页中打开预览。
“Go Live”将自动:
- 启动 Web 服务器
- 在您修改代码时提供实时更新
提示:LabEx VM 在端口 8080 上托管预览。您可以与他人共享预览链接以展示您的工作。在您的 lab vm 停止后,预览链接将不再起作用。
使用场景
Java 开发示例
Java 开发示例
您的第一个 Java Lab
这是一个 Java 示例 lab,演示了如何使用 LabEx WebIDE 编写、编译和运行一个简单的 Java 程序。
在 WebIDE 中使用 Java 项目:
- 通过资源管理器创建一个新的 Java 文件
- 使用语法高亮显示编写您的 Java 代码
- 在终端中编译和运行:
- 实时查看编译错误和警告
Web 开发示例
Web 开发示例
您的第一个 HTML Lab
这是一个 HTML 示例 lab,演示了如何使用 LabEx WebIDE 创建一个简单的网页。
对于前端开发任务:
- 创建 HTML、CSS 和 JavaScript 文件
- 单击右下角的“Go Live”按钮
- 通过以下方式访问您的网页:
- LabEx VM 顶部的 Web 8080 选项卡
- 使用 + 按钮创建新的端口预览选项卡
注意:您的项目会自动部署到 LabEx 服务器上的公共 URL,使其可以通过 Web 选项卡访问。
Python 开发示例
Python 开发示例
创建一个宇航员名牌处理器
这是一个 Python 示例挑战,演示了如何使用 LabEx WebIDE 处理宇航员姓名。
对于 Python 编程:
- 在资源管理器中创建一个 Python 文件
- 编写您的 Python 代码,包括:
- 语法高亮显示
- 代码补全
- 错误检测
- 在终端中运行您的脚本:
- 使用集成的调试器进行逐步执行
常见问题解答
如何访问我的 Web 应用程序?
如何访问我的 Web 应用程序?
LabEx VM 会自动部署您的 Web 项目:
-
默认端口 8080:
- 单击 LabEx VM 顶部的“Web 8080”选项卡
- 您的应用程序将通过公共 URL 访问
-
自定义端口:
- 单击 + 按钮创建新的端口预览选项卡
- 每个端口都有自己的公共 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 提供了几种管理文件的方法:
-
上传文件:
- 将文件拖放到资源管理器中
- 在资源管理器中右键单击后使用上传/下载
-
下载文件:
- 在资源管理器中右键单击文件
- 选择“下载”
-
复制/粘贴:
- 文本内容可以在您的本地计算机和 WebIDE 之间直接复制
- 二进制文件应使用上传/下载功能
请记住,所有文件都是临时的,将在您的会话结束时丢失。