Personnaliser votre espace de travail IDX

L'IDX de projet vous permet d'adapter votre espace de travail aux besoins spécifiques de votre projet en définissant un seul fichier de configuration .idx/dev.nix qui décrit:

  • Les outils système que vous devez pouvoir exécuter (par exemple, à partir du terminal), tels que les compilateurs ou d'autres binaires.
  • Les extensions IDE que vous devez installer (par exemple, la prise en charge du langage de programmation).
  • Comment les aperçus de votre application doivent s'afficher (par exemple, les commandes permettant d'exécuter votre serveur Web).
  • Variables d'environnement globales disponibles pour les serveurs locaux exécutés dans votre espace de travail.

Consultez la documentation de référence sur dev.nix pour obtenir une description complète des éléments disponibles.

Nix et IDX

IDX utilise Nix pour définir la configuration de l'environnement pour chaque espace de travail. Plus précisément, IDX utilise:

  • Le langage de programmation Nix pour décrire les environnements de l'espace de travail. Nix est un langage de programmation fonctionnel. Les attributs et les bibliothèques de packages que vous pouvez définir dans le fichier dev.nix suivent la syntaxe de l'ensemble d'attributs Nix.

  • Le gestionnaire de paquets Nix pour gérer les outils système disponibles dans votre espace de travail. Cela ressemble aux gestionnaires de paquets spécifiques à l'OS tels que APT (apt et apt-get), Homebrew (brew) et dpkg.

Étant donné que les environnements Nix sont reproductibles et déclaratifs, dans le contexte d'IDX, cela signifie que vous pouvez partager votre fichier de configuration Nix dans votre dépôt Git pour vous assurer que tous les membres de votre équipe qui travaillent sur votre projet disposent de la même configuration d'environnement.

Exemple de base

L'exemple suivant montre une configuration d'environnement de base permettant d'activer les aperçus:

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

Ajouter des outils système

Pour ajouter des outils système à votre espace de travail, tels que des compilateurs ou des programmes CLI pour les services cloud, recherchez l'ID de package unique dans le registre de paquets Nix et ajoutez-le à l'objet packages de votre fichier dev.nix, en ajoutant le préfixe "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
  ];
  ...
}

Cette méthode diffère de la façon dont vous installez généralement des paquets système à l'aide de gestionnaires de paquets spécifiques à l'OS, tels que APT (apt et apt-get), Homebrew (brew) et dpkg. En décrivant de manière déclarative exactement les packages système requis, les espaces de travail IDX sont plus faciles à partager et à reproduire.

Utiliser des binaires de nœud locaux

Tout comme sur votre ordinateur local, les binaires associés aux packages node installés localement (c'est-à-dire les packages définis dans votre package.json) peuvent être exécutés dans un panneau de terminal en les invoquant avec la commande npx.

Pour plus de commodité, si vous vous trouvez dans un répertoire contenant un dossier node_modules (par exemple, le répertoire racine d'un projet Web), les binaires installés localement peuvent être appelés directement, sans le préfixe npx.

Ajouter des composants gcloud

Une configuration par défaut de la CLI gcloud pour Google Cloud est disponible pour tous les espaces de travail IDX.

Si vous avez besoin de composants supplémentaires, vous pouvez les ajouter à votre fichier dev.nix comme suit:

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

Ajouter des extensions IDE

Vous pouvez installer des extensions dans IDX à l'aide du registre d'extension OpenVSX de deux manières:

  • En utilisant le panneau Extensions dans IDX pour découvrir et installer des extensions. Cette approche est particulièrement adaptée aux extensions spécifiques à l'utilisateur, par exemple:

    • Thèmes de couleurs personnalisés

  • En ajoutant des extensions à votre fichier dev.nix. Ces extensions seront automatiquement installées lorsque vous partagerez la configuration de votre espace de travail. Cette approche est la plus adaptée aux extensions spécifiques au projet, par exemple:

    • Extensions de langage de programmation, y compris des débogueurs spécifiques au langage
    • Extensions officielles pour les services cloud utilisés dans votre projet
    • Outils de mise en forme du code

Pour cette dernière approche, vous pouvez inclure des extensions d'IDE dans votre fichier dev.nix en recherchant l'ID d'extension complet (de la forme <publisher>.<id>) et en l'ajoutant à l'objet idx.extensions comme suit:

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

Ajouter des services courants

IDX propose également une configuration simplifiée pour les services courants dont vous pourriez avoir besoin pendant le développement, y compris:

  • Conteneurs
    • Docker (services.docker.*)
  • Messaging
    • Émulateur Pub/Sub (services.pubsub.*)
  • Bases de données
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Pour savoir comment activer ces services dans votre espace de travail, consultez les sections services.* de la documentation de référence dev.nix.

Personnaliser les aperçus

Pour savoir comment personnaliser les aperçus de votre application, consultez la documentation sur les aperçus.

Définir l'icône de votre espace de travail

Vous pouvez choisir une icône personnalisée pour votre espace de travail en plaçant un fichier PNG nommé icon.png à côté du fichier dev.nix, dans le répertoire .idx. IDX utilisera ensuite cette icône pour représenter votre espace de travail dans votre tableau de bord.

Étant donné que ce fichier peut être intégré à un contrôle de version (tel que Git), il s'agit d'un bon moyen d'aider tous les collaborateurs à voir la même icône pour votre projet lorsqu'ils utilisent IDX. Étant donné que le fichier peut varier d'une branche Git à l'autre, vous pouvez même distinguer visuellement les espaces de travail lorsque vous travaillez sur les versions "bêta" et "production" de votre application, par exemple.

Convertir vos personnalisations en modèle

Pour transformer la configuration de votre environnement en "environnement de démarrage" que n'importe qui peut utiliser pour créer des projets, consultez la documentation sur la création d'un modèle personnalisé.

Afficher toutes les options de personnalisation

Pour en savoir plus sur le schéma de configuration de l'environnement, consultez la documentation de référence sur dev.nix.