Personaliza tu lugar de trabajo de IDX

Project IDX te permite adaptar el lugar de trabajo a las necesidades únicas de tu proyecto definiendo un único archivo de configuración .idx/dev.nix que describa lo siguiente:

  • Las herramientas del sistema que necesitas poder ejecutar (por ejemplo, desde la terminal), como otros objetos binarios o compiladores
  • Las extensiones IDE que debes instalar (por ejemplo, la compatibilidad con el lenguaje de programación)
  • Cómo deberían aparecer las vistas previas de la app (por ejemplo, los comandos para ejecutar tu servidor web).
  • Las variables de entorno globales disponibles para los servidores locales que se ejecutan en tu lugar de trabajo

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

IDX y Nix

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, puedes compartir tu archivo de configuración de Nix como parte de tu repositorio de Git para asegurarte de que todos los que trabajan en tu proyecto tengan la misma configuración del entorno.

Un ejemplo básico

En el siguiente ejemplo, se muestra una configuración básica del entorno 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";
      };
    };
  };
}

Agrega herramientas del sistema

Para agregar herramientas del sistema a tu lugar de trabajo, como compiladores o programas de CLI para servicios en la nube, busca el ID del paquete único en el registro de paquetes Nix y agrégalo al objeto packages del 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, por lo general, puedes instalar paquetes del sistema con administradores de paquetes específicos del SO, como APT (apt y apt-get), Homebrew (brew) y dpkg. Si se describen de manera declarativa los paquetes de sistema que se necesitan, los espacios de trabajo de IDX serán 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 localmente (es decir, los paquetes definidos en tu package.json) se pueden ejecutar en un panel de la terminal si los invocas con el comando npx.

Para mayor comodidad, 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 localmente, sin el prefijo npx.

Cómo agregar componentes de gcloud

Una configuración predeterminada de la CLI de gcloud para Google Cloud está disponible para todos los lugares 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
    ])
    ...
  ];
}

Cómo agregar extensiones de IDE

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

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

    • Temas de color personalizados

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

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

Para este último enfoque, puedes incluir extensiones de IDE en tu archivo dev.nix. Para ello, busca el ID de extensión completamente calificado (con el formato <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"
  ];
  ...
}

Cómo agregar servicios comunes

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

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

Si deseas obtener detalles para habilitar estos servicios en tu lugar de trabajo, consulta las partes services.* de la referencia de dev.nix.

Personalizar vistas previas

Si quieres obtener detalles para personalizar las vistas previas de tu app, consulta la documentación sobre vistas previas.

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.