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