Personalizar o espaço de trabalho do IDX

Com o Project IDX, você pode adaptar seu espaço de trabalho às necessidades exclusivas do seu projeto definindo um único arquivo de configuração .idx/dev.nix que descreve:

  • As ferramentas do sistema que você precisa para executar (por exemplo, no terminal), como compiladores ou outros binários.
  • As extensões do ambiente de desenvolvimento integrado que você precisa instalar (por exemplo, suporte à linguagem de programação).
  • Como as visualizações de apps vão aparecer, por exemplo, os comandos para executar o servidor da Web.
  • Variáveis de ambiente globais disponíveis para os servidores locais em execução no seu espaço de trabalho.

Consulte a referência do dev.nix para uma descrição completa do que está disponível.

Nix e IDX

O IDX usa o Nix para definir a configuração do ambiente para cada espaço de trabalho. Especificamente, o IDX usa:

  • A linguagem de programação Nix para descrever ambientes de espaço de trabalho. Nix é uma linguagem de programação funcional. Os atributos e as bibliotecas de pacotes que você pode definir no arquivo dev.nix seguem a sintaxe do conjunto de atributos Nix.

  • O gerenciador de pacotes Nix para gerenciar as ferramentas do sistema disponíveis para seu espaço de trabalho. Isso é semelhante a gerenciadores de pacotes específicos do SO, como APT (apt e apt-get), Homebrew (brew) e dpkg.

Como os ambientes Nix são reproduzíveis e declarativos, no contexto do IDX, isso significa que é possível compartilhar o arquivo de configuração Nix como parte do repositório Git para garantir que todos que trabalham no projeto tenham a mesma configuração de ambiente.

Um exemplo simples

No exemplo a seguir, mostramos uma configuração de ambiente básica que permite visualizações:

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

Adicionar ferramentas do sistema

Para adicionar ferramentas do sistema ao espaço de trabalho, como compiladores ou programas CLI para serviços em nuvem, encontre o ID do pacote exclusivo no registro de pacotes NX e o adicione ao objeto packages do arquivo dev.nix, com o prefixo "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
  ];
  ...
}

Isso é diferente de como você normalmente instala pacotes do sistema usando gerenciadores de pacotes específicos do SO, como APT (apt e apt-get), Homebrew (brew) e dpkg. Descrever de forma declarativa exatamente quais pacotes do sistema são necessários significa que os espaços de trabalho IDX são mais fáceis de compartilhar e reproduzir.

Usar binários de nós locais

Assim como na máquina local, os binários relacionados aos pacotes de nós instalados localmente (ou seja, pacotes definidos no package.json) podem ser executados em um painel Terminal invocando-os com o comando npx.

Como conveniência extra, se você estiver em um diretório com uma pasta node_modules (como o diretório raiz de um projeto da Web), os binários instalados localmente poderão ser invocados diretamente, sem o prefixo npx.

Adicionar componentes gcloud

Uma configuração padrão da CLI gcloud para o Google Cloud está disponível para todos os espaços de trabalho do IDX.

Se você precisar de mais componentes, poderá adicioná-los ao arquivo dev.nix da seguinte forma:

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

Adicionar extensões do ambiente de desenvolvimento integrado

É possível instalar extensões no IDX usando o registro de extensões OpenVSX de duas maneiras:

  • Use o painel Extensões no IDX para descobrir e instalar extensões. Essa abordagem é melhor para extensões específicas do usuário, como:

    • Temas de cores personalizados

  • Adicionando extensões ao arquivo dev.nix. Essas extensões serão instaladas automaticamente quando você compartilhar a configuração do espaço de trabalho. Essa abordagem é melhor para extensões específicas do projeto, como:

    • Extensões de linguagem de programação, incluindo depuradores específicos de linguagem
    • Extensões oficiais para serviços de nuvem usados no seu projeto
    • Formatadores de código

Na última abordagem, inclua extensões do ambiente de desenvolvimento integrado no arquivo dev.nix encontrando o ID da extensão totalmente qualificado (no formato <publisher>.<id>) e adicionando-o ao objeto idx.extensions da seguinte maneira:

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

Adicionar serviços comuns

O IDX também oferece configuração simplificada para serviços comuns que podem ser necessários durante o desenvolvimento, incluindo:

  • Contêineres
    • Docker (services.docker.*)
  • Mensagens
    • Emulador do Pub/Sub (services.pubsub.*)
  • Bancos de dados
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Para detalhes sobre como ativar esses serviços no seu espaço de trabalho, consulte as partes services.* da referência dev.nix.

Personalizar visualizações

Para saber como personalizar as visualizações de apps, consulte a documentação sobre visualizações.

Ver todas as opções de personalização

Consulte a referência do dev.nix para uma descrição detalhada do esquema de configuração do ambiente.