📦 Component Library — Kit de Desenvolvimento Laravel para VS Code (v2.1.0)

Extensão completa para VS Code com 104 snippets, 4 comandos automáticos, gerador de Scaffold CRUD avançado, módulo de Auth & Permissions, instalação de CSS Assets e documentação interativa. Tudo para desenvolver aplicações Laravel com produtividade máxima.

📋 Índice

• Visão Geral
• Instalação e Setup
• Comandos da Extensão
• Catálogo Completo de Snippets
  • Blade (24 snippets)
  • PHP (9 snippets)
  • HTML (34 snippets)
  • CSS (25 snippets)
  • JavaScript (12 snippets)
• Guia Mestre — Como Criar Qualquer Aplicação Laravel
• Blueprints de Aplicações Reais
• Fluxo Real de Trabalho (DX)
• Boas Práticas
• Troubleshooting

🎯 Visão Geral

O que é

A Component Library é uma extensão VS Code que acelera o desenvolvimento Laravel oferecendo:

• 104 snippets organizados por linguagem (Blade, PHP, HTML, CSS, JS)
• Gerador de Scaffold CRUD com Model, Controller, Migration, FormRequests, Policy e Views
• Módulo Auth & Permissions com um único comando
• Instalação de CSS Assets direto no projeto Laravel
• Documentação interativa com 11 abas dentro do VS Code

Problemas que resolve

Proposta de valor

Tudo que você precisa para ir de laravel new até um sistema funcional usando apenas esta extensão. Snippets, comandos, estilos e documentação — integrados.

🚀 Instalação e Setup

Pré-requisitos

• VS Code v1.74 ou superior
• Node.js v16+ (para empacotar a extensão)
• Projeto Laravel (para os comandos de Scaffold, Auth e Assets)

Passo 1: Empacotar a extensão

cd /caminho/para/vscode_component_library_extension
npm install
npx vsce package
# Gera: component-library-snippets-2.1.0.vsix

Passo 2: Instalar no VS Code

Via linha de comando:

code --install-extension component-library-snippets-2.1.0.vsix

Via interface:

1. Ctrl+Shift+X (Extensions)
2. Clique em ... → "Install from VSIX..."
3. Selecione o arquivo .vsix
4. Reinicie o VS Code

Passo 3: Verificar instalação

1. Abra um arquivo .blade.php, .php, .html, .css ou .js
2. Digite cl- e aguarde o IntelliSense
3. Se não aparecer, pressione Ctrl+Space para forçar sugestões

Como usar snippets no VS Code

1. Abra um arquivo na linguagem desejada
2. Digite o prefixo do snippet (ex: cl-blade-layout)
3. Selecione no IntelliSense e pressione Enter ou Tab
4. Navegue entre placeholders com Tab / Shift+Tab
5. Finalize com Escape

Dica: Todos os snippets usam o prefixo cl- para fácil memorização.

⚡ Comandos da Extensão

Detalhes do Scaffold (Ctrl+Shift+G)

Entrada:

1. Nome da classe (ex: Produto)
2. Campos no formato nome:tipo (ex: nome:string, preco:decimal, ativo:boolean)
3. Se o CRUD é restrito a administradores (Sim/Não)

Tipos suportados: string, text, integer, decimal, boolean, date, datetime, email

Arquivos gerados (11 no total):

app/Http/Controllers/ProdutoController.php    ← Resource Controller com busca, filtros, paginação
app/Http/Requests/StoreProdutoRequest.php     ← Validação para criação
app/Http/Requests/UpdateProdutoRequest.php    ← Validação para atualização (unique adaptado)
app/Models/Produto.php                        ← Model com $fillable, $casts, scopeSearch
app/Policies/ProdutoPolicy.php                ← Policy com view, create, update, delete, restore, forceDelete
database/migrations/..._create_produtos_table.php
resources/views/produtos/index.blade.php      ← Listagem com busca e paginação
resources/views/produtos/create.blade.php     ← Formulário de criação
resources/views/produtos/edit.blade.php       ← Formulário de edição
resources/views/produtos/show.blade.php       ← Visualização detalhada
routes/web.php                                ← Route::resource injetado automaticamente

Detalhes do Auth (Ctrl+Shift+A)

Gera:

• Migration para coluna is_admin na tabela users
• Middleware AdminOnly em app/Http/Middleware/
• Registro do middleware no Kernel.php
• Views auth/login.blade.php e auth/register.blade.php
• Rotas de autenticação em routes/web.php

Detalhes do Install CSS Assets (Ctrl+Alt+C)

Gera:

• public/css/components.css — Estilos completos para navbar, cards, botões, forms, tabelas, modals, alertas, badges, paginação, spinner, breadcrumb, tabs, dropdown, toast, search bar
• public/css/utilities.css — Grid 12 colunas, flexbox, spacing (m-, p-), display, cores, tipografia, bordas, sombras

Uso no layout:

<link rel="stylesheet" href="{{ asset('css/components.css') }}">
<link rel="stylesheet" href="{{ asset('css/utilities.css') }}">

📚 Catálogo Completo de Snippets

Blade (24 snippets)

Arquivo: snippets/blade.code-snippets — Linguagem: blade

Estrutura e Layout

Páginas CRUD

Componentes de Tabela

Formulários

Autenticação e Autorização

Paginação e Relacionamentos

PHP (9 snippets)

Arquivo: snippets/php.code-snippets — Linguagem: php

Controllers

Models

Outros

HTML (34 snippets)

Arquivo: snippets/html.code-snippets — Linguagem: html

Layout e Estrutura

Cards

Tabelas

Formulários

Botões

Busca e Filtros

Selects

Componentes Interativos

CSS (25 snippets)

Organizados em 8 arquivos — Linguagem: css

Design Tokens (css-variables.code-snippets)

Utilitários Gerais (css-utilities.code-snippets)

Flexbox (css-flexbox.code-snippets)

Grid (css-grid.code-snippets)

Spacing (css-spacing.code-snippets)

Botões (css-buttons.code-snippets)

Formulários (css-forms.code-snippets)

CSS Consolidado (css.code-snippets)

Nota: O arquivo css.code-snippets é uma versão consolidada. Os arquivos separados (css-variables, css-flexbox, etc.) oferecem versões mais detalhadas.

JavaScript (12 snippets)

Organizados em 2 arquivos — Linguagem: javascript

Scripts de Componentes (javascript.code-snippets)

Comportamentos (javascript-behaviors.code-snippets)

🧩 Guia Mestre — Como Criar Qualquer Aplicação Laravel

Este guia mostra o fluxo universal para criar qualquer sistema usando os snippets e comandos da extensão.

Etapa 1: Setup do Projeto

laravel new meu-projeto
cd meu-projeto

Etapa 2: Instalar CSS Assets

Pressione Ctrl+Alt+C → Gera public/css/components.css e public/css/utilities.css

Etapa 3: Criar Layout Base

Arquivo: resources/views/layouts/app.blade.php Snippet: cl-blade-layout

Gera o layout completo com <!DOCTYPE>, <head>, navbar, @yield('content') e footer. Adicione os links CSS no <head>:

<link rel="stylesheet" href="{{ asset('css/components.css') }}">
<link rel="stylesheet" href="{{ asset('css/utilities.css') }}">

Etapa 4: Gerar CRUD com Scaffold

Pressione Ctrl+Shift+G:

1. Nome da classe: Produto
2. Campos: nome:string, preco:decimal, descricao:text, ativo:boolean
3. Admin? Não

→ 11 arquivos gerados automaticamente. Execute php artisan migrate.

Etapa 5: Configurar Autenticação (se necessário)

Pressione Ctrl+Shift+A → Gera migration, middleware, views de login/register e rotas.

Execute php artisan migrate.

Etapa 6: Personalizar Views

Use os snippets Blade para ajustar as views geradas:

• Adicionar campo ao formulário: cl-blade-input
• Proteger botões por permissão: cl-php-can-edit, cl-php-can-delete
• Paginação completa: cl-php-pagination-full
• Mostrar relacionamentos: cl-php-related-foreach

Etapa 7: Adicionar Dashboard

Arquivo: resources/views/dashboard.blade.php Snippet: cl-blade-dashboard

Gera dashboard com KPIs, gráficos e lista de atividades.

Etapa 8: Adicionar JavaScript

Use conforme necessidade:

• cl-js-confirm-delete → Confirmação antes de excluir
• cl-js-toast → Notificações flutuantes
• cl-js-toggle-password → Mostrar/ocultar senha
• cl-js-sortable-table → Tabela ordenável

Resumo do Fluxo

1. laravel new projeto
2. Ctrl+Alt+C          → CSS Assets
3. cl-blade-layout     → Layout base
4. Ctrl+Shift+G        → CRUD completo
5. Ctrl+Shift+A        → Auth (opcional)
6. cl-blade-dashboard  → Dashboard (opcional)
7. cl-js-*             → JavaScript (conforme necessidade)
8. php artisan migrate → Rodar migrations
9. php artisan serve   → Testar

🏗️ Blueprints de Aplicações Reais

Blueprint 1: Sistema de Estoque

Objetivo: CRUD de Produtos com dashboard e controle admin.

Sequência:

Estrutura de arquivos gerada:

resources/views/layouts/app.blade.php     ← cl-blade-layout
resources/views/dashboard.blade.php       ← cl-blade-dashboard
resources/views/produtos/index.blade.php  ← Scaffold
resources/views/produtos/create.blade.php ← Scaffold
resources/views/produtos/edit.blade.php   ← Scaffold
resources/views/produtos/show.blade.php   ← Scaffold
app/Http/Controllers/ProdutoController.php
app/Models/Produto.php
app/Policies/ProdutoPolicy.php

Blueprint 2: Todo List com Prioridades

Objetivo: CRUD de Tarefas com filtros por status e prioridade.

Sequência:

Snippets úteis para customização:

• cl-blade-table-forelse → Tabela com status como badges
• cl-blade-input → Campos de formulário
• cl-php-pagination-full → Paginação mantendo filtros

Blueprint 3: Blog com Categorias

Objetivo: Posts e Categorias com relacionamentos.

Sequência:

Blueprint 4: Cadastro de Clientes

Objetivo: CRUD de clientes com busca e exportação.

🔄 Fluxo Real de Trabalho (DX)

Dia a dia com a extensão

1. Novo recurso? → Ctrl+Shift+G gera tudo. Customize depois.
2. Novo campo no form? → cl-blade-input dentro do formulário.
3. Precisa de permissão? → cl-auth-can ou cl-php-can-edit / cl-php-can-delete.
4. Tabela com busca? → cl-blade-table-search pronto.
5. Precisa de modal? → cl-modal (HTML) + cl-js-modal (JS).
6. Estilizar CSS? → Use cl-css-root para definir variáveis, depois os utilitários.
7. Documentação? → Ctrl+Shift+D a qualquer momento.

Reduzindo repetição

Padronização

Todos os snippets seguem as mesmas convenções:

• Prefixo cl- unificado
• Classes CSS compatíveis entre HTML snippets e CSS Assets
• Placeholders com Tab para preenchimento rápido
• Código Laravel seguindo PSR-12 e boas práticas oficiais

✅ Boas Práticas

Combinação de snippets

Organização de código

• Um layout, muitas views: Crie o layout com cl-blade-layout, estenda com @extends('layouts.app')
• Snippets Blade em .blade.php: Os snippets cl-blade-* e cl-php-* funcionam em arquivos Blade
• Snippets PHP em .php: Os snippets cl-controller-*, cl-model-*, etc. funcionam em arquivos PHP
• CSS primeiro: Rode Ctrl+Alt+C antes de usar os snippets HTML para ter estilos prontos

Segurança Laravel

• Sempre use @csrf em formulários (já incluído nos snippets cl-blade-form-*)
• Use @method('PUT'/'DELETE') para métodos HTTP corretos
• Use FormRequests para validação server-side (cl-form-request ou Scaffold)
• Use Policies para autorização (cl-auth-can, cl-php-can-edit)
• Nunca confie em dados do usuário — valide tudo no backend

🛠️ Troubleshooting

Snippet não aparece

Causa: O arquivo não está na linguagem correta.

Solução:

1. Verifique a extensão do arquivo
2. Verifique a linguagem no canto inferior direito do VS Code
3. Para Blade: certifique-se que o VS Code reconhece .blade.php como "Blade" (instale extensão de suporte Blade se necessário)

Snippets Blade não aparecem em .blade.php

1. Instale uma extensão de suporte Blade (ex: "Laravel Blade Snippets" ou "Laravel Blade formatter")
2. Verifique se a linguagem está como "Blade" e não "HTML" no status bar
3. Se necessário, clique na linguagem no status bar e selecione "Blade"

Autocomplete não funciona

1. Pressione Ctrl+Space para forçar o IntelliSense
2. Verifique em Settings → editor.quickSuggestions → deve estar habilitado para strings
3. Adicione no settings.json:

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "editor.snippetSuggestions": "top"
}

Scaffold não detecta o projeto Laravel

• Certifique-se de abrir a pasta raiz do projeto Laravel (onde está o artisan)
• O arquivo artisan deve estar na raiz do workspace

CSS Assets não funcionam visualmente

1. Verifique se adicionou os <link> no <head> do layout
2. Verifique se o servidor está rodando (php artisan serve)
3. Limpe o cache do navegador (Ctrl+Shift+R)

Conflito entre HTML e Blade

Se snippets HTML (cl-navbar, cl-card) não aparecem em .blade.php:

• Isso é esperado — snippets HTML são registrados para linguagem html
• Em Blade, use os snippets cl-blade-* que já incluem os componentes HTML
• Ou mude temporariamente a linguagem do arquivo para HTML

📁 Estrutura da Extensão

vscode_component_library_extension/
├── package.json                         # Manifesto (v2.1.0)
├── extension.js                         # Lógica dos 4 comandos
├── icon.png                             # Ícone da extensão
├── snippets/
│   ├── blade.code-snippets              # 24 snippets Blade/Laravel
│   ├── php.code-snippets                # 9 snippets PHP/Laravel
│   ├── html.code-snippets               # 34 snippets HTML
│   ├── css.code-snippets                # 6 snippets CSS (consolidado)
│   ├── css-variables.code-snippets      # 3 snippets de design tokens
│   ├── css-utilities.code-snippets      # 3 snippets utilitários
│   ├── css-flexbox.code-snippets        # 3 snippets flexbox
│   ├── css-grid.code-snippets           # 3 snippets grid
│   ├── css-spacing.code-snippets        # 1 snippet spacing
│   ├── css-buttons.code-snippets        # 2 snippets botões
│   ├── css-forms.code-snippets          # 4 snippets formulários
│   ├── javascript.code-snippets         # 6 scripts de componentes
│   └── javascript-behaviors.code-snippets # 6 scripts de comportamento
├── templates/
│   ├── scaffold/                        # Templates do Scaffold CRUD
│   │   ├── controller.template.js
│   │   ├── model.template.js
│   │   ├── migration.template.js
│   │   ├── request.template.js          # Store + Update FormRequests
│   │   ├── policy.template.js
│   │   ├── view-index.template.js
│   │   ├── view-create.template.js
│   │   ├── view-edit.template.js
│   │   └── view-show.template.js
│   ├── auth/                            # Templates de Auth
│   │   ├── migration-add-admin.template.js
│   │   ├── middleware-admin.template.js
│   │   ├── view-login.template.js
│   │   └── view-register.template.js
│   └── assets/                          # Templates de CSS Assets
│       ├── components.template.js
│       └── utilities.template.js
├── docs/
│   └── index.html                       # Documentação interativa (11 abas)
├── examples/
│   ├── listagem-crud.md                 # Blueprint de listagem
│   ├── cadastro-formulario.md           # Blueprint de formulário
│   └── dashboard.md                     # Blueprint de dashboard
└── README.md                            # Este arquivo

🔧 Desenvolvimento

Modo de desenvolvimento

cd vscode_component_library_extension
code .
# Pressione F5 → Nova janela do VS Code com a extensão carregada

Adicionar novo snippet

Edite o arquivo .code-snippets correspondente:

{
  "Nome do Snippet": {
    "prefix": "cl-meu-snippet",
    "body": [
      "<div class=\"meu-componente\">",
      "\t${1:conteúdo}",
      "</div>"
    ],
    "description": "Descrição do snippet"
  }
}

Placeholders:

• ${1:texto} — Placeholder com valor padrão
• ${1|op1,op2|} — Placeholder com dropdown de opções
• $0 — Posição final do cursor
• \t — Tabulação

📄 Licença

MIT License

🙏 Créditos

Desenvolvido por fabianogdb. Inspirado nas melhores práticas de Laravel e princípios de produtividade (DX).

💡 Dica final: Use Ctrl+Space em qualquer arquivo para ver todos os snippets cl- disponíveis. E use Ctrl+Shift+D para acessar a documentação interativa completa a qualquer momento.