Green Design System IntelliSense
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 escribir var(--bhd o --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-* |
