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, in der Folgendes beschrieben wird:

  • Die erforderlichen Systemtools (z. B. vom Terminal) wie Compiler oder andere Binärdateien.
  • Die IDE-Erweiterungen, die Sie installiert haben, z. B. Programmiersprache Support).
  • So sollte Ihre App-Vorschau dargestellt werden (für Beispiel: die Befehle zum Ausführen Ihres Webservers).
  • Globale Umgebungsvariablen, die für lokale Server verfügbar sind, die in Ihrem Arbeitsbereich.

Eine vollständige Übersicht finden Sie in der Referenz zu dev.nix. eine Beschreibung dessen, was verfügbar ist.

Nix und IDX

IDX verwendet Nix für die Definition Umgebungskonfiguration für jeden Arbeitsbereich. Im Einzelnen nutzt IDX Folgendes:

  • Die Programmiersprache Nix, Arbeitsbereich-Umgebungen beschreiben. Nix ist eine funktionale Programmiersprache. Die Attribute und Paketbibliotheken, die Sie in der Datei dev.nix definieren können folgen Sie dem Nix-Attributsatz Syntax.

  • Der Nix-Paketmanager zur Verwaltung der Systemtools in Ihrem Arbeitsbereich. Dies ähnelt den betriebssystemspezifischen Paketmanager wie APT (apt und apt-get), Homebrew (brew) und dpkg.

Da Nix-Umgebungen reproduzierbar und deklarativ sind, ist es im Kontext IDX bedeutet, dass ihr eure Nix-Konfigurationsdatei Git-Repository, um sicherzustellen, dass alle, die an Ihrem Projekt arbeiten, Konfiguration der Umgebung.

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

Systemtools hinzufügen

Um Ihrem Arbeitsbereich Systemtools hinzuzufügen, z. B. Compiler oder Befehlszeilenprogramme für Cloud-Dienste erhalten, finden Sie die eindeutige Paket-ID im Nix-Paket. Registrierung und fügen Sie sie der Datei dev.nix packages-Objekt mit dem Präfix „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
  ];
  ...
}

Dies unterscheidet sich von der Art und Weise, wie Sie Systempakete normalerweise mit Betriebssystemspezifische Paketmanager wie APT (apt und apt-get), Homebrew (brew) und dpkg. Deklarative Beschreibung der Systempakete bedeutet, dass IDX-Arbeitsbereiche einfacher geteilt und reproduziert werden können.

Lokale Binärdateien von Knoten verwenden

Genau wie auf Ihrem lokalen Computer sind Binärdateien, die mit dem lokal installierten Knoten Pakete (d.h. in Ihrem package.json definierte Pakete) können in einem Terminalfeld durch Aufrufen mit der npx Befehl

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

gcloud Komponenten hinzufügen

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

Wenn Sie zusätzliche Komponenten benötigen, können Sie sie der Datei dev.nix hinzufügen, z. B. Also:

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

IDE-Erweiterungen hinzufügen

Sie können Erweiterungen in IDX mit der OpenVSX-Erweiterungsregistrierung auf zwei Arten:

  • Über den Bereich Extensions in IDX zur Erkennung und Installation Erweiterungen. Dieser Ansatz eignet sich am besten für nutzerspezifische Erweiterungen, z. B.:

    • Benutzerdefinierte Farbdesigns
  • Durch Hinzufügen von Erweiterungen zu Ihrer dev.nix-Datei Diese Erweiterungen werden automatisch installiert, wenn Sie die Konfiguration Ihres Arbeitsbereichs freigeben. Dieses ist für projektspezifische Erweiterungen wie die folgenden am besten geeignet:

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

Für die zweite Methode kannst du IDE-Erweiterungen in deine dev.nix-Datei einfügen indem Sie die voll qualifizierte Erweiterungs-ID im Format <publisher>.<id> suchen und sie dem idx.extensions hinzufügen wie in diesem Beispiel:

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

Häufige Dienste hinzufügen

Außerdem vereinfacht IDX die Einrichtung und Konfiguration gängiger Dienste, die Sie möglicherweise während der Entwicklung benötigen, z. B.:

  • Container <ph type="x-smartling-placeholder">
      </ph>
    • Docker (services.docker.*)
  • Nachrichtenfunktion <ph type="x-smartling-placeholder">
      </ph>
    • Pub/Sub-Emulator (services.pubsub.*)
  • Datenbanken <ph type="x-smartling-placeholder">
      </ph>
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

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

Vorschauen anpassen

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

Symbol „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. IDX verwendet dann dieses Symbol, um Ihren Arbeitsbereich in Ihrem Dashboard darzustellen.

Da diese Datei in die Versionsverwaltung (z. B. Git) eingecheckt werden kann, ist dies ein So können alle, die an Ihrem Projekt arbeiten, das gleiche Symbol für Ihr wenn Sie IDX verwenden. Und da die Datei in verschiedenen Git-Zweigen variieren kann, können Sie in der Betaversion sogar Arbeitsbereiche visuell unterscheiden. und "Produktion" Releases Ihrer App.

Anpassungen in eine Vorlage umwandeln

Um Ihre Umgebungskonfiguration in eine „Einstiegsumgebung“ umzuwandeln für alle mit denen Sie neue Projekte erstellen können, finden Sie in der Dokumentation zum Erstellen eines benutzerdefinierten Vorlage.

Alle Anpassungsoptionen ansehen

Ausführliche Informationen finden Sie in der Referenz zu dev.nix. Beschreibung des Umgebungskonfigurationsschemas.