開始使用專案 IDX

請繼續閱讀下文，瞭解開始使用 Project IDX 所需的基礎知識。

事前準備

開始使用之前，您可能必須先為 。在大部分的瀏覽器中，Project IDX 需要使用第三方 Cookie 驗證工作區

Chrome
  1. 開啟「設定」。
  2. 開啟「隱私權和安全性」分頁。
  3. 確認已啟用「允許所有 Cookie」。
  4. 開啟 idx.google.com。
  5. 按一下網址列中的顯示設定圖示 visibility_off 來開啟 「追蹤保護功能」面板。開啟 暫時允許「第三方 Cookie」設定 第三方 Cookie這會啟用 IDX 上的 Cookie 90 天。
Safari
  1. 開啟 Safari >設定...。
  2. 關閉下列設定：
    • 進階 >封鎖所有 Cookie
    • 隱私權 >防止跨網站追蹤
  3. 開啟 idx.google.com。
Firefox

您不需要為 Firefox 啟用第三方 Cookie。前往 idx.google.com。
Opera
  1. 開啟 idx.google.com。
  2. 開啟選單，然後按一下「設定」。
  3. 前往「隱私權與安全性」並展開「安全性」部分 「第三方 Cookie」選項。
  4. 選取「在無痕模式中封鎖第三方 Cookie」，或 允許第三方 Cookie。
  5. 開啟 idx.google.com。
弧形
  1. 前往 arc://settings。
  2. 前往「隱私權和安全性」部分，然後展開 「第三方 Cookie」選項。
  3. 選取「在無痕模式中封鎖第三方 Cookie」，或 允許第三方 Cookie。
  4. 開啟 idx.google.com。
要勇敢

您不必為 Brave 啟用第三方 Cookie。前往 idx.google.com。

建立工作區

IDX 中的工作區是含有所有項目的開發環境 輕鬆開發應用程式當中包含程式碼、程式碼編輯器 (含與專案相關的外掛程式)，以及支援應用程式的工具鍊 。這個 API 與 在您的本機桌面開發環境中建立新專案，但 電腦與作業系統皆已預先設定，專用於 建構應用程式

Project IDX 工作區經過最佳化，一次可包含一個程式碼集。 因此您可將環境與系統層級的依附元件 是相互隔離的應用程式

如要建構新的應用程式，請使用 IDX 中的代管工作區範本， 很快就能上手或者，您可以匯入現有的應用程式 轉換為 IDX

如要建立新工作區，請按照下列步驟操作：

  • 接受條款的 IDX 新手上路流程螢幕截圖
  • 用於啟用 AI 功能的 IDX 新手上路流程螢幕截圖
  • IDX 新手上路流程的螢幕截圖，顯示 AI 和隱私權附註
  • IDX 資訊主頁的螢幕截圖，顯示精選範本和 GitHub 匯入內容

  1. 開啟「Project IDX」。

  2. 首次開啟 IDX 時，系統會提示您閱讀並接受 Google 產品、生成式 AI 和 Android SDK 服務條款。 您也可以選擇接收產品最新消息與相關通訊內容 包括公告或使用者研究等等，協助改善產品選擇要採用的選項 找出方法。 按一下提供的連結閱讀服務條款，然後選取選項 如要接受，請按一下「繼續」。接下來，您可以決定 請在首次使用 IDX 時啟用 AI 功能，或者關閉 點選 [暫時不要] (您隨時可以 稍後再開啟)。 如果您在這個畫面上啟用應用程式，請閱讀 AI 和隱私權附註，然後按一下「繼續」保留設定，或 返回關閉 AI 功能。

  3. 選取要建立的工作區類型：

    • 範本：建立預先載入基本檔案和 可能需要的套件選取其中一個精選範本，或按一下 如需可用架構、API 和 API 的完整清單，請查看所有範本。 和語言您也可以在以下路徑找到「空白工作區」範本： 範本庫
    • Git Repository：選取「Import a repo」(匯入存放區)，將存放區複製到工作區。

範本

顯示可用網頁範本的 IDX 範本庫頁面

  1. 依應用程式類型瀏覽範本，或是使用 搜尋框右上方的篩選器，根據條件篩選整個範本庫 字詞。空白工作區 Misc 類別提供了這個範本。

  2. 輸入工作區名稱，並設定其他選項。

  3. 點選「建立」。IDX 會根據您的 選取。

我們會持續新增範本，請不時返回查看 或告訴我們你想要看見什麼。

Git 存放區匯入作業

  1. 輸入「Repo 網址」。存放區可託管於 GitHub、GitLab 或 Bitbucket。

  2. 點選「建立」。IDX 會根據您的 選取。

  3. 如果是私人存放區，系統會要求您驗證個別供應商。

    • 如果是 GitHub，請按照提示複製存取權杖
    • 如為 GitLab，您可以使用帳戶密碼或建立個人帳戶權杖
    • 如果是 Bitbucket，請使用你的使用者名稱 (非電子郵件) 和應用程式密碼進行驗證。

  4. 執行 npm install (或 flutter pub get) 插入 IDX 終端機， 匯入專案。IDX 預設不會安裝 npm 以及依附元件

設定工作區

IDX 採用 Nix 定義各個工作區的環境設定Nix 單純 並為每個依附元件指派專屬 ID 這意味著您的環境 可以流暢地包含多個版本的相同依附元件。這個 可重現且宣告式而在 IDX 中，這表示您可以 在不同工作區中共用 Nix 設定檔，以載入 環境設定進一步瞭解 Nix + IDX。

建立或編輯 .idx/dev.nix 檔案

環境設定是由程式碼的 .idx/dev.nix 檔案定義 Cloud Storage 也提供目錄同步處理功能這個檔案可讓您指定已安裝的套件和環境 變數和 Code OSS 擴充功能

如需基本工作區環境，請參閱以下 .idx/dev.nix 檔案範例 如何在 IDX 中啟用應用程式預覽：

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
      };
    };
  };
}

套用新設定

每次新增或更新 dev.nix 設定檔 (IDX) 時 在右下角顯示重新建構環境的提示。 重新建構環境所需的時間取決於套件數量 滿足您的設定需求

針對環境建構錯誤進行偵錯

由於設定檔是機器可讀取的程式碼，因此可能會出現錯誤。 如果發生這種情況，環境可能會無法建構，無法啟動。IDX 會顯示啟動 Recovery 環境的選項。這個工作區不會 包含您定義的任何設定，且只執行基本 。讓您修正dev.nix中的錯誤 設定檔，然後重新建構環境。

IDX 最終會顯示環境建構錯誤。目前您 不必自行解決問題

後續步驟