Delphi for VS Code

Preview visual de formulários .dfm direto no editor — estilo designer, sem sair do VS Code.

GitHub · Instalação · Preview DFM · Configuração

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.

Destaques

Instalação

Desenvolvimento local

git clone https://github.com/patrick9as/Delphi.VsCode.git
cd Delphi.VsCode
npm install
npm run compile

No VS Code: F5 (Extension Development Host) e abra um .dfm.

Empacotar .vsix

npm install -g @vscode/vsce
vsce package

Instale o .vsix gerado via Extensions → Install from VSIX.

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    │                          │ Componentes     │
│ Eventos         │      Canvas (form)       │ Visuais         │
│                 │                          │ Não visuais     │
└─────────────────┴──────────────────────────┴─────────────────┘

Canvas — ferramentas e zoom

Navegação código

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

{
  "delphi.dfm.autoPreview": true
}

Linguagens suportadas

A extensão registra suporte de linguagem para:

• .pas — units Pascal/Delphi
• .dfm — formulários
• .dpr — projects
• .dpk — packages

O preview interativo é exclusivo para .dfm em formato texto.

Componentes renderizados (MVP)

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.

Arquitetura (resumo)

.dfm (texto)
    ↓ parser TypeScript (src/dfm/)
DfmFormPreview + DfmComponent
    ↓ postMessage
Webview (preview.js + renderers VCL/TMS)
    ↓ seleção / eventos
navigation.ts → .dfm / .pas no editor

Desenvolvimento

npm run compile   # build único
npm run watch     # rebuild ao salvar

Fixtures de teste em test/fixtures/ (Form1.dfm, Principal.dfm, etc.).

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

Licença

MIT

Ícone Delphi baseado no Devicon (MIT).

Feito com foco em produtividade para quem vive de Delphi legado e ERP.