背景

为了解决函数计算本地环境差异和配置繁琐的问题，在此背景下，就有了我们的 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 电脑上的变更情况，并且未变更的文件状态依然保持。所以请放心刷新页面。
• 键盘上下方向键移动选择。
• 文件打开方式，某些文件可能支持多种打开方式。

编辑区

编辑区是对文件或其他（如：运行器）进行编辑的区域，该区域通过标签页的形式展现，可以同时对个文件进行编辑。其中，代码编辑器，集成 Monaco Editor，与 VS Code 同款编辑器。编辑区主要功能：

• 状态保持，打开的文件，刷新页面后，依然打开。
• 右键标签页的标题，弹出一个悬浮菜单，包括以下功能：关闭当前标签页、关闭其他标签页、关闭右侧标签页、关闭所有标签页和反向定位文件树（非文件的编辑不支持）
• 代码编辑器，集成 Monaco Editor，菜单栏中的 Edit 和 Selection 菜单用来操作代码编辑器的。
• 自动保存，默认情况，当您修改代码后，编辑器会自动保存。如果想手动保存，可以参考：偏好设置

主机管理

主机管理，包含主机的增删改查，主机管理功能位于 Hosts 视图中。

• 创建主机，本质是在某一台机器上安装 ide-agent。所以创建主机操作会弹出一个包含安装 ide-agent 命令的对话框，复制该安装命令，在用户机器上运行该命令即可，创建成功后，通过 ide start 命令启动 Agent 服务。
• 删除主机，当主机下面没有创建过工作空间时，直接删除主机信息，否则会弹出强制删除确认对话框，当用户确认强制删除主机信息后，后台会将主机以及主机下面的工作空间信息一并删除。
• 重命名主机。
• 主机状态，绿色表示主机是在线状态，否则不在线。

工作空间管理

工作空间管理，包含了工作空间的增删改查，工作空间管理功能位于 Workspaces 视图中。

• 创建工作空间。
• 删除工作空间。
• 重命名工作空间。
• 双击打开工作空间，在工作空间列表中，双击某个工作空间即可以打开该工作空间。
• 工作空间状态，其实就是主机状态的映射，绿色表示当前工作空间所属的主机状态是在线状态，否则不在线。

主机与工作空间关系

主机与工作空间的关系是一对多的关系，即一个主机可以包含多个工作空间，一个工作空间只能隶属于一个主机。工作空间映射到主机上的一个文件夹。

偏好设置

点击菜单栏 File -> Open Workspace Preferences，打开工作空间级别的偏好设置，第一次打开，会自动创建 ./ide/settings.json 文件，如下图：

继续点击菜单 File -> Auto Save，结果如下图：

还有很多其他的偏好设置，具体请查看：偏好设置详情。

函数计算相关的资源

函数计算资源（FC Resources），包含本地资源（Local Resources）和远程资源（Remote Resources）相关操作。

• 创建函数，填写函数元数据后，会根据预置的模板生成函数代码，同时会创建或者更新 template.yml 文件，在本地资源（Local Resources）节点下面就能看到该函数。该函数称为本地函数。
• 本地资源（Local Resources），本地资源就是工作空间根下面的 template.yml 的可视化展现，当您修改 template.yml 文件后，本地资源会同步更新。
• 部署函数，在 Terminal 中运行 fun deloy 可以将本地函数部署到远程函数计算服务中。
• 远程资源，包含的是已经部署到远程函数计算服务中的资源。
• 运行本地函数，本地函数运行和调试后期会支持。
• 运行远程函数，点击运行图标，将打开一个运行器，运行器包括：测试负载和执行结果。点击 “Run” 按钮，即可运行。
• 双击本地函数可以直接打开函数的入口文件（右键菜单也可以）。
• 直接定位编辑 template.yml 文件（右键菜单也可以）。

命令行终端（Terminal）

当打开某一个工作空间后，就可以新建一个命令行终端视图。命令行终端的工作目录初始值为当前工作空间的根目录，oh-my-zsh 开箱即用。后端运行在当前主机上的 docker container 中，如果当前主机是本地机器，也就是说运行在您本地机器的某个 docker container 之中。

状态栏

状态栏分为左侧区域和右侧区域，状态栏包含来自 WebIDE 的各种状态，状态的形式：文字、图标、文字加图标和颜色。状态按照是否可操作来分，又分为：可操作的（展现的同时关联相关操作）和不可操作的（只展现状态）。

• 主题切换，是一个可操作的图标类型状态。点击图标，弹出主题列表让您选择。
• 状态栏为紫色，表示当前尚未打开任何一个工作空间。
• 状态栏为蓝色，表示打开了一个工作空间，工作空间下的 WebIDE 状态一切正常。
• 状态栏为红色，表示有错误已经发生。
• 其他颜色待定。

小结

本文将 WebIDE 主要功能以先总后分的方式讲解，先让读者有一个大概的了解，然后在分解各个功能。大部分读者都用过其他的 IDE，本文中很多功能一看就能理解。其中，主机、工作空间和函数计算相关的概念可能是第一次接触，可以着重了解一下。函数计算相关的概念，我并没有做过多解释，想要了解更多，可以参考：函数计算文档。

偏好设置详情

{
    "navigator.autoReveal": {
        "type": "boolean",
        "description": "Selects file under editing in the navigator.",
        "default": true
    },
    "navigator.exclude": {
        "type": "object",
        "description": `Configure glob patterns for excluding files and folders from the navigator. A resource that matches any of the enabled patterns, will be filtered out from the navigator. For more details about the exclusion patterns, see: \`man 5 gitignore\`.`,
        "default": {
            "**/.git": true
        }
    },
    "notification.timeout": {
        "type": "number",
        "description": "The time before auto-dismiss the notification.",
        "default": 5000 // time express in millisec. 0 means : Do not remove
    },
    "workspace.preserveWindow": {
        "description": "Enable opening workspaces in current window",
        "additionalProperties": {
            "type": "boolean"
        },
        "default": false
    },
    "output.maxChannelHistory": {
        "type": "number",
        "description": "The maximum number of entries in an output channel.",
        "default": 1000
    },
    "editor.tabSize": {
        "type": "number",
        "minimum": 1,
        "default": 4,
        "description": "Configure the tab size in the editor"
    },
    "editor.lineNumbers": {
        "enum": [
            "on",
            "off"
        ],
        "description": "Control the rendering of line numbers"
    },
    "editor.renderWhitespace": {
        "enum": [
            "none",
            "boundary",
            "all"
        ],
        "description": "Control the rendering of whitespaces in the editor"
    },
    "editor.autoSave": {
        "enum": [
            "on",
            "off"
        ],
        "default": "on",
        "description": "Configure whether the editor should be auto saved"
    },
    "editor.autoSaveDelay": {
        "type": "number",
        "default": 500,
        "description": "Configure the auto save delay in milliseconds"
    },
    "editor.rulers": {
        "type": "array",
        "default": [],
        "description": "Render vertical lines at the specified columns."
    },
    "editor.wordSeparators": {
        "type": "string",
        "default": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/",
        "description": "A string containing the word separators used when doing word navigation."
    },
    "editor.glyphMargin": {
        "type": "boolean",
        "default": false,
        "description": "Enable the rendering of the glyph margin."
    },
    "editor.roundedSelection": {
        "type": "boolean",
        "default": true,
        "description": "Render the editor selection with rounded borders."
    },
    "editor.minimap.enabled": {
        "type": "boolean",
        "default": true,
        "description": "Enable or disable the minimap"
    },
    "editor.minimap.showSlider": {
        "type": "string",
        "default": "mouseover",
        "description": "Controls whether the minimap slider is automatically hidden. Possible values are 'always' and 'mouseover'"
    },
    "editor.minimap.renderCharacters": {
        "type": "boolean",
        "default": true,
        "description": "Render the actual characters on a line (as opposed to color blocks)"
    },
    "editor.minimap.maxColumn": {
        "type": "number",
        "default": 120,
        "description": "Limit the width of the minimap to render at most a certain number of columns"
    },
    "editor.overviewRulerLanes": {
        "type": "number",
        "default": 2,
        "description": "The number of vertical lanes the overview ruler should render."
    },
    "editor.overviewRulerBorder": {
        "type": "boolean",
        "default": true,
        "description": "Controls if a border should be drawn around the overview ruler."
    },
    "editor.cursorBlinking": {
        "type": "string",
        "default": "blink",
        "description": "Control the cursor animation style, possible values are 'blink', 'smooth', 'phase', 'expand' and 'solid'."
    },
    "editor.mouseWheelZoom": {
        "type": "boolean",
        "default": false,
        "description": "Zoom the font in the editor when using the mouse wheel in combination with holding Ctrl."
    },
    "editor.cursorStyle": {
        "type": "string",
        "default": "line",
        "description": "Control the cursor style, either 'block' or 'line'."
    },
    "editor.fontLigatures": {
        "type": "boolean",
        "default": false,
        "description": "Enable font ligatures."
    },
    "editor.hideCursorInOverviewRuler": {
        "type": "boolean",
        "default": false,
        "description": "Should the cursor be hidden in the overview ruler."
    },
    "editor.scrollBeyondLastLine": {
        "type": "boolean",
        "default": true,
        "description": "Enable that scrolling can go one screen size after the last line."
    },
    "editor.wordWrap": {
        "enum": ['off', 'on', 'wordWrapColumn', 'bounded'
        ],
        "default": "off",
        "description": "Control the wrapping of the editor."
    },
    "editor.wordWrapColumn": {
        "type": "number",
        "default": 80,
        "description": "Control the wrapping of the editor."
    },
    "editor.wrappingIndent": {
        "enum": ['none', 'same', 'indent'
        ],
        "default": "same",
        "description": "Control indentation of wrapped lines. Can be: 'none', 'same' or 'indent'."
    },
    "editor.links": {
        "type": "boolean",
        "default": true,
        "description": "Enable detecting links and making them clickable."
    },
    "editor.mouseWheelScrollSensitivity": {
        "type": "number",
        "default": 1,
        "description": "A multiplier to be used on the `deltaX` and `deltaY` of mouse wheel scroll events."
    },
    "editor.multiCursorModifier": {
        "enum": ['ctrlCmd', 'alt'
        ],
        "default": "alt",
        "description": "The modifier to be used to add multiple cursors with the mouse."
    },
    "editor.accessibilitySupport": {
        "enum": ['auto', 'off', 'on'
        ],
        "default": "auto",
        "description": "Configure the editor's accessibility support."
    },
    "editor.quickSuggestions": {
        "type": "boolean",
        "default": true,
        "description": "Enable quick suggestions (shadow suggestions)"
    },
    "editor.quickSuggestionsDelay": {
        "type": "number",
        "default": 500,
        "description": "Quick suggestions show delay (in ms)"
    },
    "editor.parameterHints": {
        "type": "boolean",
        "default": true,
        "description": "Enables parameter hints"
    },
    "editor.autoClosingBrackets": {
        "type": "boolean",
        "default": true,
        "description": "Enable auto closing brackets."
    },
    "editor.autoIndent": {
        "type": "boolean",
        "default": false,
        "description": "Enable auto indentation adjustment."
    },
    "editor.formatOnType": {
        "type": "boolean",
        "default": false,
        "description": "Enable format on type."
    },
    "editor.formatOnPaste": {
        "type": "boolean",
        "default": false,
        "description": "Enable format on paste."
    },
    "editor.dragAndDrop": {
        "type": "boolean",
        "default": false,
        "description": "Controls if the editor should allow to move selections via drag and drop."
    },
    "editor.suggestOnTriggerCharacters": {
        "type": "boolean",
        "default": true,
        "description": "Enable the suggestion box to pop-up on trigger characters."
    },
    "editor.acceptSuggestionOnEnter": {
        "enum": ['on', 'smart', 'off'
        ],
        "default": "on",
        "description": "Accept suggestions on ENTER."
    },
    "editor.acceptSuggestionOnCommitCharacter": {
        "type": "boolean",
        "default": true,
        "description": "Accept suggestions on provider defined characters."
    },
    "editor.snippetSuggestions": {
        "enum": ['top', 'bottom', 'inline', 'none'
        ],
        "default": "inline",
        "description": "Enable snippet suggestions."
    },
    "editor.emptySelectionClipboard": {
        "type": "boolean",
        "description": "Copying without a selection copies the current line."
    },
    "editor.wordBasedSuggestions": {
        "type": "boolean",
        "default": true,
        "description": "Enable word based suggestions. Defaults to 'true'"
    },
    "editor.selectionHighlight": {
        "type": "boolean",
        "default": true,
        "description": "Enable selection highlight."
    },
    "editor.occurrencesHighlight": {
        "type": "boolean",
        "default": true,
        "description": "Enable semantic occurrences highlight."
    },
    "editor.codeLens": {
        "type": "boolean",
        "default": true,
        "description": "Show code lens"
    },
    "editor.folding": {
        "type": "boolean",
        "default": true,
        "description": "Enable code folding"
    },
    "editor.showFoldingControls": {
        "enum": ['always', 'mouseover'
        ],
        "default": "mouseover",
        "description": "Controls whether the fold actions in the gutter stay always visible or hide unless the mouse is over the gutter."
    },
    "editor.matchBrackets": {
        "type": "boolean",
        "default": true,
        "description": "Enable highlighting of matching brackets."
    },
    "editor.renderControlCharacters": {
        "type": "boolean",
        "default": false,
        "description": "Enable rendering of control characters."
    },
    "editor.renderIndentGuides": {
        "type": "boolean",
        "default": true,
        "description": "Enable rendering of indent guides."
    },
    "editor.renderLineHighlight": {
        "enum": ['none', 'gutter', 'line', 'all'
        ],
        "default": "line",
        "description": "Enable rendering of current line highlight."
    },
    "editor.useTabStops": {
        "type": "boolean",
        "description": "Inserting and deleting whitespace follows tab stops."
    },
    "editor.insertSpaces": {
        "type": "boolean",
        "default": true,
        "description": "Using whitespaces to replace tabs when tabbing."
    },
    "diffEditor.renderSideBySide": {
        "type": "boolean",
        "description": "Render the differences in two side-by-side editors.",
        "default": true
    },
    "diffEditor.ignoreTrimWhitespace": {
        "type": "boolean",
        "description": "Compute the diff by ignoring leading/trailing whitespace.",
        "default": true
    },
    "diffEditor.renderIndicators": {
        "type": "boolean",
        "description": "Render +/- indicators for added/deleted changes.",
        "default": true
    },
    "diffEditor.followsCaret": {
        "type": "boolean",
        "description": "Resets the navigator state when the user selects something in the editor.",
        "default": true
    },
    "diffEditor.ignoreCharChanges": {
        "type": "boolean",
        "description": "Jump from line to line.",
        "default": true
    },
    "diffEditor.alwaysRevealFirst": {
        "type": "boolean",
        "description": "Reveal first change.",
        "default": true
    }
}