Personaliza tu lugar de trabajo de IDX

El IDX de proyecto te permite adaptar tu lugar de trabajo a las necesidades únicas de tu proyecto. Para ello, define un solo archivo de configuración .idx/dev.nix que describa lo siguiente:

  • Las herramientas del sistema que necesitas para poder ejecutar (por ejemplo, desde la Terminal), como compiladores o otros objetos binarios
  • Las extensiones de IDE que debes tener instaladas (por ejemplo, compatibilidad con lenguajes de programación)
  • Cómo deben aparecer las vistas previas de la app (por ejemplo, los comandos para ejecutar el servidor web)
  • Variables de entorno globales disponibles para los servidores locales que se ejecutan en tu espacio de trabajo.

Consulta la referencia de dev.nix para obtener una descripción completa de lo que está disponible.

Nix y IDX

IDX usa Nix para definir la configuración del entorno de cada lugar de trabajo. Específicamente, IDX usa lo siguiente:

Debido a que los entornos de Nix son reproducibles y declarativos, en el contexto de IDX, esto significa que puedes compartir tu archivo de configuración de Nix como parte de tu repositorio de Git para asegurarte de que todas las personas que trabajan en tu proyecto tengan la misma configuración de entorno.

Un ejemplo básico

En el siguiente ejemplo, se muestra una configuración de entorno básica que habilita las vistas previas:

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

Agrega herramientas del sistema

Para agregar herramientas del sistema a tu espacio de trabajo, como compiladores o programas de CLI para servicios en la nube, busca el ID de paquete único en el registro de paquetes de Nix y agrégalo al objeto packages de tu archivo dev.nix, con el prefijo "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
  ];
  ...
}

Esto es diferente de la forma en que sueles instalar paquetes del sistema con administradores de paquetes específicos del SO, como APT (apt y apt-get), Homebrew (brew) y dpkg. Describir de forma declarativa exactamente qué paquetes del sistema se necesitan significa que los espacios de trabajo de IDX son más fáciles de compartir y reproducir.

Usa objetos binarios de nodos locales

Al igual que en tu máquina local, los objetos binarios relacionados con los paquetes de nodos instalados de forma local (es decir, los paquetes definidos en tu package.json) se pueden ejecutar en un panel de la terminal invocándolos con el comando npx.

Como comodidad adicional, si estás en un directorio con una carpeta node_modules (como el directorio raíz de un proyecto web), se pueden invocar directamente los objetos binarios instalados de forma local, sin el prefijo npx.

Agrega componentes gcloud

Hay disponible una configuración predeterminada de la CLI de gcloud para Google Cloud para todos los espacios de trabajo de IDX.

Si necesitas componentes adicionales, puedes agregarlos a tu archivo dev.nix de la siguiente manera:

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

Agrega extensiones de IDE

Puedes instalar extensiones en IDX con el registro de extensiones OpenVSX de dos maneras:

  • Usando el panel Extensiones en IDX para descubrir e instalar extensiones. Este enfoque es mejor para las extensiones específicas del usuario, como las siguientes:

    • Temas de colores personalizados
  • Agregar extensiones al archivo dev.nix Estas extensiones se instalarán automáticamente cuando compartas la configuración de tu lugar de trabajo. Este enfoque es mejor para las extensiones específicas del proyecto, como las siguientes:

    • Extensiones de lenguaje de programación, incluidos depuradores específicos del lenguaje
    • Extensiones oficiales para los servicios en la nube que se usan en tu proyecto
    • Formateadores de código

Para el último enfoque, puedes incluir extensiones de IDE en tu archivo dev.nix. Para ello, busca el ID de extensión completamente calificado (del formulario <publisher>.<id>) y agrégalo al objeto idx.extensions de la siguiente manera:

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

Agrega servicios comunes

IDX también ofrece una configuración simplificada para los servicios comunes que podrías necesitar durante el desarrollo, incluidos los siguientes:

  • Contenedores
    • Docker (services.docker.*)
  • Mensajes
    • Emulador de Pub/Sub (services.pubsub.*)
  • Bases de datos
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Para obtener detalles sobre cómo habilitar estos servicios en tu lugar de trabajo, consulta las secciones de services.* de la referencia de dev.nix.

Personaliza las vistas previas

Para obtener más información sobre cómo personalizar las vistas previas de tu app, consulta la documentación sobre las vistas previas.

Establece el ícono de tu lugar de trabajo

Para elegir un ícono personalizado para tu lugar de trabajo, coloca un archivo PNG llamado icon.png junto al archivo dev.nix, dentro del directorio .idx. Luego, IDX usará este ícono para representar tu lugar de trabajo en el panel.

Debido a que este archivo se puede verificar en el control de código fuente (como Git), es una buena manera de ayudar a que todas las personas que trabajan en tu proyecto vean el mismo ícono para tu proyecto cuando usan IDX. Y como el archivo puede variar entre las ramas de Git, incluso puedes distinguir visualmente los espacios de trabajo cuando trabajas en versiones "beta" y "producción" de tu app, por ejemplo.

Convierte tus personalizaciones en una plantilla

Para convertir la configuración de tu entorno en un "entorno inicial" con el que cualquier persona pueda compilar proyectos nuevos, consulta la documentación para crear una plantilla personalizada.

Cómo ver todas las opciones de personalización

Consulta la referencia de dev.nix para obtener una descripción detallada del esquema de configuración del entorno.