开始使用 Project IDX

请继续阅读，了解开始使用 Project IDX 需要了解的基础知识。

准备工作

在开始之前，您可能需要为浏览器启用第三方 Cookie。在大多数浏览器中，Project IDX 都需要使用第三方 Cookie 对工作区进行身份验证。

Chrome
  1. 打开设置。
  2. 打开隐私设置和安全性标签页。
  3. 确保已启用允许所有 Cookie。
  4. 打开 idx.google.com。
  5. 点击地址栏中的可见性图标 visibility_off 以打开跟踪保护面板。开启第三方 Cookie 设置，以暂时允许第三方 Cookie。启用 Cookie 后，IDX 上的 Cookie 将保留 90 天。
Safari
  1. 依次打开 Safari > Settings...。
  2. 关闭以下设置：
    • 高级 > 阻止所有 Cookie
    • 隐私权 > 阻止跨网站跟踪
  3. 打开 idx.google.com。
Firefox

您无需为 Firefox 启用第三方 Cookie。前往 idx.google.com。
歌剧
  1. 打开 idx.google.com。
  2. 打开菜单，然后点击设置。
  3. 前往隐私和安全部分，展开第三方 Cookie 选项。
  4. 选择在无痕模式下阻止第三方 Cookie 或允许第三方 Cookie。
  5. 打开 idx.google.com。
Arc
  1. 转到 arc://settings。
  2. 前往隐私和安全部分，展开第三方 Cookie 选项。
  3. 选择在无痕模式下阻止第三方 Cookie 或允许第三方 Cookie。
  4. 打开 idx.google.com。
勇敢

你无需为 Brave 启用第三方 Cookie。前往 idx.google.com。

创建工作区

IDX 中的工作区是一种开发环境，其中包含开发应用所需的所有内容。它包含您的代码、代码编辑器（包含与项目相关的插件）以及支持应用开发的工具链。此方法类似于在本地桌面开发环境中创建新项目，只不过您需要预先配置整台计算机和操作系统，并专用于构建应用。

项目 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 和语言的完整列表。您还可以在模板库中找到 Blank workspace 模板。
    • GitHub 代码库：选择导入代码库，将 GitHub 代码库克隆到工作区。

模板

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

  1. 您可以按应用类型浏览模板，也可以使用右上角的搜索框按关键字过滤完整的模板库。Blank workspace 模板位于其他类别中。

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

  3. 点击创建。IDX 会根据您的选择创建一个新的工作区。

我们会不断添加新的模板，请经常回来看看，或告诉我们您希望看到的内容。

GitHub 导入

  1. 输入代码库网址。

  2. 点击创建。IDX 会根据您的选择创建一个新的工作区。

  3. 工作区加载后向 GitHub 进行身份验证。

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

配置工作区

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

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

环境配置在代码库的 .idx/dev.nix 文件中定义。此文件可让您指定已安装的软件包、环境变量和代码 OSS 扩展程序。

如需了解在 IDX 中启用应用预览的基本工作区环境配置，请参阅以下示例 .idx/dev.nix 文件：

{ 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 环境的选项。此工作区不包含您已定义的任何配置，仅运行基本的代码 OSS。这样，您就可以修复 dev.nix 配置文件中的错误并重新构建环境。

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

后续步骤