MDS Angular Snippets
Uma coleção de snippets para os componentes do MDS (Mobiis Design System) no Angular, projetada para acelerar o desenvolvimento e garantir a consistência no uso da biblioteca MDS Angular.
🚀 Funcionalidades
- Gerados do código-fonte: os snippets refletem a API real dos componentes (inputs, outputs, slots,
required), com npm run snippets:generate. Inputs @deprecated não aparecem.
- Snippet essencial por padrão: só o que você precisa para começar (obrigatórios + inputs mais usados +
formControlName nos campos de formulário). Sem 40 placeholders para apagar.
- Enums viram dropdown com o valor padrão primeiro (
variant, size...), booleanos já em [prop]="true|false" e [(model)] para two-way binding.
- Variações por sufixo (veja abaixo), exemplos curados e blueprints de página.
🛠 Como usar
Em qualquer .html, digite mds- (ou o nome da diretiva, ex.: mdsTooltip) e escolha o snippet. Tab navega entre os placeholders.
| Digite |
Resultado |
mds-button |
Essencial: label, variant, icon |
mds-button-all |
Todos os inputs não deprecated |
mds-button-events |
Essencial + todos os (outputs) com ($event) |
mds-card-slots |
Estrutura de projeção de conteúdo (mdsCardHeader, role="main", ...) |
mds-button-<ex> |
Exemplo curado (ex.: mds-button-acoes-de-formulario) |
mds-pagina-lista |
Blueprint de página (também mds-pagina-formulario, mds-app-shell) |
mdsTooltip |
Diretivas de atributo inserem só o atributo, dentro de qualquer tag |
d-flex, padding-all--md, gap--sm, margin-b--lg |
Classes utilitárias de layout do mds-styles: display, padding, margin, gap, flex, tamanho, posição e overflow (arquivo mds-angular-utils) |
Diretivas com tag (button[mdsButton], a[mdsButton]) respondem tanto a mdsButton quanto a button[mdsButton].
🧠 Autocomplete e hover contextuais
Em qualquer template .html a extensão entende em que ponto da tag você está:
| Onde está o cursor |
O que aparece |
<mds-button | |
Só os inputs (variant, [disabled]), eventos ((onClick)) e formControlName desse componente — sem repetir os já usados. Obrigatórios primeiro, deprecated riscados por último |
variant="|" |
Valores do enum (padrão primeiro). Em [variant]="|" já vêm entre aspas |
icon="|" |
Os aliases de ícone do MDS, com o nome lucide ao lado |
[loading]="|" |
true / false |
<mds-card> <| |
Os slots do card (<div mdsCardHeader>, role="main"...) antes dos demais componentes |
<div |, <button | |
Diretivas de atributo aplicáveis (mdsTooltip, mdsButton...) |
Passe o mouse sobre uma tag ou atributo para ver a documentação: descrição, tipo, padrão, valores aceitos, regras de uso/evite e links.
🧭 Navegação
- Ir para a definição (
F12 / Ctrl+clique) numa tag ou atributo abre o código-fonte do componente já na linha do input/output (no repositório mds-angular ou no .d.ts do node_modules).
- Painel MDS Angular na barra lateral: componentes por categoria, com inputs, eventos e slots. Em cada componente: inserir no editor, Storybook, código-fonte e (menu
…) Figma e documentação.
MDS: Buscar componente (Paleta de Comandos): busca por nome, seletor ou descrição e pergunta o que fazer.- CodeLens (desligado por padrão):
MDS: Alternar CodeLens dos componentes mostra Docs · Storybook · Figma · Fonte acima de cada componente.
Configurações
| Chave |
Padrão |
Descrição |
mdsAngular.storybookUrl |
https://design.fretefy.com.br/mds-angular |
URL base do Storybook usada nos links |
mdsAngular.completion.enabled |
true |
Autocomplete contextual |
mdsAngular.hover.enabled |
true |
Documentação no hover |
mdsAngular.codeLens.enabled |
false |
Atalhos acima de cada componente |
✅ Diagnósticos em tempo real
Enquanto você digita, o template é validado contra a API real do mds-angular (as mesmas regras do linter do MCP). Os problemas aparecem sublinhados e na aba Problemas, e Ctrl+. oferece a correção.
| O que é apontado |
Exemplo |
Correção sugerida |
Tag mds-* que não existe |
<mds-buton> |
mds-button |
Valor de enum inválido (também em [x]="'valor'") |
variant="primry" |
primary |
| Ícone que não é alias MDS |
icon="pencil" |
aliases parecidos |
| Input / evento / two-way inexistente |
[foo], (onClik), [(nope)] |
nome mais próximo |
| Input obrigatório ausente |
<mds-breadcrumbs> sem [items] |
adicionar [items]="" |
| Input deprecated |
rounded (riscado) |
— |
formControlName em componente sem NgControl |
<mds-button formControlName> |
— |
| Classe CSS inexistente (opcional) |
class="mds-btn--primry" |
classe mais próxima |
Eventos nativos ((click), (keydown.enter)...), atributos globais, *ngIf, #ref e interpolações {{ }} nunca são apontados.
Ligar/desligar: clique em MDS na barra de status (aparece em arquivos .html), use MDS: Alternar diagnósticos ou a configuração mdsAngular.diagnostics.enabled.
| Chave |
Padrão |
Descrição |
mdsAngular.diagnostics.enabled |
true |
Liga/desliga os diagnósticos e os Quick Fixes |
mdsAngular.diagnostics.cssClasses |
off |
mds valida só classes mds-*; all valida todas (apps têm classes próprias, use com cuidado) |
🔄 Atualizando os snippets (mantenedores)
npm run snippets:generate # regenera snippets/*.code-snippets a partir do código-fonte
npm run snippets:check # CI: falha se estiverem desatualizados ou inválidos
npm run snippets:test # testes do autocomplete/hover/catálogo (node --test)
O mesmo comando gera data/mds-index.json (API dos componentes que alimenta o autocomplete, o hover e o catálogo). O gerador valida cada snippet com o linter de templates do MCP (inputs/outputs existentes, valores de enum válidos, tabstops sem duplicata). Para empacotar: cd snippets && npx @vscode/vsce package.
📦 Componentes Incluídos
A extensão cobre uma vasta gama de componentes do design system, incluindo:
- Feedback:
mds-alert, mds-badge, mds-loader, mds-empty-state
- Navegação:
mds-menu, mds-topbar, mds-nav-tabs, mds-breadcrumb
- Formulários:
mds-input, mds-select, mds-checkbox, mds-radio, mds-date-time-picker, mds-color-picker
- Ações:
mds-button, button[mdsButton], mds-control-group
- Visualização:
mds-card, mds-avatar, mds-icon, mds-chart, mds-progress-circle
- Layout:
mds-collapse, mds-float-panel, mds-page-header, mds-toolbar
📋 Requisitos
- MDS Angular: Esta extensão é um auxiliar para projetos que utilizam a biblioteca
@mobiis/mds-angular.
Desenvolvido com ❤️ pela equipe d Mobiis.
| |
