全部产品
云市场

使用手册

更新时间:2018-12-07 16:31:37

背景

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 模板,内置了函数计算运行,调试和发布工具。

效果图:

effect

初次使用流程

flow

WebIDE 概览图

overview

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

视图布局管理

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

layout

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

命令面板

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

command panel

菜单栏

菜单栏功能如下:

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

preference

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

preferences

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

函数计算相关的资源

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

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

fc resources

命令行终端(Terminal)

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

状态栏

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

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

小结

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

偏好设置详情

  1. {
  2. "navigator.autoReveal": {
  3. "type": "boolean",
  4. "description": "Selects file under editing in the navigator.",
  5. "default": true
  6. },
  7. "navigator.exclude": {
  8. "type": "object",
  9. "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\`.`,
  10. "default": {
  11. "**/.git": true
  12. }
  13. },
  14. "notification.timeout": {
  15. "type": "number",
  16. "description": "The time before auto-dismiss the notification.",
  17. "default": 5000 // time express in millisec. 0 means : Do not remove
  18. },
  19. "workspace.preserveWindow": {
  20. "description": "Enable opening workspaces in current window",
  21. "additionalProperties": {
  22. "type": "boolean"
  23. },
  24. "default": false
  25. },
  26. "output.maxChannelHistory": {
  27. "type": "number",
  28. "description": "The maximum number of entries in an output channel.",
  29. "default": 1000
  30. },
  31. "editor.tabSize": {
  32. "type": "number",
  33. "minimum": 1,
  34. "default": 4,
  35. "description": "Configure the tab size in the editor"
  36. },
  37. "editor.lineNumbers": {
  38. "enum": [
  39. "on",
  40. "off"
  41. ],
  42. "description": "Control the rendering of line numbers"
  43. },
  44. "editor.renderWhitespace": {
  45. "enum": [
  46. "none",
  47. "boundary",
  48. "all"
  49. ],
  50. "description": "Control the rendering of whitespaces in the editor"
  51. },
  52. "editor.autoSave": {
  53. "enum": [
  54. "on",
  55. "off"
  56. ],
  57. "default": "on",
  58. "description": "Configure whether the editor should be auto saved"
  59. },
  60. "editor.autoSaveDelay": {
  61. "type": "number",
  62. "default": 500,
  63. "description": "Configure the auto save delay in milliseconds"
  64. },
  65. "editor.rulers": {
  66. "type": "array",
  67. "default": [],
  68. "description": "Render vertical lines at the specified columns."
  69. },
  70. "editor.wordSeparators": {
  71. "type": "string",
  72. "default": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/",
  73. "description": "A string containing the word separators used when doing word navigation."
  74. },
  75. "editor.glyphMargin": {
  76. "type": "boolean",
  77. "default": false,
  78. "description": "Enable the rendering of the glyph margin."
  79. },
  80. "editor.roundedSelection": {
  81. "type": "boolean",
  82. "default": true,
  83. "description": "Render the editor selection with rounded borders."
  84. },
  85. "editor.minimap.enabled": {
  86. "type": "boolean",
  87. "default": true,
  88. "description": "Enable or disable the minimap"
  89. },
  90. "editor.minimap.showSlider": {
  91. "type": "string",
  92. "default": "mouseover",
  93. "description": "Controls whether the minimap slider is automatically hidden. Possible values are 'always' and 'mouseover'"
  94. },
  95. "editor.minimap.renderCharacters": {
  96. "type": "boolean",
  97. "default": true,
  98. "description": "Render the actual characters on a line (as opposed to color blocks)"
  99. },
  100. "editor.minimap.maxColumn": {
  101. "type": "number",
  102. "default": 120,
  103. "description": "Limit the width of the minimap to render at most a certain number of columns"
  104. },
  105. "editor.overviewRulerLanes": {
  106. "type": "number",
  107. "default": 2,
  108. "description": "The number of vertical lanes the overview ruler should render."
  109. },
  110. "editor.overviewRulerBorder": {
  111. "type": "boolean",
  112. "default": true,
  113. "description": "Controls if a border should be drawn around the overview ruler."
  114. },
  115. "editor.cursorBlinking": {
  116. "type": "string",
  117. "default": "blink",
  118. "description": "Control the cursor animation style, possible values are 'blink', 'smooth', 'phase', 'expand' and 'solid'."
  119. },
  120. "editor.mouseWheelZoom": {
  121. "type": "boolean",
  122. "default": false,
  123. "description": "Zoom the font in the editor when using the mouse wheel in combination with holding Ctrl."
  124. },
  125. "editor.cursorStyle": {
  126. "type": "string",
  127. "default": "line",
  128. "description": "Control the cursor style, either 'block' or 'line'."
  129. },
  130. "editor.fontLigatures": {
  131. "type": "boolean",
  132. "default": false,
  133. "description": "Enable font ligatures."
  134. },
  135. "editor.hideCursorInOverviewRuler": {
  136. "type": "boolean",
  137. "default": false,
  138. "description": "Should the cursor be hidden in the overview ruler."
  139. },
  140. "editor.scrollBeyondLastLine": {
  141. "type": "boolean",
  142. "default": true,
  143. "description": "Enable that scrolling can go one screen size after the last line."
  144. },
  145. "editor.wordWrap": {
  146. "enum": ['off', 'on', 'wordWrapColumn', 'bounded'
  147. ],
  148. "default": "off",
  149. "description": "Control the wrapping of the editor."
  150. },
  151. "editor.wordWrapColumn": {
  152. "type": "number",
  153. "default": 80,
  154. "description": "Control the wrapping of the editor."
  155. },
  156. "editor.wrappingIndent": {
  157. "enum": ['none', 'same', 'indent'
  158. ],
  159. "default": "same",
  160. "description": "Control indentation of wrapped lines. Can be: 'none', 'same' or 'indent'."
  161. },
  162. "editor.links": {
  163. "type": "boolean",
  164. "default": true,
  165. "description": "Enable detecting links and making them clickable."
  166. },
  167. "editor.mouseWheelScrollSensitivity": {
  168. "type": "number",
  169. "default": 1,
  170. "description": "A multiplier to be used on the `deltaX` and `deltaY` of mouse wheel scroll events."
  171. },
  172. "editor.multiCursorModifier": {
  173. "enum": ['ctrlCmd', 'alt'
  174. ],
  175. "default": "alt",
  176. "description": "The modifier to be used to add multiple cursors with the mouse."
  177. },
  178. "editor.accessibilitySupport": {
  179. "enum": ['auto', 'off', 'on'
  180. ],
  181. "default": "auto",
  182. "description": "Configure the editor's accessibility support."
  183. },
  184. "editor.quickSuggestions": {
  185. "type": "boolean",
  186. "default": true,
  187. "description": "Enable quick suggestions (shadow suggestions)"
  188. },
  189. "editor.quickSuggestionsDelay": {
  190. "type": "number",
  191. "default": 500,
  192. "description": "Quick suggestions show delay (in ms)"
  193. },
  194. "editor.parameterHints": {
  195. "type": "boolean",
  196. "default": true,
  197. "description": "Enables parameter hints"
  198. },
  199. "editor.autoClosingBrackets": {
  200. "type": "boolean",
  201. "default": true,
  202. "description": "Enable auto closing brackets."
  203. },
  204. "editor.autoIndent": {
  205. "type": "boolean",
  206. "default": false,
  207. "description": "Enable auto indentation adjustment."
  208. },
  209. "editor.formatOnType": {
  210. "type": "boolean",
  211. "default": false,
  212. "description": "Enable format on type."
  213. },
  214. "editor.formatOnPaste": {
  215. "type": "boolean",
  216. "default": false,
  217. "description": "Enable format on paste."
  218. },
  219. "editor.dragAndDrop": {
  220. "type": "boolean",
  221. "default": false,
  222. "description": "Controls if the editor should allow to move selections via drag and drop."
  223. },
  224. "editor.suggestOnTriggerCharacters": {
  225. "type": "boolean",
  226. "default": true,
  227. "description": "Enable the suggestion box to pop-up on trigger characters."
  228. },
  229. "editor.acceptSuggestionOnEnter": {
  230. "enum": ['on', 'smart', 'off'
  231. ],
  232. "default": "on",
  233. "description": "Accept suggestions on ENTER."
  234. },
  235. "editor.acceptSuggestionOnCommitCharacter": {
  236. "type": "boolean",
  237. "default": true,
  238. "description": "Accept suggestions on provider defined characters."
  239. },
  240. "editor.snippetSuggestions": {
  241. "enum": ['top', 'bottom', 'inline', 'none'
  242. ],
  243. "default": "inline",
  244. "description": "Enable snippet suggestions."
  245. },
  246. "editor.emptySelectionClipboard": {
  247. "type": "boolean",
  248. "description": "Copying without a selection copies the current line."
  249. },
  250. "editor.wordBasedSuggestions": {
  251. "type": "boolean",
  252. "default": true,
  253. "description": "Enable word based suggestions. Defaults to 'true'"
  254. },
  255. "editor.selectionHighlight": {
  256. "type": "boolean",
  257. "default": true,
  258. "description": "Enable selection highlight."
  259. },
  260. "editor.occurrencesHighlight": {
  261. "type": "boolean",
  262. "default": true,
  263. "description": "Enable semantic occurrences highlight."
  264. },
  265. "editor.codeLens": {
  266. "type": "boolean",
  267. "default": true,
  268. "description": "Show code lens"
  269. },
  270. "editor.folding": {
  271. "type": "boolean",
  272. "default": true,
  273. "description": "Enable code folding"
  274. },
  275. "editor.showFoldingControls": {
  276. "enum": ['always', 'mouseover'
  277. ],
  278. "default": "mouseover",
  279. "description": "Controls whether the fold actions in the gutter stay always visible or hide unless the mouse is over the gutter."
  280. },
  281. "editor.matchBrackets": {
  282. "type": "boolean",
  283. "default": true,
  284. "description": "Enable highlighting of matching brackets."
  285. },
  286. "editor.renderControlCharacters": {
  287. "type": "boolean",
  288. "default": false,
  289. "description": "Enable rendering of control characters."
  290. },
  291. "editor.renderIndentGuides": {
  292. "type": "boolean",
  293. "default": true,
  294. "description": "Enable rendering of indent guides."
  295. },
  296. "editor.renderLineHighlight": {
  297. "enum": ['none', 'gutter', 'line', 'all'
  298. ],
  299. "default": "line",
  300. "description": "Enable rendering of current line highlight."
  301. },
  302. "editor.useTabStops": {
  303. "type": "boolean",
  304. "description": "Inserting and deleting whitespace follows tab stops."
  305. },
  306. "editor.insertSpaces": {
  307. "type": "boolean",
  308. "default": true,
  309. "description": "Using whitespaces to replace tabs when tabbing."
  310. },
  311. "diffEditor.renderSideBySide": {
  312. "type": "boolean",
  313. "description": "Render the differences in two side-by-side editors.",
  314. "default": true
  315. },
  316. "diffEditor.ignoreTrimWhitespace": {
  317. "type": "boolean",
  318. "description": "Compute the diff by ignoring leading/trailing whitespace.",
  319. "default": true
  320. },
  321. "diffEditor.renderIndicators": {
  322. "type": "boolean",
  323. "description": "Render +/- indicators for added/deleted changes.",
  324. "default": true
  325. },
  326. "diffEditor.followsCaret": {
  327. "type": "boolean",
  328. "description": "Resets the navigator state when the user selects something in the editor.",
  329. "default": true
  330. },
  331. "diffEditor.ignoreCharChanges": {
  332. "type": "boolean",
  333. "description": "Jump from line to line.",
  334. "default": true
  335. },
  336. "diffEditor.alwaysRevealFirst": {
  337. "type": "boolean",
  338. "description": "Reveal first change.",
  339. "default": true
  340. }
  341. }