WebIDE 使用指南
摘要：
背景
為了解決函式計算本地環境差異和配置繁瑣的問題，在此背景下，就有了我們的 WebIDE 產品，WebIDE 能讓函式的開發、測試和部署更加流暢，進一步降低了函式計算的學習成本和進一步縮短了函式的開發週期。
介紹
WebIDE 是一個基於 H5 支援多語言的整...
背景
為了 解決 函式計算 本地環境差異和配置繁瑣的問題， 在此背景下，就有了我們的 WebIDE 產品，WebIDE 能讓函式的開發、測試和部署更加流暢，進一步降低了函式計算的學習成本和進一步縮短了函式的開發週期。
介紹
WebIDE 是一個基於 H5 支援多語言的整合開發環境。相當於 VS Code 的網頁版，對標 AWS C9。
功能特色：
- 檔案樹，支援拖拽移動、拖拽上傳、打包下載、重新命名、搜尋、同名覆蓋確認提醒和多選批量操作。
- 程式碼編輯器，整合 Monaco Editor，與 VS Code 同款編輯器
- 快捷鍵，與 VS Code 保持一致。
- 偏好設定，支援工作空間級別的偏好設定。
- 命令面板 ，通過快捷鍵
F1，喚出快捷開啟功能搜尋框，搜尋想要的快捷功能 - 視窗管理，支援自由分窗和拖拽，並能儲存佈局。
- Web Terminal，前端整合 XTerm.js，後端執行在 docker container 內部，隨意安裝軟體，不會影響宿主機環境。預製 ubuntu 16.04 和 oh-my-zsh 開箱即用。
- 預製黑白兩款主題。
- 可以將任意 Mac 和 Linux 系統主機註冊成工作主機，所有資料都儲存於使用者所屬的工作主機。
- 引入工作空間概念，支援多專案管理
- 內建函式計算建立嚮導，支援 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 start
工作空間管理
工作空間管理，包含了工作空間的增刪改查，工作空間管理功能位於 Workspaces 檢視中。
- 建立工作空間。
- 刪除工作空間。
- 重新命名工作空間。
- 雙擊開啟工作空間，在工作空間列表中，雙擊某個工作空間即可以開啟該工作空間。
- 工作空間狀態，其實就是主機狀態的對映，綠色表示當前工作空間所屬的主機狀態是線上狀態，否則不線上。
主機與工作空間關係
主機與工作空間的關係是一對多的關係，即一個主機可以包含多個工作空間，一個工作空間只能隸屬於一個主機。工作空間對映到主機上的一個資料夾。
偏好設定
點選選單欄 File -> Open Workspace Preferences，開啟工作空間級別的偏好設定，第一次開啟，會自動建立 ./ide/settings.json 檔案，如下圖：
繼續點選選單 File -> Auto Save，結果如下圖：
還有很多其他的偏好設定，具體請檢視：。
函式計算相關的資源
函式計算資源（FC Resources），包含本地資源（Local Resources）和遠端資源（Remote Resources）相關操作。
fun deloy
命令列終端（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
}
}