Preview visual de formulários .dfm direto no editor — estilo designer, sem sair do VS Code.
O que é
Extensão para desenvolvedores Delphi/Pascal que transforma arquivos .dfm em uma pré-visualização interativa ao lado do código. Ideal para navegar forms grandes, entender layout e ir rápido do componente no preview para a linha no .dfm ou no handler no .pas.
DFM binário (TPF0) não é suportado — use o formato texto no Delphi antes de abrir o preview.
Requisitos
- Extensão Pascal — syntax highlighting em
.pas ao navegar do preview para handlers (dependência declarada)
- Arquivos
.dfm em formato texto
Arquivos .dfm abrem como Plain Text no editor (esta extensão não registra language id próprio). O preview interativo funciona normalmente — a detecção é pela extensão .dfm, não pelo modo de linguagem.
Destaques
| Recurso |
Descrição |
| Preview ao vivo |
Abre automaticamente ao focar um .dfm (configurável) |
| Painel lateral |
Propriedades, Eventos, Componentes, Visuais e Não visuais em seções recolhíveis à direita do form |
| Renderização VCL |
Botões, painéis, labels, edits, imagens, shapes e mais |
| Sketch TMS |
Componentes TAdv* (ribbon, toolbar, glow buttons) reconhecíveis |
| Align no form |
alTop, alClient, alBottom nos filhos diretos do form |
| Não visuais |
Listados na sidebar e opcionalmente no canvas (chips com ícone) |
| Pan & zoom |
Estilo Excalidraw: Ctrl+scroll no cursor, Space/Ctrl+arrastar |
| Navegação código |
Clique → .dfm · evento → .pas · duplo clique → OnClick no .pas |
| Múltiplos .dfm |
Um painel sincroniza com o .dfm da aba ativa |
Instalação
- Instale Delphi DFM Form Preview pela Marketplace do VS Code ou Cursor
- Abra um arquivo
.dfm em formato texto
- O preview abre automaticamente (ou use o botão Preview na barra do editor)
Preview DFM
Abrir o preview
- Automático — foco em qualquer
.dfm (padrão)
- Manual — botão Preview na barra do editor ou comando
Delphi: Preview DFM
Layout
┌──────────────────────────────────────┬──────────────────┐
│ │ ▼ Propriedades │
│ Canvas (form) │ ▶ Eventos │
│ │ ▼ Componentes │
│ │ ▶ Visuais │
│ │ ▶ Não visuais │
└──────────────────────────────────────┴──────────────────┘
Canvas — ferramentas e zoom
| Ação |
Atalho / gesto |
| Selecionar componente |
Modo Selecionar (seta) + clique |
| Arrastar a vista |
Modo Arrastar (mão) ou Space / Ctrl + arrastar |
| Zoom no cursor |
Ctrl + rolagem |
| Zoom botões |
+ / − / Ajustar na toolbar |
| Ocultar não visuais |
Ícone olho ou Ctrl+H |
Navegação código
| Gesto |
Destino |
| 1 clique no componente |
Linha object Nome: TClasse no .dfm |
| 1 clique no form (área cliente / título) |
Linha do form no .dfm |
| Clique no handler na aba Eventos |
procedure no .pas |
Duplo clique em componente com OnClick |
Handler OnClick no .pas |
Funciona no canvas, na árvore de componentes e nas listas laterais.
Abas laterais
Esquerda — Propriedades | Eventos
- Propriedades do componente ou form selecionado, com busca
- Eventos como
OnClick → btmSalvarClick (link para o .pas)
Direita — Componentes | Visuais | Não visuais
- Árvore hierárquica com busca
- Listas flat de componentes visuais e não visuais
- Seleção sincronizada com o canvas
Configuração
| Setting |
Padrão |
Descrição |
delphi.dfm.autoPreview |
true |
Abrir/atualizar preview ao focar um .dfm |
{
"delphi.dfm.autoPreview": true
}
Componentes renderizados
VCL
TForm, TPanel, TButton, TLabel, TEdit, TCheckBox, TComboBox, TImage, TShape, TMemo, TGroupBox, TProgressBar, TStatusBar, entre outros.
TMS (sketch)
TAdvToolBarPager, TAdvPage, TAdvToolBar, TAdvGlowButton, TAdvPanel, TAdvOfficeStatusBar — layout simplificado para telas como menus principais.
Não visuais
TTimer, TPopupMenu, TMainMenu, TTrayIcon, styler patterns, etc. — listados e exibíveis como chips no canvas.
Limitações conhecidas
- DFM binário não suportado
- Handlers em units diferentes do
.pas do form não são resolvidos
- Layout aninhado complexo (frames, grids) ainda é aproximado
- Edição de propriedades pelo preview não está disponível
