Abrir una plantilla de un schematic de Angular en VS Code es ver el archivo en rojo. La plantilla es TypeScript, o HTML, o SCSS, pero lleva etiquetas <%= %> incrustadas, y el editor la abre como si fuera código normal: el resaltado se rompe en la primera etiqueta y el servicio de TypeScript marca errores que no existen.
Llevo muchísimos años conviviendo con eso. En una de las experiencias laborales más largas de mi vida el código de las aplicaciones se generaba automáticamente con schematics de Angular, y cada vez que tocaba una plantilla trabajaba a ciegas, sin resaltado fiable, sin autocompletado y con la lista de problemas llena de ruido. Hacer esta extensión siempre ha estado en mi cabeza, pero nunca tuve los medios ni el tiempo. Esta semana por fin la he publicado, y la dejo pública para quien la quiera usar: Angular Schematic Templates. Mi granito de arena para hacerle la vida más fácil a quien escribe schematics.
Qué hace
La extensión reconoce las plantillas por su contexto: un archivo cuenta como plantilla cuando vive bajo la carpeta files de un schematic, ya sea porque una collection.json apunta ahí o porque la carpeta tiene su index.ts. Cada plantilla pasa a un lenguaje propio, Schematic Template (TypeScript) y así con HTML, SCSS, CSS y JSON. Con eso los servicios integrados de VS Code dejan de quejarse, y el resaltado entiende tanto el código anfitrión como lo que hay dentro de las etiquetas.
También formatea con el Prettier del propio proyecto y su configuración: esconde las etiquetas, formatea el código y las devuelve a su sitio intactas. Si una etiqueta fuera a perderse o moverse, el archivo se queda como estaba y la barra de estado explica por qué. Hay snippets para las etiquetas habituales, y escribir <% cierra la etiqueta sola.
Autocompletado dentro de las etiquetas
Es la parte que más me gusta. Un servidor de lenguaje lee el código de dentro de las etiquetas como TypeScript, con el tipo de los datos que recibe la plantilla. Eso da autocompletado, hover, ir a la definición y errores de verdad, como una propiedad que los datos no tienen.
El tipo no hay que declararlo. La extensión busca la llamada url('./files') cuya carpeta contiene la plantilla y, desde ahí, la llamada que le pasa los datos, template(vars) o applyTemplates(vars). Cuando no puede deducirlo, lo avisa en la primera línea de la plantilla con el motivo, y un quick fix deja elegir un tipo de una lista y escribe una cabecera como esta:
<%# @context ../types/page-context#PageContext %>El motor de plantillas la descarta como comentario, así que nunca llega al código generado.
Lo que aún no hace
El resaltado dentro de las etiquetas cubre un subconjunto plano de JavaScript, el formateo no toca las plantillas JSON, y una plantilla excluida de todos los tsconfig.json no resuelve los alias de rutas como @app/.... El README recoge la lista completa de limitaciones. Es larga, y prefiero que esté escrita a que cada uno descubra la suya.
Dónde está
La extensión está en el Marketplace de VS Code, con el código en GitHub bajo licencia MIT, en inglés y en castellano. Si escribes schematics y algo no funciona como esperas, un issue en el repositorio es la mejor forma de contármelo.