Smartclic Storybook — Extensión VSCode

Extensión exclusiva para la arquitectura y flujo de trabajo de Smartclic. No está diseñada para uso general: depende del sistema de componentes, variables y convenciones de código propias del proyecto.

Funcionalidades

1. IntelliSense de componentes Vue

Autocompletado y documentación en archivos .vue y .html para los componentes de la librería @erp-mf/erp2-components-vue.

• Nombre del componente (<v-button, <v-text, etc.): sugerencias filtradas con imagen de preview al pasar el cursor.
• Atributos: al escribir dentro de un tag, lista todos los props disponibles con descripción y valor por defecto.
• Valores de atributo: al escribir dentro de type="...", size="...", etc., lista los valores válidos con descripción y vista previa de la variante.
• Hover: al posicionar el cursor sobre el nombre de un componente muestra su imagen de preview y descripción.

La extensión carga los datos desde node_modules/@erp-mf/erp2-components-vue/smartclic-data.json si existe en el workspace; de lo contrario usa el archivo empaquetado dentro de la extensión.

2. Linter SCSS (scss-smartclic)

Detecta y corrige violaciones de las convenciones SCSS del proyecto en archivos .scss. Todas las violaciones son errores (no advertencias) porque causan el rechazo de un MR.

La extensión busca automáticamente el archivo _variables.scss de cada micro frontend en src/assets/styles/_variables.scss subiendo desde el archivo SCSS editado.

Convenciones que se aplican

F3 — Alias vars. obligatorio

Todo uso de una variable SCSS en la parte del valor debe usar el alias vars.:

// ❌ Error — sin alias
height: $pix-30;

// ❌ Error — alias incorrecto
height: v.$pix-30;

// ✅ Correcto
height: vars.$pix-30;

Tiene autofix al guardar y acción de código (bombilla).

F1 — Valor literal con variable existente

Si ya existe una variable para ese valor, usar la variable:

// ❌ Error — $pix-30 existe en _variables.scss
height: 30px;

// ✅ Correcto
height: vars.$pix-30;

Aplica a cualquier tipo de valor que coincida exactamente con una variable (dimensiones, box-shadow, etc.). Tiene autofix al guardar y acción de código.

F2 — Valor literal sin variable

Si se usa un valor con unidad CSS (px, %, em, rem, vw, vh, pt) y no existe ninguna variable para él:

// ❌ Error — $pix-37 no existe, debe crearse
height: 37px;

Sin autofix: el desarrollador debe crear la variable en _variables.scss.

F4 — Color hardcodeado con variable existente

Los colores que coincidan con una variable de color deben usar la sintaxis var(--name, vars.$name):

// ❌ Error — $blue-light: #5293f4 existe
color: #5293f4;

// ✅ Correcto
color: var(--blue-light, vars.$blue-light);

Tiene autofix al guardar y acción de código.

F5 — Color hardcodeado sin variable

Color que no tiene variable correspondiente en _variables.scss:

// ❌ Error — #abcdef no tiene variable
color: #abcdef;

Sin autofix: el desarrollador debe crear la variable o usar una existente.

F6 — Variable de color sin envoltura var()

Las variables de color deben usarse siempre con var() para permitir theming vía CSS custom properties:

// ❌ Error — $blue-light es un color
color: vars.$blue-light;

// ✅ Correcto
color: var(--blue-light, vars.$blue-light);

Tiene autofix al guardar y acción de código.

Comportamiento del linter

3. Panel Import Map

Panel lateral (en el Explorador → Import Map) que muestra el estado de todos los micro frontends registrados en importmap.json y permite gestionar su entorno sin tocar los archivos manualmente.

Estados de un MFE

Botones por MFE (inline)

Botones del panel (barra de título)

Modo IP

El primer ítem del panel muestra localhost o la IPv4 de red del equipo. Haz clic para alternar. Útil para probar en dispositivos móviles en la misma red local.

Inicio y parada de MFEs

Al hacer clic en ▶ la extensión localiza el repositorio en el workspace y ejecuta el comando correcto:

• npm run start — erp-mf-root-config, erp-mf-common
• npm run serve — resto de MFEs

El proceso corre en segundo plano. El output está disponible en Ver → Output → MFE: <nombre>. El ícono y el porcentaje de compilación se actualizan en tiempo real conforme webpack emite progreso.

Si VS Code se cierra y el proceso sigue activo en el puerto, la extensión lo detecta al reabrir y muestra ✔ con botón ■ para detenerlo.

Archivos que se leen

Solo se muestran entradas con nombre @sreasons/*. La extensión normaliza automáticamente los alias de clave que difieren entre archivos:

4. Snippets SCSS

Fragmentos de código para variables y mixins del design system en archivos .scss. Escribe el prefijo y presiona Tab.

5. Crear Componente

Clic derecho sobre una carpeta en el Explorador → Smartclic: Crear Componente.

Genera la estructura base de un nuevo componente siguiendo las convenciones del proyecto.

Instalación

Instalar el archivo .vsix en VS Code.

Contexto del proyecto

• Librería de componentes: erp2-componentes-vue
• Micro frontends: proyectos que consumen la librería y a los que se aplica el linter SCSS
• Variables del proyecto: src/assets/styles/_variables.scss en cada micro frontend
• Importación estándar:

@use '@/assets/styles/variables' as vars;
@use '@/assets/styles/mixin' as resol;