プロジェクト IDX はベータ版です。ベータ版のプロダクトや機能では、サポートが制限されることがあります。また、ベータ版のプロダクトや機能の変更は、以前のバージョンと互換性がない可能性があります。

このページは Cloud Translation API によって翻訳されました。

IDX ワークスペースのカスタマイズ

Project IDX では、プロジェクト固有のニーズに合わせてワークスペースをカスタマイズできます次の内容を記述した .idx/dev.nix 構成ファイルを 1 つ定義します。

実行可能にする必要があるシステムツール（ターミナルなど）。
インストールする必要がある IDE 拡張機能（プログラミング言語など）サポート）。
アプリのプレビューの表示方法（（ウェブサーバーを実行するコマンドなど）。
グローバル 環境変数。できます。

詳細については、dev.nix リファレンスをご覧ください。説明があります。

Nix、IDX

IDX は Nix を使用して環境構成を管理します。具体的には、IDX は次のものを使用します。

Nix プログラミング言語を使用して、学びます。Nix は関数型プログラミング言語です。 dev.nix ファイルで定義できる属性とパッケージライブラリ Nix 属性セットに従います。構文をご覧ください。
Nix パッケージ管理システム: コンテナイメージのワークスペースで利用できるシステムツールも用意されていますこれは、OS 固有の機能に似ています。 APT（apt と apt-get）、Homebird（brew）、 dpkg。

Nix 環境は再現可能で宣言型であるため、つまり、IDX 構成ファイルの一部として Nix 構成ファイルを Git リポジトリを使用することで、プロジェクトに携わるすべてのメンバーが同じリソースを共有必要があります。

基本的な例

次の例は、プレビューを有効にする基本的な環境構成を示しています。

{ 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";
      };
    };
  };
}

システムツールの追加

コンパイラや CLI プログラムなどのシステムツールをワークスペースに追加するには、一意のパッケージ ID を Nix パッケージで見つけてレジストリに追加して、dev.nix ファイルの packages オブジェクトであり、先頭に `pkgs.:

{ 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
  ];
  ...
}

これは、Terraform を使用してシステムパッケージをインストールする通常の方法とは異なります。 APT（apt と apt-get）、Homebird などの OS 固有のパッケージマネージャー（brew）、dpkg。どのシステムパッケージがコンテナにインストールされるかを IDX ワークスペースの共有と再現が容易になります

ローカルノードのバイナリを使用する

ローカルマシンと同様に、ローカルにインストールされたノードに関連するバイナリはパッケージ（package.json で定義されたパッケージ）は、ターミナルパネル（npx で呼び出します）コマンドで確認できます。

また、node_modules があるディレクトリにいる場合にも便利です。フォルダ（ウェブプロジェクトのルートディレクトリなど）、ローカルにインストールされたバイナリ npx 接頭辞を付けずに直接呼び出すことができます。

`gcloud` コンポーネントを追加する

Google 用 gcloud CLI のデフォルト構成 Cloud はすべての IDX で利用可能できます。

追加のコンポーネントが必要な場合は、次のように dev.nix ファイルに追加できます。次のようになります。

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

IDE 拡張機能を追加する

IDX に拡張機能をインストールするには、 OpenVSX 拡張機能レジストリには、次の 2 つの方法があります。

IDX の [Extensions] パネルを使用して検出とインストールを行うできます。この方法は、次のようなユーザー固有の拡張機能に最適です。
- カスタムカラーテーマ
dev.nix ファイルに拡張機能を追加する。これらの拡張機能は設定を共有すると自動的にインストールされます。この次のようなプロジェクト固有の拡張機能に最適です。
- プログラミング言語の拡張機能（言語固有のデバッガを含む）
- プロジェクトで使用されるクラウドサービスの正式な拡張機能
- コードフォーマッタ

後者の方法では、dev.nix ファイルに IDE 拡張機能を含めることができます。完全修飾された拡張機能 ID（<publisher>.<id> 形式）を見つけて idx.extensions に追加します。オブジェクトを次のように変更します。

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

共通サービスを追加

IDX では、一般的なサービスのセットアップと構成も簡素化されています。次のような作業が必要になる可能性があります。

コンテナ <ph type="x-smartling-placeholder">
- Docker（services.docker.*）
メッセージ <ph type="x-smartling-placeholder">
- Pub/Sub エミュレータ（services.pubsub.*）
データベース <ph type="x-smartling-placeholder">
- MySQL（services.mysql.*）
- Postgres（services.postgres.*）
- Redis（services.redis.*）
- Spanner（services.spanner.*）

ワークスペースでこれらのサービスを有効にする方法について詳しくは、services.*をご覧ください。 dev.nix リファレンスの対応する部分をご覧ください。

プレビューをカスタマイズする

アプリのプレビューをカスタマイズする方法について詳しくは、プレビューをご覧ください。

「ワークスペースの設定」アイコン

ワークスペースのカスタムアイコンを選択するには、 .idx ディレクトリ内の dev.nix ファイルの隣にある icon.png。IDX このアイコンを使用して、ダッシュボードでワークスペースを表します。

このファイルはソース管理（Git など）にチェックインできるため、プロジェクトに携わるすべてのユーザーに、同じアイコンがいくつかあります。ファイルは Git ブランチによって異なるため、「ベータ版」では、ワークスペースを視覚的に区別することもできます。および「本番」アプリのリリース情報などです

カスタマイズ内容をテンプレートに変える

環境構成を「スターター環境」にすること誰でも利用可能詳細については、カスタムコンテナイメージの作成に関するドキュメントテンプレート。

すべてのカスタマイズオプションを見る

詳細については、dev.nix リファレンスをご覧ください。環境構成スキーマの説明です。