Autocompletado, documentación contextual y validación en tiempo real para proyectos que usan el Green Design System en plantillas HTML (Angular) y hojas de estilo SCSS/CSS.
Descripción
Esta extensión acelera el desarrollo con el Green Design System al sugerir componentes, atributos, clases utilitarias y tokens CSS mientras escribes. También detecta tags, clases y variables que no existen en el catálogo oficial y propone alternativas cercanas.
Características
Autocompletado en HTML
- Tags de componentes
bhd-*al escribir<. - Atributos y props de cada componente, con valores sugeridos para enums y booleanos.
- Clases utilitarias del DS dentro de
class="..."y bindings[class.bhd-...].
Ejemplo
<bhd-button variant="|" disabled="|"></bhd-button>
Autocompletado en SCSS/CSS
- Tokens
--bhd-*al escribirvar(--bhdo--bhd. - Custom properties específicas de componente dentro de reglas como
bhd-button { --... }.
Ejemplo
.card {
color: var(--bhd-color-grey-900);
}
bhd-button {
--bhd-button-height: 48px;
}
Documentación al pasar el cursor (hover)
- Componentes
bhd-*: descripción, categoría, import de Angular y props principales. - Tokens
--bhd-*: scope del token (Primitives, Semantic, Utilities) y uso recomendado.
Validación en tiempo real
La extensión marca en el editor:
| Qué valida | Ejemplo |
|---|---|
| Tags desconocidos | <bhd-buttom> |
| Clases utilitarias inválidas | class="bhd-type-boddy-1" |
| Tokens CSS inexistentes | var(--bhd-color-gry-900) |
Cuando detecta un error, sugiere correcciones con ¿Quisiste decir...? basado en similitud de texto.
Comandos
Abre la paleta de comandos (Ctrl+Shift+P / Cmd+Shift+P) y busca:
| Comando | Descripción |
|---|---|
| Green DS: Abrir documentación del componente | Abre la documentación del componente bhd-* bajo el cursor. |
Configuración
Ajusta el comportamiento en Settings → busca Green DS:
| Setting | Tipo | Default | Descripción |
|---|---|---|---|
GreenDs.enableDiagnostics |
boolean |
true |
Activa o desactiva la validación de tags, clases y tokens. |
GreenDs.diagnosticSeverity |
string |
warning |
Severidad del diagnóstico: error, warning, information o hint. |
GreenDs.enableHover |
boolean |
true |
Muestra documentación al pasar el cursor sobre componentes y tokens. |
Ejemplo en settings.json
{
"GreenDs.enableDiagnostics": true,
"GreenDs.diagnosticSeverity": "warning",
"GreenDs.enableHover": true
}
Idiomas soportados
| Lenguaje | Autocompletado | Hover | Diagnósticos |
|---|---|---|---|
| HTML | Sí | Sí | Tags y clases bhd-* |
| SCSS | Sí | Sí | Tokens --bhd-* |
| CSS | Sí | Sí | Tokens --bhd-* |