开发者社区> 木香丘> 正文

WebIDE 使用指南

简介: 背景 为了解决函数计算本地环境差异和配置繁琐的问题,在此背景下,就有了我们的 WebIDE 产品,WebIDE 能让函数的开发、测试和部署更加流畅,进一步降低了函数计算的学习成本和进一步缩短了函数的开发周期。
+关注继续查看

背景

为了解决函数计算本地环境差异和配置繁琐的问题,在此背景下,就有了我们的 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 模板,内置了函数计算运行,调试和发布工具。

效果图:

image

初次使用流程

image

WebIDE 概览图

image

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

视图布局管理

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

image

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

命令面板

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

image

菜单栏

菜单栏功能如下:

  • 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 文件,如下图:

image

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

image

还有很多其他的偏好设置,具体请查看:偏好设置详情

函数计算相关的资源

函数计算资源(FC Resources),包含本地资源(Local Resources)和远程资源(Remote Resources)相关操作。

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

image

命令行终端(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
    }
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Web环境使用相对路径发布Webservice
Web环境使用相对路径发布Webservice            通常我们的Webservice服务的发布地址都将是一个相对路径,在与Spring一起使用时我们需要引入Cxf配置Webservice的schema,如jaxws,用以定义对应的Webservice。
811 0
Web Worker 使用教程
JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。
3299 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
10720 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
20936 0
+关注
16
文章
0
问答
来源圈子
更多
专注 Serverless、微服务、函数计算、Serverless 应用引擎、云原生技术
+ 订阅
相关文档: Serverless应用引擎SAE 函数计算FC
文章排行榜
最热
最新