Web IDE · Gitlab 中文文檔

# Web IDE > 原文：[https://docs.gitlab.com/ee/user/project/web_ide/](https://docs.gitlab.com/ee/user/project/web_ide/) * [Open the Web IDE](#open-the-web-ide) * [File finder](#file-finder) * [Syntax highlighting](#syntax-highlighting) * [Themes](#themes) * [Configure the Web IDE](#configure-the-web-ide) * [Commit changes](#commit-changes) * [Reviewing changes](#reviewing-changes) * [View CI job logs](#view-ci-job-logs) * [Switching merge requests](#switching-merge-requests) * [Switching branches](#switching-branches) * [Markdown editing](#markdown-editing) * [Live Preview](#live-preview) * [Enabling Live Preview](#enabling-live-preview) * [Interactive Web Terminals for the Web IDE](#interactive-web-terminals-for-the-web-ide) * [Runner configuration](#runner-configuration) * [Web IDE configuration file](#web-ide-configuration-file) * [Running interactive terminals in the Web IDE](#running-interactive-terminals-in-the-web-ide) * [File syncing to web terminal](#file-syncing-to-web-terminal) * [Limitations](#limitations) * [Troubleshooting](#troubleshooting) # Web IDE[](#web-ide "Permalink") 版本歷史 * 在[GitLab Ultimate](https://about.gitlab.com/pricing/) 10.4 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/4539) . * 在 10.7 版中[移至](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/44157) GitLab Core. Web IDE 編輯器通過提供具有提交階段的高級編輯器，可以更快，更輕松地為項目貢獻更改. ## Open the Web IDE[](#open-the-web-ide "Permalink") 您可以從存儲庫文件列表和合并請求中查看文件時打開 Web IDE. [![Open Web IDE](https://img.kancloud.cn/00/9c/009c634457595b0f794ac6e61c0baf48_1950x706.png)](img/open_web_ide.png) ## File finder[](#file-finder "Permalink") [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/18323) in [GitLab Core](https://about.gitlab.com/pricing/) 10.8. 通過文件查找器，您可以通過搜索快速打開當前分支中的文件. 使用鍵盤快捷鍵`Command-p` ， `Control-p`或`t` （當編輯器不在焦點時）啟動文件查找器. 輸入文件名或文件路徑片段以開始查看結果. ## Syntax highlighting[](#syntax-highlighting "Permalink") 正如 IDE 所期望的那樣，Web IDE 中多種語言的語法突出顯示將使您的直接編輯更加容易. Web IDE 當前提供： * 基本語法著色，適用于各種編程，腳本和標記語言，例如 XML，PHP，C＃，C ++，Markdown，Java，VB，Batch，Python，Ruby 和 Objective-C. * 某些語言的 IntelliSense 和驗證支持（顯示錯誤和警告，提供智能補全，格式設置和概述）. 例如：TypeScript，JavaScript，CSS，LESS，SCSS，JSON 和 HTML. 因為 Web IDE 基于[Monaco Editor](https://microsoft.github.io/monaco-editor/) ，所以您可以在[Monaco 語言](https://github.com/Microsoft/monaco-languages)存儲庫中找到更完整的受支持語言列表. 在幕后，摩納哥使用[Monarch](https://microsoft.github.io/monaco-editor/monarch.html)庫來突出顯示語法. 如果您缺少對任何語言的語法突出顯示支持，我們準備了一份簡短指南，介紹如何[為缺少的語言語法突出顯示添加支持.](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/ide/lib/languages/README.md) **注意：**單個文件編輯基于[Ace 編輯器](https://ace.c9.io) . ### Themes[](#themes "Permalink") 版本歷史 * 在 13.0 版的 GitLab 中[引入](https://gitlab.com/groups/gitlab-org/-/epics/2389) . * GitLab 13.1 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/219228)了完全日光化黑暗主題. GitLab 支持的語法突出顯示的所有主題都添加到了 Web IDE 的代碼編輯器中. 您可以從個人[資料首選項中](../../profile/preferences.html)選擇一個主題. 主題僅在 Web IDE 文件編輯器中可用， [深色主題](https://gitlab.com/gitlab-org/gitlab/-/issues/209808)和[日光化深色主題](https://gitlab.com/gitlab-org/gitlab/-/issues/219228)除外，它們適用于整個 Web IDE 屏幕. | 日光燈主題 | 日曬黑暗主題 | 黑暗主題 | | --- | --- | --- | | [![Solarized Light Theme](https://img.kancloud.cn/65/dd/65dd5332c2baac3d21b8790f8d8bfaf8_3360x2100.png)](img/solarized_light_theme_v13_0.png) | [![Solarized Dark Theme](https://img.kancloud.cn/b8/9b/b89bed494f1f48ccbfc0d8f8e0dde074_2880x1596.png)](img/solarized_dark_theme_v13_1.png) | [![Dark Theme](https://img.kancloud.cn/59/ab/59abef4ca52d9db7c6661cee84268a9e_3360x2100.png)](img/dark_theme_v13_0.png) | ## Configure the Web IDE[](#configure-the-web-ide "Permalink") [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/23352) in [GitLab Core](https://about.gitlab.com/pricing/) 13.1. Web IDE 支持使用[`.editorconfig`文件](https://editorconfig.org/)配置某些編輯器設置. 打開文件時，Web IDE 將在當前目錄和所有父目錄中查找名為`.editorconfig`的文件. 如果找到配置文件并且其設置與文件的路徑匹配，則將在打開的文件上強制執行這些設置. Web IDE 當前支持以下`.editorconfig`設置： * `indent_style` * `indent_size` * `end_of_line` * `trim_trailing_whitespace` * `tab_width` * `insert_final_newline` ## Commit changes[](#commit-changes "Permalink") 版本歷史 * 在[GitLab Ultimate](https://about.gitlab.com/pricing/) 10.4 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/4539) . * 在 10.7 版中[移至](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/44157) GitLab Core. * 從[GitLab 12.7 開始](https://gitlab.com/gitlab-org/gitlab/-/issues/33441) ，將自動暫存文件. * 從[GitLab 12.9 開始](https://gitlab.com/gitlab-org/gitlab/-/issues/196609) ，刪除了對暫存文件的支持，以防止丟失未暫存的數據. 您當前的所有更改都必須提交或放棄. 進行更改后，單擊左下角的" **提交"**按鈕以查看已更改文件的列表. 完成更改后，可以添加提交消息，提交更改并直接創建合并請求. 如果您沒有對所選分支的寫訪問權，則會看到警告，但仍然可以創建新分支并啟動合并請求. 要放棄特定文件中的更改，請在"更改"選項卡中單擊該文件上的" **放棄更改"**按鈕. 要放棄所有更改，請單擊更改側欄右上角的垃圾桶圖標. [![Commit changes](https://img.kancloud.cn/8a/76/8a7603a952654775b314314dfcd7bee6_3506x1888.png)](img/commit_changes_v12_9.png) ## Reviewing changes[](#reviewing-changes "Permalink") 提交更改之前，可以通過切換到查看模式或從更改列表中選擇文件來將它們與上一次提交進行比較. 當您打開合并請求時，還可以使用其他查看模式，如果您提交更改，該模式將向您顯示合并請求 diff 的預覽. ## View CI job logs[](#view-ci-job-logs "Permalink") [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/19279) in [GitLab Core](https://about.gitlab.com/pricing/) 11.0. 您可以使用 Web IDE 通過在 Web IDE 中打開分支或合并請求并打開失敗作業的日志來快速修復失敗的測試. 通過單擊右上角的" **管道"**按鈕，可以訪問最新管道的所有作業的狀態以及當前提交的作業跟蹤. 管道狀態也始終顯示在左下方的狀態欄中. ## Switching merge requests[](#switching-merge-requests "Permalink") [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/19318) in [GitLab Core](https://about.gitlab.com/pricing/) 11.0. 要在創作的和分配的合并請求之間切換，請單擊側欄頂部的下拉列表以打開合并請求列表. 在切換到其他合并請求之前，您將需要提交或放棄所有更改. ## Switching branches[](#switching-branches "Permalink") [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/20850) in [GitLab Core](https://about.gitlab.com/pricing/) 11.2. To switch between branches of the current project repository, click the dropdown in the top of the sidebar to open a list of branches. You will need to commit or discard all your changes before switching to a different branch. ## Markdown editing[](#markdown-editing "Permalink") 版本歷史 * [GitLab Core](https://about.gitlab.com/pricing/) 10.7 中[引入](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/18059)了 Markdown 預覽. * 支持在[GitLab Core](https://about.gitlab.com/pricing/) 13.1 中[引入的](https://gitlab.com/gitlab-org/gitlab/-/issues/22822)粘貼圖像. 在 Web IDE 中編輯 Markdown 文件時，可以通過單擊文件編輯器上方的" **預覽 Markdown"**選項卡來預覽更改. Markdown 預覽支持[GitLab 風味 Markdown](../../markdown.html#gitlab-flavored-markdown-gfm) . 您還可以通過將任何本地圖像直接粘貼到 Markdown 文件中來上傳它們. 該圖像將上傳到同一目錄，默認情況下命名為`image.png` . 如果已經存在相同名稱的另一個文件，則將數字后綴自動添加到文件名. ## Live Preview[](#live-preview "Permalink") 版本歷史 * 在[GitLab Core](https://about.gitlab.com/pricing/) 11.2 中[引入](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/19764) . * 在 GitLab 13.0 中從*客戶端評估* [重命名](https://gitlab.com/gitlab-org/gitlab/-/issues/213853)為*實時預覽* . 您可以使用 Web IDE 在瀏覽器中預覽 JavaScript 項目. 此功能使用 CodeSandbox 編譯和捆綁用于預覽 Web 應用程序的 JavaScript. [![Web IDE Live Preview](https://img.kancloud.cn/07/5d/075d7c9a68f9bbaa85f97491f05eb824_2530x1398.png)](img/live_preview_v13_0.png) Additionally, for public projects an **在 CodeSandbox 中打開** button is available to transfer the contents of the project into a public CodeSandbox project to quickly share your project with others. ### Enabling Live Preview[](#enabling-live-preview "Permalink") 需要在 GitLab 實例管理員設置中啟用實時預覽功能. 在 GitLab.com 上為所有項目啟用了實時預覽 [![Admin Live Preview setting](https://img.kancloud.cn/2b/b0/2bb0c3d3ed7bbe81531b8cd3a98eb067_978x221.png)](img/admin_live_preview_v13_0.png) 完成此操作后，您可以使用`package.json`文件和 Web IDE 內的`main`入口點預覽項目. 下面顯示了一個示例`package.json` . ``` { "main": "index.js", "dependencies": { "vue": "latest" } } ``` ## Interactive Web Terminals for the Web IDE[](#interactive-web-terminals-for-the-web-ide "Permalink") 版本歷史 * 在[GitLab Ultimate](https://about.gitlab.com/pricing/) 11.6 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/5426) . * 在 13.1 版中[移至](https://gitlab.com/gitlab-org/gitlab/-/issues/211685) GitLab Core. **警告：** Web IDE 的交互式 Web 終端當前處于**Beta 中** . 共享運行程序[尚不支持交互式 Web 終端](https://gitlab.com/gitlab-org/gitlab/-/issues/24674) ，因此您需要使用自己的私有運行程序來使用此功能. [交互式 Web 終端](../../../ci/interactive_web_terminal/index.html)使項目[維護者](../../permissions.html#project-members-permissions)用戶可以直接從 GitLab（包括通過 Web IDE）訪問終端以與 Runner 進行交互. ### Runner configuration[](#runner-configuration "Permalink") 為了使交互式 Web 終端正常工作，需要在運行程序中配置一些內容： * 跑步者需要[正確配置`[session_server]`](https://docs.gitlab.com/runner/configuration/advanced-configuration.html) . 本部分至少需要一個`session_timeout`值（默認為 1800 秒）和一個`listen_address`值. 如果未定義`advertise_address` ，則使用`listen_address` . * 如果您對 GitLab 實例使用反向代理，則需要[啟用](../../../administration/integration/terminal.html#enabling-and-disabling-terminal-support) Web 終端. 如果您打開終端并且作業已完成其任務，則終端將在[`[session_server].session_timeout`](https://docs.gitlab.com/runner/configuration/advanced-configuration.html)配置的持續時間內阻止作業完成，直到關閉終端窗口. **注意：**并非所有執行程序都[受支持](https://docs.gitlab.com/runner/executors/) . [文件同步](#file-syncing-to-web-terminal)功能僅在 Kubernetes 運行程序上受支持. ### Web IDE configuration file[](#web-ide-configuration-file "Permalink") 為了啟用 Web IDE 終端，您需要在存儲庫根目錄內創建文件`.gitlab/.gitlab-webide.yml` . 該文件與[CI 配置文件的](../../../ci/yaml/README.html)語法非常相似，但有一些限制： * 無法定義全局塊（即： `before_script`或`after_script` ） * 只能將一個名為`terminal`作業添加到該文件中. * 僅允許使用關鍵字`image` ， `services` ， `tags` ， `before_script` ， `script`和`variables`來配置作業. * 要連接到交互式終端， `terminal`作業必須仍然處于活動狀態并且正在運行，否則終端將無法連接到作業的會話. 默認情況下， `script`關鍵字的值是`sleep 60`以防止作業結束并為 Web IDE 提供足夠的連接時間. 這意味著，如果您覆蓋默認`script`值，則必須添加一個使作業保持運行`sleep`的命令，例如`sleep` . 在下面的代碼中，有此配置文件的示例： ``` terminal: # This can be any image that has the necessary runtime environment for your project. image: node:10-alpine before_script: - apt-get update script: sleep 60 variables: RAILS_ENV: "test" NODE_ENV: "test" ``` 終端啟動后，將顯示控制臺，我們可以訪問項目存儲庫文件. **重要的** . 終端作業取決于分支. 這意味著用于觸發和配置終端的配置文件將是 Web IDE 所選分支中的配置文件. 如果分支中沒有配置文件，將顯示錯誤消息. ### Running interactive terminals in the Web IDE[](#running-interactive-terminals-in-the-web-ide "Permalink") 如果交互式終端可供當前用戶使用，則" **終端"**按鈕將顯示在 Web IDE 的右側欄中. 單擊此按鈕可以打開或關閉終端選項卡. 打開后，該選項卡將顯示" **啟動 Web 終端"**按鈕. 如果環境配置不正確，則可能禁用此按鈕. 如果是這樣，狀態消息將描述問題. 以下是可能會禁用" **啟動 Web 終端"的**一些原因： * `.gitlab/.gitlab-webide.yml`不存在或設置錯誤. * 該項目沒有活躍的私人跑步者. 如果處于活動狀態，則單擊" **啟動 Web 終端"**按鈕將加載終端視圖并開始連接到跑步者的終端. 任何時候都可以關閉并重新打開**終端**選項卡，并且不會影響終端的狀態. 當終端啟動并成功連接到跑步者時，跑步者的外殼提示將出現在終端中. 在這里，您可以輸入將在跑步者的環境中執行的命令. 這類似于在本地終端或通過 SSH 運行命令. 在終端運行時，可以通過單擊**Stop Terminal**停止它. 這將斷開終端并停止跑步者的終端工作. 在此處，單擊" **重新啟動終端"**以啟動新的終端會話. ### File syncing to web terminal[](#file-syncing-to-web-terminal "Permalink") 版本歷史 * 在[GitLab Ultimate](https://about.gitlab.com/pricing/) 12.0 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/5276) . * 在 13.1 版中[移至](https://gitlab.com/gitlab-org/gitlab/-/issues/211686) GitLab Core. Web IDE 中的文件更改可以同步到正在運行的 Web 終端. 這使用戶能夠在預配置的終端環境中測試其代碼更改. **注意：**僅將 Web IDE 中的文件更改同步到終端. 在終端中所做的更改**不會**同步到 Web IDE. 此功能僅適用于 Kubernetes Runners. 要使文件同步到 Web 終端， `.gitlab/.gitlab-webide.yml`文件需要配置`webide-file-sync`服務. 這是使用此服務的 Node JS 項目的示例配置： ``` terminal: # This can be any image that has the necessary runtime environment for your project. image: name: node:10-alpine services: - name: registry.gitlab.com/gitlab-org/webide-file-sync:latest alias: webide-file-sync entrypoint: ["/bin/sh"] command: ["-c", "sleep 5 && ./webide-file-sync -project-dir $CI_PROJECT_DIR"] ports: # The `webide-file-sync` executable defaults to port 3000. - number: 3000 ``` * 項目目錄可用**后** ，必須啟動`webide-file-sync`可執行文件. 這就是為什么我們需要在`command`添加`sleep 5`的原因. 有關更多信息，請參[見此問題](https://gitlab.com/gitlab-org/webide-file-sync/-/issues/7) . * `$CI_PROJECT_DIR`是 GitLab Runners 的[預定義環境變量](../../../ci/variables/predefined_variables.html) . 這是您項目的存儲庫所在的位置. 一旦將 Web 終端配置為用于文件同步，則在啟動 Web 終端后，狀態欄中將顯示**終端**狀態. [![Web IDE Client Side Evaluation](https://img.kancloud.cn/e1/58/e158754a2c83af4fc84f575b5807df72_262x91.png)](img/terminal_status.png) 在以下情況下，通過 Web IDE 對文件所做的更改將同步到正在運行的終端： * 編輯文件時，按`Ctrl` + `S` （在 Mac 上為`Cmd` + `S` ）. * 編輯文件后，將單擊文件編輯器之外的所有內容. * 創建，刪除或重命名文件或文件夾. ### Limitations[](#limitations "Permalink") 交互式終端處于 beta 階段，并將在以后的發行版中繼續進行改進. 同時，請注意，用戶一次只能擁有一個活動終端. ### Troubleshooting[](#troubleshooting "Permalink") * 如果終端的文本為灰色且無響應，則表明終端已停止，無法再使用. 停止的終端可以通過單擊**Restart Terminal 重新啟動** . * 如果終端顯示**Connection Failure** ，則終端無法連接到流道. 請嘗試停止并重新啟動終端. 如果問題仍然存在，請仔細檢查流道配置.