Personalizza la tua area di lavoro IDX

Project IDX ti consente di personalizzare la tua area di lavoro in base alle esigenze specifiche del tuo progetto definendo un unico file di configurazione .idx/dev.nix che descrive:

  • Gli strumenti di sistema che devi essere in grado di eseguire (ad esempio dal terminale), come compilatori o altri file binari.
  • Le estensioni IDE che devi installare (ad esempio il supporto del linguaggio di programmazione).
  • Come devono essere visualizzate le anteprime dell'app (ad esempio, i comandi per eseguire il server web).
  • Variabili di ambiente globali disponibili per i server locali in esecuzione nello spazio di lavoro.

Consulta la documentazione di riferimento di dev.nix per una descrizione completa delle funzionalità disponibili.

Nix e IDX

IDX utilizza Nix per definire la configurazione dell'ambiente per ogni area di lavoro. Nello specifico, IDX utilizza:

  • Il linguaggio di programmazione Nix per descrivere gli ambienti di lavoro. Nix è un linguaggio di programmazione funzionale. Gli attributi e le librerie di pacchetti che puoi definire nel file dev.nix seguono la sintassi dell'attributo Nix.

  • Il gestore dei pacchetti Nix per gestire gli strumenti di sistema disponibili per la tua area di lavoro. È simile ai gestori di pacchetti specifici per il sistema operativo, come APT (apt e apt-get), Homebrew (brew) e dpkg.

Poiché gli ambienti Nix sono riproducibili e dichiarativi, nel contesto di IDX, significa che puoi condividere il file di configurazione Nix all'interno del tuo repository Git per assicurarti che tutti coloro che lavorano al tuo progetto abbiano la stessa configurazione dell'ambiente.

Un esempio di base

L'esempio seguente mostra una configurazione di ambiente di base che abilita le anteprime:

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

Aggiungere strumenti di sistema

Per aggiungere strumenti di sistema alla tua area di lavoro, come compilatori o programmi CLI per i servizi cloud, individua l'ID pacchetto univoco nel registry dei pacchetti Nix e aggiungilo all'oggetto packages del file dev.nix, anteponendo il prefisso "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
  ];
  ...
}

Questo è diverso da come in genere potresti installare i pacchetti di sistema utilizzando gestori dei pacchetti specifici per il sistema operativo come APT (apt e apt-get), Homebrew (brew) e dpkg. La descrizione dichiarativa di quali pacchetti di sistema sono necessari consente di condividere e riprodurre più facilmente gli spazi di lavoro IDX.

Utilizzare i binari del nodo locale

Come sulla tua macchina locale, i binari relativi ai pacchetti Node installati localmente (ovvero i pacchetti definiti in package.json) possono essere eseguiti in un riquadro del terminale richiamandoli con il comando npx.

Per comodità, se ti trovi in una directory con una cartella node_modules (ad esempio la directory principale di un progetto web), i binari installati localmente possono essere richiamati direttamente, senza il prefisso npx.

Aggiungere componenti gcloud

Una configurazione predefinita della CLI gcloud per Google Cloud è disponibile per tutti gli spazi di lavoro IDX.

Se hai bisogno di componenti aggiuntivi, puoi aggiungerli al file dev.nix come segue:

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

Aggiungere estensioni IDE

Puoi installare le estensioni in IDX utilizzando il registry delle estensioni OpenVSX in due modi:

  • Utilizzando il riquadro Estensioni in IDX per scoprire e installare le estensioni. Questo approccio è ideale per le estensioni specifiche per utente, ad esempio:

    • Temi a colori personalizzati
  • Aggiungi estensioni al file dev.nix. Queste estensioni verranno installate automaticamente quando condividi la configurazione dello spazio di lavoro. Questo approccio è ideale per le estensioni specifiche del progetto, ad esempio:

    • Estensioni dei linguaggi di programmazione, inclusi i debugger specifici per il linguaggio
    • Estensioni ufficiali per i servizi cloud utilizzati nel progetto
    • Formattatori di codice

Per quest'ultimo approccio, puoi includere le estensioni IDE nel file dev.nix trovandovi l'ID estensione completo (del tipo <publisher>.<id>) e aggiungendolo all'oggetto idx.extensions come segue:

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

Aggiungere servizi comuni

IDX offre inoltre una configurazione semplificata per i servizi comuni di cui potresti avere bisogno durante lo sviluppo, tra cui:

  • Container
    • Docker (services.docker.*)
  • Messaggigevingi
    • Emulatore Pub/Sub (services.pubsub.*)
  • Database
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Per informazioni dettagliate sull'attivazione di questi servizi nello spazio di lavoro, consulta le services.* parti del documento di riferimento dev.nix.

Personalizzare le anteprime

Per informazioni dettagliate su come personalizzare le anteprime delle app, consulta la documentazione relativa alle anteprime.

Impostare l'icona dello spazio di lavoro

Puoi scegliere un'icona personalizzata per la tua area di lavoro inserendo un file PNG denominato icon.png accanto al file dev.nix, all'interno della directory .idx. IDX userà poi questa icona per rappresentare la tua area di lavoro nella dashboard.

Poiché questo file può essere sottoposto a controllo in un sistema di controllo del codice sorgente (come Git), è un buon modo per aiutare tutti coloro che lavorano al progetto a visualizzare la stessa icona per il progetto quando utilizzano IDX. Inoltre, poiché il file può variare nei vari branch di Git, puoi anche distinguere visivamente le aree di lavoro quando lavori, ad esempio, sulle release "beta" e "di produzione" della tua app.

Trasformare le personalizzazioni in un modello

Per trasformare la configurazione dell'ambiente in un "ambiente di partenza" con cui chiunque può creare nuovi progetti, consulta la documentazione sulla creazione di un modello personalizzato.

Visualizzare tutte le opzioni di personalizzazione

Consulta le informazioni di riferimento su dev.nix per una descrizione dettagliata dello schema di configurazione dell'ambiente.