IDX-Arbeitsbereich anpassen

Mit Project IDX können Sie Ihren Arbeitsbereich an die individuellen Anforderungen Ihres Projekts anpassen, indem Sie eine einzelne .idx/dev.nix-Konfigurationsdatei definieren, die Folgendes beschreibt:

  • Die Systemtools, die Sie ausführen können müssen (z. B. über das Terminal), z. B. Compiler oder andere Binärdateien.
  • Die erforderlichen IDE-Erweiterungen (z. B. Unterstützung für Programmiersprachen)
  • Wie Ihre App-Vorschauen angezeigt werden sollen (z. B. die Befehle zum Ausführen Ihres Webservers).
  • Globale Umgebungsvariablen, die für lokale Server verfügbar sind, die in Ihrem Arbeitsbereich ausgeführt werden.

Eine vollständige Beschreibung der verfügbaren Optionen finden Sie in der dev.nix-Referenz.

Nix und IDX

IDX verwendet Nix, um die Umgebungskonfiguration für jeden Arbeitsbereich zu definieren. IDX verwendet insbesondere:

  • Die Nix-Programmiersprache zum Beschreiben von Arbeitsbereichsumgebungen. Nix ist eine funktionale Programmiersprache. Die Attribute und Paketbibliotheken, die Sie in der dev.nix-Datei definieren können, folgen der Syntax für Nix-Attributsätze.

  • Der Nix-Paketmanager zum Verwalten der für Ihren Arbeitsbereich verfügbaren Systemtools. Das ist vergleichbar mit betriebssystemspezifischen Paketmanagern wie APT (apt und apt-get), Homebrew (brew) und dpkg.

Da Nix-Umgebungen reproduzierbar und deklarativ sind, bedeutet das im Kontext von IDX, dass Sie Ihre Nix-Konfigurationsdatei als Teil Ihres Git-Repositories freigeben können, damit alle, die an Ihrem Projekt arbeiten, dieselbe Umgebungskonfiguration haben.

Einfaches Beispiel

Das folgende Beispiel zeigt eine grundlegende Umgebungskonfiguration, mit der Vorschauen aktiviert werden:

{ 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";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

Systemtools hinzufügen

Wenn Sie Ihrem Arbeitsbereich Systemtools hinzufügen möchten, z. B. Compiler oder Befehlszeilenprogramme für Cloud-Dienste, finden Sie die eindeutige Paket-ID in der Nix-Paketregistrierung und fügen Sie sie dem packages-Objekt Ihrer dev.nix-Datei mit dem Präfix „pkgs.“ hinzu:

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

Das unterscheidet sich von der Installation von Systempaketen mithilfe von betriebssystemspezifischen Paketmanagern wie APT (apt und apt-get), Homebrew (brew) und dpkg. Wenn Sie deklarativ genau angeben, welche Systempakete erforderlich sind, können IDX-Arbeitsbereiche leichter geteilt und reproduziert werden.

Lokale Knoten-Binärdateien verwenden

Genau wie auf Ihrem lokalen Computer können Binärdateien, die mit lokal installierten Node-Paketen (d. h. in Ihrer package.json definierten Paketen) verknüpft sind, in einem Terminalbereich ausgeführt werden. Dazu müssen Sie sie mit dem Befehl npx aufrufen.

Wenn Sie sich in einem Verzeichnis mit einem node_modules-Ordner befinden (z. B. im Stammverzeichnis eines Webprojekts), können lokal installierte Binärdateien direkt ohne das Präfix npx aufgerufen werden.

gcloud-Komponenten hinzufügen

Eine Standardkonfiguration der gcloud CLI für Google Cloud ist für alle IDX-Arbeitsbereiche verfügbar.

Wenn Sie zusätzliche Komponenten benötigen, können Sie sie Ihrer dev.nix-Datei so hinzufügen:

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

IDE-Erweiterungen hinzufügen

Sie haben zwei Möglichkeiten, Erweiterungen in IDX über die Erweiterungsregistrierung OpenVSX zu installieren:

  • Über den Bereich Erweiterungen in IDX können Sie Erweiterungen finden und installieren. Dieser Ansatz eignet sich am besten für nutzerspezifische Erweiterungen, z. B.:

    • Benutzerdefinierte Farbdesigns

  • Fügen Sie Ihrer dev.nix-Datei Erweiterungen hinzu. Diese Erweiterungen werden automatisch installiert, wenn Sie die Konfiguration Ihres Arbeitsbereichs freigeben. Dieser Ansatz eignet sich am besten für projektspezifische Erweiterungen, z. B.:

    • Programmiersprachenerweiterungen, einschließlich sprachspezifischer Debugger
    • Offizielle Erweiterungen für Cloud-Dienste, die in Ihrem Projekt verwendet werden
    • Codeformatierer

Bei der zweiten Methode können Sie IDE-Erweiterungen in Ihre dev.nix-Datei aufnehmen. Suchen Sie dazu die voll qualifizierte Erweiterungs-ID (vom Typ <publisher>.<id>) und fügen Sie sie dem idx.extensions-Objekt so hinzu:

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

Gängige Dienstleistungen hinzufügen

IDX bietet außerdem eine vereinfachte Einrichtung und Konfiguration gängiger Dienste, die Sie während der Entwicklung benötigen könnten, darunter:

  • Container
    • Docker (services.docker.*)
  • Messaging
    • Pub/Sub-Emulator (services.pubsub.*)
  • Datenbanken
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Weitere Informationen zum Aktivieren dieser Dienste in Ihrem Arbeitsbereich finden Sie in den services.*-Abschnitten der dev.nix-Referenz.

Vorschauen anpassen

Weitere Informationen zum Anpassen von App-Vorschauen finden Sie in der Dokumentation zu Vorschauen.

Symbol für den Arbeitsbereich festlegen

Sie können ein benutzerdefiniertes Symbol für Ihren Arbeitsbereich auswählen, indem Sie eine PNG-Datei mit dem Namen icon.png neben der Datei dev.nix im Verzeichnis .idx platzieren. IDX verwendet dann dieses Symbol, um Ihren Arbeitsbereich in Ihrem Dashboard darzustellen.

Da diese Datei in die Versionskontrolle (z. B. Git) eingecheckt werden kann, ist dies eine gute Möglichkeit, allen, die an Ihrem Projekt arbeiten, dasselbe Symbol für Ihr Projekt zu zeigen, wenn sie IDX verwenden. Da die Datei in verschiedenen Git-Branches variieren kann, können Sie Arbeitsbereiche auch optisch unterscheiden, wenn Sie beispielsweise an „Beta“- und „Produktion“-Releases Ihrer App arbeiten.

Anpassungen in eine Vorlage umwandeln

Wenn Sie Ihre Umgebungskonfiguration in eine „Starter-Umgebung“ verwandeln möchten, mit der jeder neue Projekte erstellen kann, lesen Sie die Dokumentation zum Erstellen einer benutzerdefinierten Vorlage.

Alle Personalisierungsoptionen ansehen

Eine detaillierte Beschreibung des Schemas für die Umgebungskonfiguration finden Sie in der dev.nix-Referenz.