Jinja - Jx

Language support for a Jx (Jinja2-based component library). Requires jx >= 0.8.0.

Features

Syntax Highlighting

The extension provides full syntax highlighting for .jinja files, including:

• Jx pragmas: {#import ... #}, {#def ... #}, {#css ... #}, {#js ... #}
• PascalCase component tags (e.g., <MyComponent>, <Card />)
• Jinja2 expressions ({{ ... }}), statements ({% ... %}), and comments ({# ... #})
• Standard HTML (inherited from VS Code's built-in HTML grammar)

Go-to-Definition

Ctrl+click (or Cmd+click on macOS) to jump to a component file. This works from three places:

• The import path — click on the string in {#import "card.jinja" as Card #}
• The alias name — click on Card in the import declaration
• A component tag — click on <Card> or </Card> anywhere in the template

The extension resolves paths using your catalog folders (auto-detected from Python files), relative paths (./, ../), and prefixed paths (@ui/modal.jinja).

Diagnostics

The extension runs jx check automatically and shows errors inline in the editor. Checks run:

• On save (.jinja and .py files)
• When a .jinja file is opened
• On startup

Errors appear in the Problems panel and as red underlines in the editor, including "did you mean?" suggestions for typos.

Snippets

Type a prefix and press Tab to expand:

Formatting

The extension provides document formatting (Shift+Alt+F) by delegating to VS Code's built-in HTML formatter. Your HTML formatting settings (indentation, wrapping, etc.) are respected.

Auto-Detection

The extension automatically scans your workspace for Python files that use Catalog() or .add_folder() to detect:

• Component folder paths (used by go-to-definition)
• Catalog import paths (used by diagnostics)

If no Catalog() call is found, it falls back to looking for .jinja files inside well-known folder names (views, components, templates).

The scan re-runs whenever a .py file is created, changed, or deleted.

Installation

Launch VSCode Quick Open (Ctrl+P), paste the following command, and press ENTER.

ext install jpscaletti.jinja-jx

Alternatively:

1. Download the the jinja-jx-VERSION.vsix file from the GitHub repo{_target="blank"}
2. Launch VSCode Quick Command (Shift+Ctrl+P)
3. Run "Extensions: Install from VSIX..."

Configuration

All settings are optional — the extension works out of the box with auto-detection.