DEV Community

Cover image for Como Usar Apidog no VS Code: Guia Completo
Lucas
Lucas

Posted on • Originally published at apidog.com

Como Usar Apidog no VS Code: Guia Completo

TL;DR

A extensão Apidog para VS Code permite enviar requisições API, gerenciar coleções, executar testes e compartilhar workspaces com sua equipe – tudo sem sair do seu editor. A configuração leva menos de cinco minutos: instale a extensão, faça login na sua conta gratuita do Apidog e seu workspace será carregado diretamente na barra lateral do VS Code.

Experimente o Apidog hoje

💡Apidog é uma plataforma gratuita e completa para desenvolvimento de API. A extensão do VS Code conecta seu editor diretamente ao seu workspace do Apidog para que você possa testar APIs, escrever documentação e colaborar com sua equipe sem trocar de janela. Experimente o Apidog gratuitamente, sem necessidade de cartão de crédito.

Introdução

O Apidog começou como um aplicativo de desktop para design, teste e documentação de API. Hoje, você pode usar a extensão para VS Code e acessar o mesmo workspace diretamente do seu editor, com coleções, ambientes e testes sincronizados em tempo real – seja no VS Code, aplicativo desktop ou interface web.

Veja como instalar, conectar seu workspace, enviar requisições, rodar testes e colaborar usando a extensão do VS Code junto com o aplicativo desktop.

Passo 1: Instale a extensão Apidog para VS Code

  1. Abra o VS Code e clique no ícone de Extensões na barra lateral esquerda (Ctrl+Shift+X ou Cmd+Shift+X).
  2. Pesquise por “Apidog” no Marketplace de Extensões.
  3. Encontre a extensão publicada por Apidog Inc. (ícone escuro com letras API estilizadas).
  4. Clique em Instalar.
  5. Após a instalação, um ícone do Apidog aparecerá na Barra de Atividades à esquerda.
  6. Clique no ícone do Apidog para abrir o painel do Apidog na barra lateral.

Passo 2: Faça login na sua conta Apidog

  1. No painel do Apidog, clique em Entrar.
  2. Uma aba do navegador será aberta para autenticação. Faça login com seu e-mail e senha ou crie uma conta gratuita.
  3. Após autenticar, volte ao VS Code (clique em “Abrir VS Code” ou troque de janela manualmente).
  4. O workspace do Apidog será carregado na barra lateral.

Visualização após login:

  • O painel mostra seu workspace em árvore, com coleções como pastas e requisições organizadas por estrutura.
  • No topo, há um menu para alternar ambientes (dev, staging, prod).
  • Suas coleções aparecem logo abaixo, expandidas por pastas e requisições.

Passo 3: Navegue pelas suas coleções

  • A barra lateral do Apidog no VS Code reflete fielmente a estrutura do seu workspace.
  • Navegue clicando na seta ao lado de coleções para expandir pastas e visualizar requisições.
  • Cada requisição é listada com um distintivo de cor para o método HTTP (GET verde, POST azul, PUT laranja, DELETE vermelho).
  • Clique em uma requisição para abri-la como uma aba no editor.

Busca rápida:

Use o campo de pesquisa no topo do painel Apidog para filtrar coleções por nome, URL ou método.

Alternar workspaces:

Se você tem múltiplos workspaces, use o seletor no topo do painel para alternar entre eles.

Passo 4: Envie requisições

  1. Clique em uma requisição na barra lateral.
  2. A interface traz:
    • Barra superior: menu com método HTTP, campo de URL e botão Enviar.
    • Abas abaixo: Params, Headers, Body, Auth, Pre-request Scripts, Tests, Settings.
  3. Ajuste método/URL conforme necessário.
  4. Adicione cabeçalhos na aba Headers.
  5. Se precisar de corpo (POST/PUT), preencha a aba Body (JSON, formulário, binário etc.).
  6. Clique em Enviar.

Resposta:

A resposta aparece na metade inferior da aba, mostrando status, tempo e tamanho. Veja o corpo (com syntax highlight para JSON/XML), cabeçalhos, cookies e resultados dos testes em abas separadas.

Ambientes:

Use o seletor de ambiente para alternar rapidamente entre dev/staging/prod. Variáveis como {{base_url}} ou {{token}} são resolvidas automaticamente.

Passo 5: Edite e crie requisições

Editar requisições:

  • Modifique qualquer requisição aberta, salve e as mudanças são sincronizadas com o workspace.

Criar nova requisição:

  1. Clique com o botão direito em uma coleção ou pasta na barra lateral.
  2. Selecione “Nova Requisição”.
  3. Preencha método, URL, cabeçalhos e corpo.
  4. Pressione Ctrl+S / Cmd+S para salvar.

A nova requisição aparece na barra lateral e pode ser acessada no desktop, web ou VS Code de outros membros da equipe.

Organize seu workspace:

  • Clique com o botão direito para renomear, mover, duplicar ou excluir requisições/pastas.
  • Reordene itens arrastando e soltando diretamente na barra lateral.

Passo 6: Execute testes

Você pode adicionar asserções de teste em JavaScript na aba Testes de cada requisição. Por exemplo:

pm.test("Status is 200", function () {
  pm.response.to.have.status(200);
});

pm.test("Response contains user id", function () {
  const json = pm.response.json();
  pm.expect(json.id).to.be.a('number');
});
Enter fullscreen mode Exit fullscreen mode

Após enviar a requisição, veja na aba Testes quais asserções passaram/falharam.

Executar uma coleção:

  • Clique com o botão direito em uma coleção ou pasta e selecione “Executar Coleção”.
  • Defina número de iterações, delays e ambiente.
  • Clique em Executar para rodar todas as requisições em sequência; veja os resultados detalhados de cada teste.

Passo 7: Use a extensão do VS Code e o aplicativo de desktop juntos

A extensão e o aplicativo desktop compartilham os mesmos dados em tempo real. Exemplos de fluxo de trabalho:

  • Design no desktop, teste no VS Code: Defina esquemas/documentação/mocks no desktop, depois teste endpoints e escreva testes no VS Code.
  • Revisão de API em equipe: Backend atualiza endpoint no desktop, frontend vê atualização instantânea no VS Code.
  • Escrita de testes no contexto: Consuma a API enquanto desenvolve, sem sair do VS Code – execute e teste endpoints conforme codifica.

O que fazer no desktop:

Design de esquema, configuração de mocks, publicação de documentação e gerenciamento de ambientes grandes são tarefas mais práticas no aplicativo desktop.

Passo 8: Compartilhe com sua equipe

  1. No desktop ou web do Apidog, acesse configurações do workspace.
  2. Convide colegas pelo e-mail.
  3. Após aceitarem e instalarem a extensão do VS Code, todos verão as mesmas coleções sincronizadas.
  4. Modificações são propagadas em tempo real – sem git, exportação de arquivos ou conflitos de merge.

A camada gratuita suporta até três usuários, com sincronização automática via nuvem Apidog.

FAQ

A extensão Apidog para VS Code funciona sem o aplicativo de desktop?

Sim, a extensão é um cliente completo para seu workspace Apidog. Não é necessário instalar o aplicativo desktop.

Posso usar a extensão Apidog para VS Code offline?

É possível visualizar e editar coleções em cache offline. Enviar requisições externas e sincronizar mudanças exige internet. O suporte offline pleno depende do estado do cache do seu workspace.

Como importar coleções do Thunder Client ou Postman?

No desktop ou web do Apidog, use a opção Importar e selecione o formato (Thunder Client JSON, Postman v2.1, OpenAPI etc). As coleções importadas aparecem automaticamente no VS Code.

A extensão do VS Code cria um novo projeto no Apidog?

Não. Ela conecta ao workspace existente. Crie e gerencie workspaces no desktop ou web; a extensão é um cliente para trabalhar neles via VS Code.

Várias pessoas podem editar a mesma coleção ao mesmo tempo?

Sim. Não há bloqueio de edição. Se dois usuários editarem simultaneamente, a última gravação prevalece. Para colaboração coordenada, use os recursos colaborativos do desktop.

A extensão suporta autocompletar variáveis de ambiente?

Sim. Ao digitar {{ em campos de URL/parâmetro, a extensão sugere variáveis do ambiente ativo para evitar erros de digitação.

A extensão Apidog para VS Code é ideal para desenvolvedores que já trabalham com APIs no VS Code. Em poucos minutos, tenha coleções, ambientes e workspace da equipe acessíveis sem alternar de janela.

Top comments (0)