WebIDE 使用指南-CSDN博客

阿里云WebIDE是一个基于H5的多语言集成开发环境，类似VS Code网页版，提供文件树、代码编辑器、命令面板等功能。支持主机与工作空间管理，内置函数计算资源操作。具备自动保存、快捷键、主题切换等特性，适用于函数计算的开发、测试和部署，简化了学习和开发流程。

摘要由CSDN通过智能技术生成

背景

为了解决函数计算本地环境差异和配置繁琐的问题，在此背景下，就有了我们的 WebIDE 产品，WebIDE 能让函数的开发、测试和部署更加流畅，降低了函数计算的学习成本和缩短了函数的开发周期。

WebIDE 入口地址：https://ide.fc.aliyun.com

介绍

WebIDE 是一个基于 H5 支持多语言的集成开发环境。相当于 VS Code 的网页版。
功能特色：

文件树，支持拖拽移动、拖拽上传、打包下载、重命名、搜索、同名覆盖确认提醒和多选批量操作。
代码编辑器，集成 Monaco Editor，与 VS Code 同款编辑器
快捷键，与 VS Code 保持一致。
偏好设置，支持工作空间级别的偏好设置。
命令面板，通过快捷键 F1 ，唤出快捷打开功能搜索框，搜索想要的快捷功能
窗口管理，支持自由分窗和拖拽，并能保存布局。
Web Terminal，前端集成 XTerm.js，后端运行在 docker container 内部，随意安装软件，不会影响宿主机环境。预制 ubuntu 16.04 和 oh-my-zsh 开箱即用。
预制黑白两款主题。
可以将 Mac、Linux 和 windows (能支持安装 docker for windows) 系统主机注册成工作主机，所有数据都存储于用户所属的工作主机。
引入工作空间概念，支持多项目管理
内置函数计算创建向导，支持 fun 模板，内置了函数计算运行，调试和发布工具。

效果图：

初次使用流程

WebIDE 概览图

说明：WebIDE 上的每一个标签页，我们称之为视图窗口，也叫视图。

视图布局管理

视图相当于 WebIDE 上的标签页，例如：Files 视图、Hosts 视图和 Workspaces 视图等等。视图布局效果和 eclipse 的视图布局差不多。支持自由分窗和拖拽，刷新页面后，布局状态能还原到上一次的状态。如下图所示：

注意：当我们想还原到默认布局，可以通过快捷键 F1 打开命令面板，在命令面板中模糊搜索命令：Reset Workbench Layout，执行该命令即可。

命令面板

通过快捷键 F1 唤出命令面板，可以模糊搜索想要的命令，如下图所示：

菜单栏

菜单栏功能如下：

File 菜单，包含：创建文件、创建文件夹、创建函数、创建主机、创建工作空间、打开工作空间偏好设置、打开工作空间、切换 Regin、保存和关闭当前工作空间。
Edit 菜单，和代码编辑器相关，包含：撤销、重做、复制、粘贴、剪切、查找和替换。
Selection 菜单，和代码编辑器相关，各种代码选择操作。
View 菜单，包含所有视图状态的控制。通过 View 菜单，我们能够看到 WebIDE 拥有的所有视图，并打开或关闭视图。
Go 菜单，和代码编辑器相关，在曾经编辑过的位置跳转，跳转方式包括：前进（Forword）、后退（Back）和最后编辑的位置（Last Edit Location）。
Help 菜单。

文件树（Files）

文件树在 IDE 中是操作最频繁的视图，文件树与 VS Code 的文件树的操作大致相同。文件树主要功能：

新建文件。
新建文件夹。
复制，支持多选
粘贴，不支持右键菜单粘贴（浏览器限制），只能通过快捷键粘贴，支持同名覆盖确认。
下载，支持多选。
上传，支持将本地的一个文件夹拖拽到文件树区域上传。
移动，支持拖拽方式在文件树上任意移动，支持同名覆盖确认。
单击打开文件。
反向定位文件树上的文件，当选择编辑区的文件，文件树会同步选择该文件在文件树中的位置。
文件树搜索，选中文件树，让文件树获得焦点，直接输入字母，就可以对展开的树节点进行搜索。
文件树同步，树节点每次展开，都会同步当前节点下的子节点信息（只同步看得见的，也就是说展开过的），以确保用户看到的文件树的状态尽可能最新。大部分情况下，文件树会自动同步。比如，通过文件树的右键菜单，新增删除文件等。当您通过 Terminal 去创建文件时，文件树是无法感知的，需要您自己去重新展开该文件的父目录或者刷新页面。
文件树状态保持，当刷新页面时，文件树的状态将会是上一次展开和收起的状态，需要注意的是：文件树只会还原展开和收起的状态，文件树的信息数据将会是最新的。举一个例子，小明在 A 电脑上对文件树进行了增删改，小明通过 B 电脑打开 WebIDE 时，将会看到小明在 A 电脑上的变更情况，并且未变更的文件状态依然保持。所以请放心刷新页面。
键盘上下方向键移动选择。
文件打开方式，某些文件可能支持多种打开方式。