Extensión de VSCode

Si usas VisualStudio Code, instala la extensión Jinja-Jx.

Resaltado de sintaxis

La extensión provee resaltado de sintaxis completo para archivos .jx, incluyendo:

  • Pragmas de Jx: {#import ... #}, {#def ... #}, {#css ... #}, {#js ... #}
  • Etiquetas de componentes en PascalCase (por ejemplo, <MyComponent>, <Card />)
  • Expresiones ({{ ... }}), sentencias ({% ... %}) y comentarios ({# ... #}) de Jinja2
  • HTML estándar (heredado de la gramática HTML integrada de VS Code)

Extensión Jinja-Jx

Ve a la definición

Ctrl+clic (o Cmd+clic en macOS) para saltar al archivo de un componente. Esto funciona desde tres lugares:

  • La ruta de importación — haz clic en la cadena dentro de {#import "card.jx" as Card #}
  • El nombre del alias — haz clic en Card en la declaración de importación
  • Una etiqueta de componente — haz clic en <Card> o </Card> en cualquier parte de la plantilla

La extensión resuelve rutas usando las carpetas de tu catálogo (autodetectadas desde archivos Python), rutas relativas (./, ../) y rutas con prefijo (@ui/modal.jx).

Diagnósticos

La extensión ejecuta jx check automáticamente y muestra los errores en línea en el editor. Las verificaciones se ejecutan:

  • Al guardar (archivos .jx y .py)
  • Al abrir un archivo .jx
  • Al iniciar

Extensión Jinja-Jx

Los errores aparecen en el panel Problems y como subrayados en rojo en el editor, incluyendo sugerencias del tipo "¿quisiste decir?" para errores tipográficos.

Esto usa el mismo verificador que el validador de CLI — consulta esa página para detalles sobre lo que se verifica.

Snippets

Escribe un prefijo y presiona Tab para expandirlo:

Prefijo Se expande a
jximport {#import "..." as ... #}
jxdef {#def ... #}
jxcss {#css ... #}
jxjs {#js ... #}
jxslot {% slot name %} ... {% endslot %}
jxfill {% fill name %} ... {% endfill %}
jxcomp Esqueleto completo de componente (import, css, js, def)

Formateo

La extensión provee formateo de documento (Shift+Alt+F) delegando al formateador HTML integrado de VS Code. Se respetan tus ajustes de formateo HTML (indentación, ajuste de líneas, etc.).

Autodetección

La extensión le pregunta a jx dónde viven tus componentes, en vez de intentar deducirlo de tu código Python.

Escanea el workspace buscando una asignación ... = Catalog(...) para encontrar catálogos candidatos, ejecuta jx info sobre cada uno y usa lo que el catálogo informa: sus carpetas, sus prefijos y su file_ext. Así que no importa cómo se registraron las carpetas — una cadena literal, un Path, settings.BASE_DIR / "components", add_package — se encuentran igual.

Si no se puede cargar ningún catálogo, recurre a buscar archivos de componentes dentro de carpetas con nombres conocidos (views, components, templates).

El escaneo se vuelve a ejecutar cada vez que se crea, modifica o elimina un archivo .py.

Ir a la definición y la lista de imports vienen de jx parse, ejecutado sobre el búfer del editor, así que se analiza lo que estás escribiendo aunque no lo hayas guardado. Por eso también un <Button /> escrito dentro de un comentario o de un bloque {% raw %} correctamente no se trata como una etiqueta de componente.

Si jx no está instalado en el intérprete seleccionado, la extensión recurre a reconocer los imports por su forma, para que ir a la definición siga funcionando.

Instalación

Abre VSCode Quick Open (Ctrl+P), pega el siguiente comando y presiona ENTER.

ext install jpscaletti.jinja-jx

Alternativamente:

  1. Descarga el archivo jinja-jx-VERSION.vsix desde el repositorio de GitHub
  2. Abre VSCode Quick Command (Shift+Ctrl+P)
  3. Ejecuta "Extensions: Install from VSIX..."

Configuración

Todos los ajustes son opcionales — la extensión funciona sin configuración gracias a la autodetección.

Ajuste Por defecto Descripción
jx.check.enabled true Habilita o deshabilita los diagnósticos
jx.pythonPath "" Ruta al intérprete de Python. Se autodetecta desde la extensión de Python o desde PATH si está vacío
jx.catalogPath "" Ruta de importación a tu instancia de Catalog (por ejemplo, myapp.setup:catalog). Se autodetecta si está vacío