在 Firebase Studio 中試用 Gemini

Gemini 內Firebase Studio提供 AI 輔助功能,可簡化您的程式碼編寫工作流程,包括在程式碼編輯器中內嵌使用,以及透過對話使用。Gemini 可建議程式碼、生成程式碼、說明程式碼概念、更新專案檔案、執行終端機指令,以及解讀指令輸出內容。

你無須設定,即可立即使用 Gemini:

請注意,系統預設會啟用行內程式碼完成和程式碼集索引功能。瞭解如何調整設定。

Gemini 僅適用於Code檢視畫面。您可以在 Firebase Studio 中啟動應用程式、將應用程式匯入 Firebase Studio,以及使用 App Prototyping agent 建構的應用程式。

與Gemini進行即時通訊

Firebase Studio 透過 AI 輔助的即時通訊功能,簡化開發工作流程。

開始使用即時通訊

  1. 在 Firebase Studio 中開啟或建立工作區。

  2. 按一下工作區底部的「spark」Gemini。

  3. 開始與 Gemini 對話。

  4. (選用) 點選「附加」圖示 附加圖示,然後選取下列其中一個選項,即可將多模態提示傳送至 Gemini:

    • 繪圖:使用繪圖工具設計所需圖案,然後輸入提示並點選「傳送」。
    • 圖片:上傳圖片、新增提示,然後按一下「傳送」。
    • 檔案:從工作區選取檔案做為背景資訊,新增提示,然後按一下「傳送」。
  5. (選用) 變更 Gemini 回應要求時使用的模式:

    • 詢問:建立方案。在此模式下,Gemini會回答問題,但不會建議變更程式碼。
    • 代理人:變更應用程式。在這個模式中,Gemini 會建議應用程式的變更,但不會在未經您確認的情況下套用變更。
    • 代理程式 (自動執行):自動將變更套用至應用程式。在這個模式下, Gemini 會根據要求自動變更程式碼,但仍會要求確認是否執行終端機指令。
  6. (選用) 新增自己的 Gemini API 金鑰,然後選擇其他 Gemini 模型。詳情請參閱「自備金鑰:在對話中使用其他 Gemini模型」。

  7. (選用) 調整 Gemini 的設定並新增 AI 規則檔案,自訂 Gemini 的協助方式。瞭解詳情。

在對話面板中,你可以提出 Gemini問題,並取得程式碼建議。在「代理程式」模式下,Gemini 甚至可以直接在工作區中更新專案設定檔和程式碼,並為您執行終端機指令。Gemini 可能會詢問是否要為您執行下列任一操作:

  • 修改檔案: Gemini 可以新增功能、修正錯誤或重構程式碼。Gemini 提出檔案變更建議時,你會看到兩個選項:

    • 更新檔案:直接使用 Gemini 建議的變更更新檔案。
    • 查看變更:在另一個視窗中開啟建議的變更,先查看再套用。
  • 執行終端機指令: Gemini 可以執行安裝依附元件或啟動開發伺服器等指令。系統可能會自行建議這些指令,你也可以要求 Gemini 執行指令。Gemini 提出指令後,系統會顯示「執行終端機指令」按鈕。按一下即可在 Firebase Studio 內的終端機中執行指令。Gemini 會執行指令,並在對話視窗中解讀結果,協助您決定後續步驟。

透過對話完成複雜工作

Gemini 可協助您完成複雜的開發工作,例如:

  • 為程式碼加上註解: Gemini 可在您要求「撰寫我的文件」時,自動以適當格式為程式碼生成註解。
  • 編寫測試案例: Gemini 可自動更新及生成單元測試。如果要求 Gemini「編寫我的測試」,Gemini 會找出現有的單元測試檔案,並將缺少的測試新增至該檔案。如果找不到現有的單元 測試檔案, 會建立單元測試供您審查、反覆修改及 接受,您甚至可以要求 Gemini 運作執行!
  • 管理依附元件:您可以要求 Gemini 偵測程式碼中缺少的依附元件,並直接在對話介面中解決問題。
  • 重構程式碼:您可以要求 Gemini 代表您重構程式碼,例如擷取函式,或跨多個檔案重新命名變數。Gemini 會生成建議變更清單,您檢查並套用變更後,可以要求 Gemini 更新及執行單元測試,驗證重構作業,並確保測試持續通過。
  • 產生及執行 Docker 工作流程:如果您已在工作區中啟用 Docker,只要要求 Gemini 建立 Dockerfile (例如「為我的應用程式建立 Dockerfile」),即可快速將應用程式容器化。Gemini 產生 Dockerfile 後,即可為您建構及執行容器。
  • 執行單元和整合測試:您可以要求 Gemini 執行特定測試套件,啟動測試執行作業 (例如「執行我的單元測試」或「執行整合測試」)。Gemini 會為專案執行適當的指令 (例如 npm test 或特定測試執行器指令),並在即時通訊介面中顯示測試結果。

在對話中使用斜線指令

你可以使用斜線指令 (以正斜線 / 開頭的快速鍵),引導 Gemini Chat 產生輸出內容。在 Gemini Chat 提示的開頭輸入 /,然後從可用斜線指令清單中選取所需動作。

如需完整的斜線指令清單,請在即時通訊中輸入 /。

舉例來說,/generate 後方加上簡短說明,即可生成程式碼片段。

以下是執行 /generate css for a black background 時的回傳範例:

body {
  background-color: black;
}

/* This CSS code sets the background color of the <body> element to black. This will make the background of the entire web page black. */

在即時通訊中參照特定檔案和資料夾

如要為要求和問題提供額外背景資訊,請使用 @ 符號參照特定檔案和資料夾。Gemini

例如 Explain what's contained within the @src/ai directory.。

管理即時通訊記錄

如要將不同主題分開討論,請在 Gemini 對話中建立不同討論串。然後根據主題回顧先前的討論串。

如要發起新對話,請按照下列步驟操作:

  1. 按一下即時通訊標頭列中的「發起即時通訊」。

  2. 輸入提示。

如要切換至其他對話串,請按照下列步驟操作:

  1. 按一下即時通訊訊息標題列中的「最近的對話」。

  2. 選取要存取的對話串。

  3. 繼續該對話串,或使用 Gemini 回顧先前的對話。

如要刪除對話串,請按照下列步驟操作:

  1. 在聊天室標題列中,從「近期對話」選取要刪除的對話串。

  2. 按一下即時通訊訊息標題列中的「刪除即時通訊」。確認要從對話記錄中刪除對話串。

在對話中查看程式碼引用內容

為協助您驗證程式碼建議,Firebase Studio 會分享原始來源和相關聯授權的資訊。如要查看聊天視窗中的完整程式碼引用記錄,請按一下聊天標題列中的「授權記錄」圖示。

對話標題列中的授權記錄圖示

如要進一步瞭解 Google 程式碼引用,請參閱生成程式碼輔助。

透過 Gemini 取得行內說明

Firebase Studio 可根據 Gemini 提供的 AI 輔助程式碼建議,提升工作效率。

請注意,程式碼完成功能預設為開啟。瞭解如何調整設定。

取得 Gemini 的程式碼建議

Gemini 會生成完整的可能程式碼區塊 內嵌。如要使用 Gemini 內嵌程式碼輔助功能,請按照下列步驟操作:

  1. 在 Firebase Studio 中開啟工作區。

  2. 前往需要協助的檔案或程式碼行,然後按 Ctrl+I 鍵 (在 MacOS 上則是 Cmd+I 鍵)。

  3. 輸入所需內容的說明,然後Gemini生成建議。您也可以使用動作做為捷徑,引導建議。舉例來說,輸入 /fixError 可協助修正內嵌程式碼中的錯誤。

  4. 選擇下列任一選項:

    • 如要保留生成的程式碼,請按一下「接受」。
    • 如要將建議貼到其他位置或移至新檔案,請在「捨棄」按鈕的下拉式選單中選取相應選項。
    • 如要生成新的建議內容,請按一下「重新生成」。
    • 如要徹底移除建議,請按一下「捨棄」。
  5. (選用) 調整 Gemini 的設定並新增 AI 規則檔案,自訂 Gemini 的協助方式。瞭解詳情。

在行內查看 Gemini 個指令

  1. 如要查看特定程式碼的 Gemini 指令,請選取並按一下滑鼠右鍵。

  2. 從選單中選取「spark」Gemini,然後選取要執行的動作。

使用 Gemini 建議的程式碼自動完成功能

為協助您編寫程式碼,Firebase Studio 提供 AI 程式碼補全功能,只要您開始輸入,系統就會預測並自動填入任何開啟檔案中的程式碼。

請注意,程式碼完成功能預設為開啟。

如要開啟或關閉程式碼自動完成功能,請使用下列任一方法調整程式碼自動完成設定:

  • 如果您使用 settings.json 檔案,請將 "IDX.aI.enableInlineCompletion" 設為 true 或 false。

  • 如要在 Firebase Studio 工作區中更新設定,請按照下列步驟操作:

    1. 按一下「管理」齒輪圖示 (位於工作區左下方),然後選擇「設定」,或按下 Ctrl+, 鍵 (Mac 上的 Cmd+, 鍵)。

      如果您在檢視畫面中使用 App Prototyping agent,請按一下 程式碼切換圖示「切換至程式碼」Prototyper,開啟 Code 檢視畫面。

    2. 選取「Workspace」分頁標籤,然後依序搜尋 Firebase Studio >「AI」>「啟用行內完成」設定。

    3. 如要關閉程式碼補全功能,請取消選取「在輸入時啟用行內程式碼補全功能」選項。