开始使用 Project 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. 关闭以下设置： <ph type="x-smartling-placeholder">
      </ph>
    • 高级 >阻止所有 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 中的工作区是一种开发环境，其中包含了 开发应用所需的资源它包含您的代码 （包含与您的项目相关的插件）以及支持应用的工具链 开发。类似于 在您的本地桌面开发环境中创建一个新项目， 预配了一整台计算机和一整台操作系统 构建应用

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、 和语言。您还可以在以下位置找到空白工作区模板： 模板库
    • Git 代码库：选择导入代码库，将代码库克隆到工作区中。

模板

IDX 模板库页面，显示了可用的网站模板

  1. 按应用类型浏览模板或使用 搜索框，可按以下标准过滤完整模板库： 关键字。空白工作区 其他类别中提供了模板。

  2. 输入工作区的名称，并设置任何其他选项。

  3. 点击创建。IDX 会根据您的 选择。

我们会不断添加新的模板，欢迎时常回来看看 或告诉我们您想要看到的内容。

Git 代码库导入

  1. 输入代码库网址。代码库可以托管在 GitHub、GitLab 或 Bitbucket 上。

  2. 点击创建。IDX 会根据您的 选择。

  3. 对于私有代码库，系统会要求您向相应的提供方进行身份验证。

    • 对于 GitHub，请按照提示复制访问令牌
    • 对于 GitLab，您可以使用自己的账号密码或创建个人账号令牌
    • 对于 Bitbucket，请使用您的用户名（而非电子邮件地址）和应用专用密码进行身份验证。

  4. 运行 npm install（或 flutter pub get）后， 导入项目。默认情况下，IDX 不会安装 npm 依赖项。

配置工作区

IDX 使用 Nix 为每个工作区定义环境配置。Nix 是 功能型软件包管理器，并为每个依赖项分配唯一标识符， 这最终意味着你的环境 无缝包含同一依赖项的多个版本。它还 可重现性和声明性对于 IDX，这意味着您可以 在多个工作区之间共享 Nix 配置文件，以加载相同的 环境配置。详细了解 Nix + IDX。

创建或修改 .idx/dev.nix 文件

环境配置在代码的 .idx/dev.nix 文件中定义 存储库此文件可让您指定安装的软件包、环境 变量和代码 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 显示一个用于启动恢复环境的选项。此工作区不 添加任何您定义的配置，只运行基本配置， 代码 OSS。这样，您便可修正dev.nix中的错误 配置文件并重新构建环境。

IDX 最终会显示环境构建错误。目前，您 必须自行排查问题

后续步骤