📦 Simply Component Library v1.2.0
Kit de sobrevivência Laravel 10 para concursos e provas práticas.
Snippets, Comandos Geradores e CSS Prontos para uso imediato.
🎉 Novidades v1.2.0
⚡ 8 Novos Comandos
Gere arquivos automaticamente sem sair do VS Code:
| Atalho |
Comando |
O que faz |
Ctrl+Shift+S |
Abrir Documentação |
Abre documentação interativa |
Ctrl+Alt+R |
Gerar CRUD Completo |
Migration + Model + Controller + Requests + Policy + Views + Rotas (10 arquivos!) |
Ctrl+Alt+M |
Gerar Model |
Cria Model com fillable, casts, scopes |
Ctrl+Alt+C |
Gerar Controller |
Cria Controller CRUD completo |
Ctrl+Alt+G |
Gerar Migration |
Cria migration com campos comuns |
Ctrl+Alt+V |
Gerar Views |
Cria index, create, edit Blade |
Ctrl+Alt+P |
Gerar Policy |
Cria Policy com lógica admin/dono |
Ctrl+Alt+I |
Instalar Assets |
Copia CSS/JS para public/ |
Ctrl+Alt+D |
Gerar Dashboard |
Cria DashboardController + view |
📖 Documentação Expandida
- Nova aba "Comandos" com documentação completa de todos os comandos
- Preview visual dos componentes gerados
- Seção "Combinações Poderosas" mostrando snippets que funcionam juntos
- Busca com filtros por tipo (Blade, PHP, JS, CSS)
- Novos tutoriais: Blog e Mini CRM
- Seção "Dicas de Produtividade"
📋 O que está incluso
| Categoria |
Qtd |
Detalhes |
| Snippets Blade |
24 |
Layout, Navbar, Forms, Table, Fields, Alerts, etc. |
| Snippets PHP |
10 |
Model, Controller, Policy, Migration, Seeder, etc. |
| Snippets JS |
2 |
Confirm Delete, Auto-close Alert |
| Snippets CSS |
2 |
Custom Vars, Custom Component |
| Snippets HTML |
1 |
HTML Base com assets SCL |
| Comandos |
9 |
CRUD, Model, Controller, Views, Migration, Policy, Assets, Dashboard |
| Assets CSS |
4 |
Reset, Layout, Components, Utilities |
| Assets JS |
1 |
Main (confirm, alerts, menu toggle) |
🔧 Instalação
1. Empacotar a extensão
npm install -g @vscode/vsce
cd simply-component-library
vsce package
2. Instalar no VS Code
code --install-extension simply-component-library-1.2.0.vsix
3. Instalar Assets no Projeto Laravel
Dentro do VS Code com seu projeto aberto:
- Pressione
Ctrl+Alt+I
- Os arquivos CSS e JS serão copiados automaticamente para
public/css/ e public/js/
4. Referência no Layout
<link rel="stylesheet" href="{{ asset('css/scl-reset.css') }}">
<link rel="stylesheet" href="{{ asset('css/scl-layout.css') }}">
<link rel="stylesheet" href="{{ asset('css/scl-components.css') }}">
<link rel="stylesheet" href="{{ asset('css/scl-utilities.css') }}">
<script src="{{ asset('js/scl-main.js') }}"></script>
🚀 Fluxo de Trabalho Completo
Para concursos/provas (tempo estimado: ~10 min por CRUD)
1. laravel new projeto && cd projeto
2. Configurar .env (banco de dados)
3. Ctrl+Alt+I → Instalar assets CSS/JS
4. Criar layout → snippet scl-layout + scl-navbar + scl-footer
5. Ctrl+Alt+R → Gerar CRUD (ex: Produto) → 10 arquivos!
6. Ajustar campos (migration, model, views)
7. Copiar rotas → routes/web.php
8. Ctrl+Alt+D → Gerar Dashboard
9. php artisan migrate --seed
10. php artisan serve → Testar! 🎉
✂️ Catálogo de Snippets
Blade (24 snippets)
| Prefixo |
Descrição |
scl-layout |
Layout base com assets CSS/JS, navbar e footer |
scl-navbar |
Navbar fixa com links, auth, menu mobile |
scl-footer |
Footer fixo com copyright |
scl-page-header |
Cabeçalho com título e botão de ação |
scl-dashboard |
Cards de estatísticas |
scl-card |
Card com header, body, footer |
scl-table |
Tabela com @forelse, empty state, ações |
scl-filter |
Formulário de filtro com search e select |
scl-pagination |
Paginação Laravel |
scl-empty-state |
Mensagem quando não há dados |
scl-form-create |
Formulário de criação com @csrf |
scl-form-edit |
Formulário de edição com @method('PUT') |
scl-field-text |
Campo text com old() e @error |
scl-field-email |
Campo email |
scl-field-password |
Campo password |
scl-field-number |
Campo numérico |
scl-field-textarea |
Textarea |
scl-field-select |
Select com @foreach |
scl-field-date |
Campo date |
scl-alert |
Alerta flash session |
scl-badge |
Badge com cores condicionais |
scl-can-edit |
Botão editar com @can |
scl-can-delete |
Form delete com @can e confirmação |
scl-auth-check |
Bloco @auth/@guest |
PHP (10 snippets)
| Prefixo |
Descrição |
scl-model |
Model com $fillable, $casts, scopes, relacionamentos |
scl-controller-full |
Controller CRUD completo |
scl-request-store |
FormRequest para store |
scl-request-update |
FormRequest para update com Rule::unique()->ignore() |
scl-policy |
Policy completa (viewAny, view, create, update, delete) |
scl-middleware-admin |
Middleware AdminOnly |
scl-routes-full |
Rotas com middleware auth e admin |
scl-migration-full |
Migration com campos comuns |
scl-seeder-basic |
Seeder com admin e usuário teste |
scl-dashboard-controller |
DashboardController |
JavaScript (2 snippets)
| Prefixo |
Descrição |
scl-confirm-delete |
Confirmação antes de excluir |
scl-alert-auto-close |
Auto-fechamento de alertas |
CSS (2 snippets)
| Prefixo |
Descrição |
scl-custom-vars |
Variáveis CSS (:root) |
scl-custom-component |
Template para componente CSS |
HTML (1 snippet)
| Prefixo |
Descrição |
scl-html-base |
HTML5 base com assets SCL |
📖 Documentação Adicional
- Documentação Interativa:
Ctrl+Shift+S no VS Code
- Tutorial CRUD Genérico:
docs/examples/crud-generico.md
- Tutorial Estoque:
docs/examples/tutorial-estoque.md
- Guia MySQL:
docs/examples/mysql.md
- Guia Oracle:
docs/examples/oracle.md
- Blueprints:
docs/examples/blueprints.md
📁 Estrutura da Extensão
simply-component-library/
├── extension.js ← 9 comandos registrados
├── package.json ← Manifesto com atalhos e comandos
├── icon.png
├── README.md
├── CHANGELOG.md
├── snippets/
│ ├── blade.code-snippets ← 24 snippets Blade
│ ├── php.code-snippets ← 10 snippets PHP
│ ├── js.code-snippets ← 2 snippets JS
│ ├── css.code-snippets ← 2 snippets CSS
│ └── html.code-snippets ← 1 snippet HTML
├── assets/
│ ├── css/
│ │ ├── scl-reset.css
│ │ ├── scl-layout.css
│ │ ├── scl-components.css
│ │ └── scl-utilities.css
│ └── js/
│ └── scl-main.js
└── docs/
├── index.html ← Documentação interativa (8 abas)
└── examples/
├── crud-generico.md
├── tutorial-estoque.md
├── mysql.md
├── oracle.md
└── blueprints.md
📜 Regras da Extensão
- ✅ Todo código gerado é funcional — copie, ajuste campos e use
- ✅ Focado em Laravel 10 + Blade — sem frameworks JS modernos
- ✅ CSS próprio leve — sem Bootstrap, Tailwind ou dependências externas
- ✅ Snippets usam Tab stops para navegação rápida entre campos
- ✅ Comandos validam entrada e mostram mensagens de erro amigáveis
- ✅ Documentação interativa integrada ao VS Code
📄 Licença
MIT © fabianogdb
| |
