IntelliSense y autocompletado de Blogger en Visual Studio Code

Extensión para Visual Studio Code que añade IntelliSense, autocompletado y snippets para la sintaxis de plantillas XML de Blogger (Blogspot).

Blogger Syntax para Visual Studio Code

Repositorio Marketplace

Desarrollar y editar plantillas de Blogger en editores de código modernos puede ser complicado. La plataforma utiliza una sintaxis XML propia, con decenas de etiquetas y atributos especiales, además de una gran cantidad de objetos y datos disponibles en las plantillas. Los editores no ofrecen sugerencias contextuales para esta sintaxis, lo que hace que trabajar con temas de Blogger sea complicado.

En sus inicios desarrolle Blogger Syntax como una extensión de sugerencias y snippets, pero el proyecto ha evolucionado y ahora mi objetivo es mejorar la experiencia de desarrollo de temas para Blogger. Como primer paso, he comenzado por ampliar la extensión con IntelliSense, inferencia de tipos de datos, documentación al pasar el cursor y una colección de snippets útiles para trabajar con esta sintaxis.

Características principales

Autocompletado: Sugerencias para objetos data:* y sus propiedades, con tipos y documentación.
Inferencia de variables: Detección de variables <b:loop> y <b:with>, incluyendo scopes anidados.
Variables: Autocompletado para <Variable> y <Group>, con 250+ descripciones.
Widgets y markup: Sugerencias para los 25 tipos de widgets y 27 tipos de markup disponibles.
Snippets y etiquetas: 32+ snippets y cierre automático de etiquetas con tab stops.
Documentación en Hover: Información sobre etiquetas, atributos y propiedades, con enlaces a la documentación.

Autocompletado de datos en Blogger Syntax

Snippets

Prefijo	Descripción
`b:attr`	Añade un atributo al nodo padre.
`b:class`	Añade o concatena clases CSS al nodo padre.
`b:comment`	Crea comentarios alternables durante el renderizado.
`b:defaultmarkups`	Contenedor de markups predeterminados de la plantilla.
`b:defaultmarkup`	Markup predeterminado para un tipo de widget.
`b:eval`	Evalúa una expresión e imprime su resultado.
`b:if`	Renderizado condicional.
`b:elseif`	Rama condicional alternativa.
`b:else`	Rama predeterminada de un bloque condicional.
`b:includable`	Define una sección reutilizable de la plantilla.
`b:include`	Ejecuta y renderiza una sección includable.
`b:loop`	Itera sobre los elementos de un array.
`b:message`	Formatea un mensaje localizado de Blogger.
`b:param`	Pasa un parámetro a un `<b:message>`.
`b:section`	Define una sección de diseño para widgets.
`b:skin`	Define los estilos CSS y variables del tema.
`b:template-skin`	Estilos CSS para el modo de diseño de Blogger.
`Group`	Agrupa variables en el Diseñador de Plantillas.
`Variable`	Define una opción de personalización.
`Variable (color)`	Variable de color para el CSS del tema.
`Variable (font)`	Variable tipográfica con tamaño y familia.
`Variable (length)`	Variable de dimensión con límites definidos.
`Variable (background)`	Variable de fondo con color e imagen.
`Variable (string)`	Variable de texto libre para valores CSS.
`Variable (url)`	Variable para recursos o imágenes mediante URL.
`b:switch`	Evalúa una expresión y ejecuta la rama correspondiente.
`b:case`	Caso de coincidencia dentro de un switch.
`b:default`	Caso predeterminado dentro de un switch.
`b:tag`	Genera dinámicamente una etiqueta HTML.
`b:widget`	Define un widget de Blogger.
`b:widget-settings`	Contenedor de configuraciones de un widget.
`b:widget-setting`	Define un ajuste individual del widget.
`b:with`	Asigna una expresión a una variable local.

Lenguajes compatibles

La extensión se activa automáticamente en los siguientes lenguajes:

XML: Archivos .xml.
Handlebars: Archivos .hbs y .handlebars.

Conclusion

Desarrollar plantillas para Blogger no tiene por qué ser frustrante. Con Blogger Syntax tienes a mano autocompletado, documentación y snippets listos para trabajar de forma más cómoda y rápida. Si desarrollas habitualmente temas para Blogger, pruébala desde el Marketplace y cuéntame en los comentarios qué otras funciones te gustaría ver en futuras versiones.