Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Slash HTTPNew to Visual Studio Code? Get it now.
Slash HTTP

Slash HTTP

Wildes Piva

|
9 installs
| (0) | Free
Execute HTTP requests directly from VS Code with workspace management using Slash HTTP
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Slash HTTP

Uma extensão do VS Code para executar requisições HTTP diretamente do editor, com gerenciamento de workspaces, collections, environments e histórico completo.

✨ Funcionalidades

🚀 Execução de Requisições

  • Execute requisições HTTP diretamente do VS Code
  • Suporte a todos os métodos HTTP (GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS)
  • Visualização de respostas formatadas
  • Histórico completo de execuções

🗂️ Gerenciamento de Workspaces

  • Workspaces: Organize suas requisições em projetos
  • Collections: Agrupe requisições relacionadas
  • Requests: Requisições individuais com configuração completa
  • Hierarquia visual: Interface em árvore na barra lateral

🌍 Sistema de Environments

  • Environments: Configure diferentes ambientes (dev, staging, prod)
  • Variáveis de ambiente: Defina variáveis dinâmicas para URLs, headers, etc.
  • Substituição automática: Variáveis são substituídas automaticamente nas requisições
  • Environment ativo: Selecione qual environment usar por workspace
  • Variáveis secretas: Marque variáveis sensíveis como secretas

🎨 Interface Moderna

  • Ícones intuitivos: Cada ação tem seu ícone correspondente
  • Cores por status: Requisições coloridas baseadas no status da última execução
  • Contadores: Veja quantas collections e requests cada workspace tem
  • Tooltips informativos: Informações detalhadas ao passar o mouse

📥 Importação de cURL

  • Importe comandos cURL: Cole qualquer comando cURL e importe automaticamente
  • Preview antes da importação: Veja os detalhes antes de confirmar
  • Suporte completo: Headers, body, autenticação, cookies, etc.
  • Validação inteligente: Detecta e valida comandos cURL

📋 Editor de Requisições

  • Interface web: Editor moderno para criar e editar requisições
  • Headers e body: Configure todos os parâmetros da requisição
  • Validação em tempo real: Validação de URLs e parâmetros
  • Ações rápidas: Execute, salve ou exporte para cURL

🔄 Operações CRUD Completas

  • Create: Crie workspaces, collections, requests e environments
  • Read: Visualize e execute requisições
  • Update: Edite configurações existentes
  • Delete: Remova itens desnecessários
  • Duplicate: Duplique requisições rapidamente

💾 Persistência

  • Salvamento automático: Todas as alterações são salvas automaticamente
  • Histórico persistente: Histórico de execuções mantido entre sessões

🎯 Como Usar

1. Instalação

  1. Clone este repositório
  2. Execute npm install
  3. Execute npm run compile
  4. Pressione F5 no VS Code para executar a extensão

2. 🎉 Workspace de Exemplo Pré-Importado

Novo na versão 0.0.2! A extensão agora vem com um workspace de exemplo completo:

  • ✅ 5 Collections com diferentes tipos de requests
  • ✅ 25+ Requests prontos para uso
  • ✅ Ambiente de desenvolvimento configurado
  • ✅ Variáveis de ambiente pré-definidas

Collections incluídas:

  • Basic HTTP Methods: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS
  • Advanced Requests: Headers customizados, JSON complexo, Form data
  • Error Testing: Códigos de erro HTTP, timeouts
  • Response Testing: JSON, XML, HTML, compressão
  • Real World APIs: GitHub, IP Geolocation, Random User, Dog API

Para começar rapidamente:

  1. Abra a extensão pela primeira vez
  2. O workspace de exemplo será carregado automaticamente
  3. Execute qualquer request para testar
  4. Modifique conforme suas necessidades

3. Criando sua Primeira Requisição

Opção A: Interface Visual

  1. Crie um workspace: Clique no ícone ➕ na barra lateral
  2. Crie uma collection: Clique no ícone ➕ ao lado do workspace
  3. Crie uma requisição: Clique no ícone ➕ ao lado da collection
  4. Configure a requisição: Método, URL, headers, body
  5. Execute: Clique no ícone ▶️ ao lado da requisição

Opção B: Importação de cURL

  1. Clique no ícone de terminal na barra lateral (Import from cURL)
  2. Cole um comando cURL, por exemplo:
    curl -X POST "https://jsonplaceholder.typicode.com/posts" \
         -H "Content-Type: application/json" \
         -d '{"title": "Test Post", "body": "This is a test", "userId": 1}'
    
  3. Confirme a importação após ver o preview
  4. Selecione uma collection para salvar
  5. Execute a requisição importada

4. Configurando Environments

  1. Crie um environment: Clique no ícone ➕ na seção Environments
  2. Adicione variáveis: Configure variáveis como baseUrl, apiKey, etc.
  3. Marque como ativo: Clique no ícone ✅ para ativar o environment
  4. Use nas requisições: As variáveis serão substituídas automaticamente

5. Executando Requisições

  • Requisição individual: Clique no ícone ▶️
  • Editar requisição: Clique no ícone ✏️ para abrir o editor

🎨 Interface da Barra Lateral

Ícones e Cores

  • 📁 Workspaces: Ícone de pasta
  • 📚 Collections: Ícone de biblioteca
  • 🌐 Requests: Ícones por método HTTP:
    • 🔵 GET: Azul
    • 🟢 POST: Verde
    • 🟠 PUT: Laranja
    • 🔴 DELETE: Vermelho
    • 🟣 PATCH: Roxo
    • 🔵 HEAD: Azul
    • ⚪ OPTIONS: Cinza
  • 🌍 Environments: Ícone de globo

Status de Execução

  • ✅ Verde: Status 2xx (sucesso)
  • 🟡 Amarelo: Status 3xx (redirecionamento)
  • 🟠 Laranja: Status 4xx (erro do cliente)
  • 🔴 Vermelho: Status 5xx (erro do servidor)

Ações por Contexto

  • Workspaces: ➕ (criar collection), 🗑️ (excluir), ✏️ (renomear)
  • Collections: ➕ (criar request), 🗑️ (excluir), ✏️ (renomear)
  • Requests: ▶️ (executar), ✏️ (editar), 📋 (duplicar), 🗑️ (excluir)
  • Environments: ➕ (criar variável), ✅ (ativar), 🗑️ (excluir)

📥 Importação de cURL

Comandos Suportados

# GET simples
curl https://api.example.com/users

# POST com JSON
curl -X POST "https://api.example.com/users" \
     -H "Content-Type: application/json" \
     -d '{"name": "John", "email": "john@example.com"}'

# Com autenticação
curl -H "Authorization: Bearer your-token" \
     -H "Accept: application/json" \
     "https://api.example.com/protected"

# Com cookies
curl -b "session=abc123" "https://api.example.com/profile"

# Com user agent
curl -A "MyApp/1.0" "https://api.example.com/data"

Funcionalidades da Importação

  • ✅ Parse inteligente: Detecta método, URL, headers, body
  • ✅ Autenticação: Basic Auth e Bearer tokens
  • ✅ Content-Type: Detecta automaticamente JSON vs form data
  • ✅ Preview: Mostra detalhes antes de importar
  • ✅ Validação: Verifica se é um comando cURL válido

🌍 Sistema de Environments

Configuração de Variáveis

{
  "baseUrl": "https://api.example.com",
  "apiKey": "your-api-key",
  "version": "v1",
  "timeout": "5000"
}

Uso nas Requisições

  • URL: {{baseUrl}}/users → https://api.example.com/users
  • Headers: Authorization: Bearer {{apiKey}}
  • Body: {"version": "{{version}}"}

Funcionalidades

  • ✅ Múltiplos environments: Dev, staging, prod
  • ✅ Variáveis secretas: Proteja informações sensíveis
  • ✅ Substituição automática: Aplicada em URLs, headers e body
  • ✅ Environment ativo: Um environment por workspace

📋 Editor de Requisições

Funcionalidades

  • Interface web moderna: Editor intuitivo e responsivo
  • Validação em tempo real: Verifica URLs e parâmetros
  • Preview de requisição: Veja como ficará a requisição final
  • Histórico integrado: Acesse histórico de execuções
  • Export para cURL: Gere comandos cURL automaticamente

🔧 Comandos Disponíveis

Comandos Principais

  • slashHttp.runRequest - Executa uma requisição
  • slashHttp.createRequest - Cria nova requisição
  • slashHttp.importFromCurl - Importa de cURL
  • slashHttp.editRequest - Edita requisição

Comandos de Workspace

  • slashHttp.createWorkspace - Cria workspace
  • slashHttp.createCollection - Cria collection
  • slashHttp.createRequestItem - Cria requisição
  • slashHttp.deleteWorkspace - Exclui workspace
  • slashHttp.renameWorkspace - Renomeia workspace

Comandos de Environment

  • slashHttp.createEnvironment - Cria environment
  • slashHttp.setActiveEnvironment - Define environment ativo
  • slashHttp.createEnvironmentVariable - Cria variável de environment
  • slashHttp.editEnvironmentVariable - Edita variável
  • slashHttp.deleteEnvironment - Exclui environment

Comandos de Requisição

  • slashHttp.editRequest - Edita requisição
  • slashHttp.deleteRequest - Exclui requisição
  • slashHttp.duplicateRequest - Duplica requisição
  • slashHttp.exportToCurl - Exporta para cURL

⌨️ Atalhos de Teclado

  • Ctrl+Shift+R (ou Cmd+Shift+R no Mac): Executa requisição selecionada

🏗️ Estrutura do Projeto

src/
├── extension.ts              # Ponto de entrada da extensão
├── types.ts                  # Definições de tipos
├── WorkspaceManager.ts       # Gerenciamento de workspaces
├── HttpRequestProvider.ts    # Provider da view da barra lateral (removido)
├── RequestExecutor.ts        # Execução de requisições
├── RequestHistory.ts         # Histórico de execuções (removido)
├── RequestEditorPanel.ts     # Painel de criação/edição
├── EnvironmentEditorPanel.ts # Editor de environments
├── CurlImporter.ts          # Importação de cURL
└── webview/                 # Arquivos do webview
    ├── requestEditor/
    ├── environmentEditor/
    └── history/

🚀 Próximas Funcionalidades

  • [ ] Execução em lote: Execute collections e workspaces inteiros
  • [ ] Testes automatizados: Validação de respostas
  • [ ] Pre-request scripts: Scripts antes da execução
  • [ ] Post-request scripts: Scripts após a execução
  • [ ] Autenticação OAuth: Suporte a OAuth 2.0
  • [ ] WebSocket: Suporte a WebSocket
  • [ ] GraphQL: Suporte nativo a GraphQL
  • [ ] Export/Import: Exporte e importe workspaces
  • [ ] Sync GIT: Usar o seu proprio repo com o arquivo json para armazenar
  • [ ] Sincronização: Sincronize workspaces entre dispositivos

🤝 Contribuindo

  1. Fork o projeto
  2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
  3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
  4. Push para a branch (git push origin feature/AmazingFeature)
  5. Abra um Pull Request

📄 Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

🙏 Agradecimentos

  • VS Code Extension API
  • Axios para requisições HTTP
  • Comunidade open source

Desenvolvido com ❤️ para a comunidade de desenvolvedores

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft