Personalizar o espaço de trabalho do IDX

O Project IDX permite que você adapte 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, da Terminal), como compiladores ou outros binários.
  • As extensões do ambiente de desenvolvimento integrado que você precisa instalar (por exemplo, a linguagem de programação) ).
  • Como as visualizações de apps vão aparecer (por exemplo, os comandos para executar o servidor da Web).
  • As 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 um uma descrição 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 os ambientes do espaço de trabalho. Nix é uma linguagem de programação funcional. Os atributos e bibliotecas de pacotes que você pode definir no arquivo dev.nix siga o conjunto de atributos da Nix sintaxe.

  • O gerenciador de pacotes Nix para gerenciar o ferramentas do sistema disponíveis para seu espaço de trabalho. Isso é semelhante às instâncias gerenciadores de pacotes, como APT (apt e apt-get), Homebrew (brew) e dpkg.

Como os ambientes Nix são reproduzíveis e declarativos, no contexto IDX, isso significa que você pode compartilhar seu arquivo de configuração Nix como parte da sua Repositório Git para garantir que todos que trabalham no projeto tenham o mesmo na configuração do ambiente de execução.

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 pacote Nix registro e adicione-o ao seu arquivo dev.nix Objeto packages 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 se costuma instalar pacotes de sistema usando Gerenciadores de pacotes específicos do SO, como APT (apt e apt-get), Homebrew (brew) e dpkg. Descrever de forma declarativa quais pacotes do sistema são necessário 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 em sua máquina local, os binários relacionados ao nó instalado localmente (ou seja, pacotes definidos no package.json) podem ser executados em uma Painel do terminal invocando-os com o npx comando.

Como conveniência, se você estiver em um diretório com um node_modules (como o diretório raiz de um projeto da Web), binários instalados localmente podem 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 IDX espaços de trabalho.

Se você precisar de mais componentes, adicione-os ao arquivo dev.nix da seguinte forma: Portanto:

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

Adicionar extensões do ambiente de desenvolvimento integrado

Você pode instalar extensões no IDX usando o OpenVSX de duas maneiras:

  • Usando 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 instalado automaticamente quando você compartilha a configuração do espaço de trabalho. Isso é 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, você pode incluir extensões do ambiente de desenvolvimento integrado no arquivo dev.nix. encontrando o ID de extensão totalmente qualificado (no formato <publisher>.<id>) e adicionando-o ao idx.extensions , da seguinte forma:

{ 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 você pode precisar 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 o services.* da referência dev.nix.

Personalizar visualizações

Para ver detalhes sobre como personalizar as visualizações do aplicativo, consulte a documentação do visualizações.

Ícone "Definir seu espaço de trabalho"

Para escolher um ícone personalizado para seu espaço de trabalho, insira um arquivo PNG chamado icon.png ao lado do arquivo dev.nix, dentro do diretório .idx. IDX vai usar esse ícone para representar seu espaço de trabalho no painel.

Como esse arquivo pode ser verificado no controle de origem (como o Git), esta é uma boa maneira de ajudar todos que trabalham em seu projeto a verem o mesmo ícone em seu ao usar o IDX. E, como o arquivo pode variar entre ramificações do Git, É possível até mesmo distinguir visualmente os espaços de trabalho ao trabalhar na versão "Beta" e "produção" versões do seu app, por exemplo.

Transformar suas personalizações em um modelo

Para transformar a configuração do ambiente em um "ambiente inicial" para qualquer pessoa para criar novos projetos, consulte a documentação sobre como criar um modelo.

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

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