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

Clone este repositório
Execute npm install
Execute npm run compile
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:

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

3. Criando sua Primeira Requisição

Opção A: Interface Visual

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

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

Clique no ícone de terminal na barra lateral (Import from cURL)

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}'

Confirme a importação após ver o preview
Selecione uma collection para salvar
Execute a requisição importada

4. Configurando Environments

Crie um environment: Clique no ícone ➕ na seção Environments
Adicione variáveis: Configure variáveis como baseUrl, apiKey, etc.
Marque como ativo: Clique no ícone ✅ para ativar o environment
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

Fork o projeto
Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
Commit suas mudanças (git commit -m 'Add some AmazingFeature')
Push para a branch (git push origin feature/AmazingFeature)
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

Slash HTTP

Wildes Piva

Slash HTTP

✨ Funcionalidades

🚀 Execução de Requisições

🗂️ Gerenciamento de Workspaces

🌍 Sistema de Environments

🎨 Interface Moderna

📥 Importação de cURL

📋 Editor de Requisições

🔄 Operações CRUD Completas

💾 Persistência

🎯 Como Usar

1. Instalação

2. 🎉 Workspace de Exemplo Pré-Importado

3. Criando sua Primeira Requisição

Opção A: Interface Visual

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

4. Configurando Environments

5. Executando Requisições

🎨 Interface da Barra Lateral

Ícones e Cores

Status de Execução

Ações por Contexto

📥 Importação de cURL

Comandos Suportados

Funcionalidades da Importação

🌍 Sistema de Environments

Configuração de Variáveis

Uso nas Requisições

Funcionalidades

📋 Editor de Requisições

Funcionalidades

🔧 Comandos Disponíveis

Comandos Principais

Comandos de Workspace

Comandos de Environment

Comandos de Requisição

⌨️ Atalhos de Teclado

🏗️ Estrutura do Projeto

🚀 Próximas Funcionalidades

🤝 Contribuindo

📄 Licença

🙏 Agradecimentos