Jinja2 Enhance

🌐 Website: jinja2.xuby.cl — features and screenshots.

📦 Install: VS Code Marketplace · Open VSX (VSCodium / Cursor / OpenVSCode)

Jinja2 Enhance is a Visual Studio Code extension that adds syntax highlighting support for the Jinja2 templating language inside .html files and provides variable checking functionality. It extends the native HTML highlighting with additional rules for Jinja2, allowing seamless editing of templates that mix both HTML and Jinja2.

What's New

1.18.0

Minor Changes

• ✨ Backend Variable Intelligence — hover any template variable to see which backend file and line declares it (Flask, Django, FastAPI, Express, Nunjucks). Cmd+Click jumps to the source. A new Jinja2: Backend Variables panel lists all declarations for the active template.
• ✨ Template Path Navigation & Diagnostics — Cmd+Click / F12 on any path inside {% extends %}, {% include %}, {% import %}, or {% from %} jumps to the referenced file. Unresolvable paths and circular {% extends %} chains are flagged inline. New jinja2-html-enhancer.templateRoots setting for custom resolution roots.
• ✨ Cross-file Macro Autocomplete & Signature Help — macros inherited via {% extends %} and imported via {% import %} / {% from … import … %} appear in completions. Namespace completions (e.g. forms.) and parameter hints work too.
• ✨ Inherited Variable Hover & Quick-fix — hover an inherited variable to see its origin file and line. A Go to inherited definition quick-fix appears on JHE0001 diagnostics when the variable traces back to a parent template.
• ✨ Variable Type Hints on Hover — inferred types from Python/TypeScript annotations, template usage patterns (member access → object), and inherited scope. Object types list their known fields inline.
• ✨ Advanced Linting Rules — five new diagnostics: unused {% set %} variables (JHE1200), block-scoped variables used outside their block (JHE1201), excessive nesting depth (JHE1202, configurable via jinja2-html-enhancer.nestingDepthThreshold), incorrect macro argument counts (JHE1203), and block definitions never overridden by child templates (JHE1204).
• ✨ CSS-aware Template Preview — the preview panel auto-detects and applies CSS from Flask url_for('static', ...), hardcoded /static/ paths, CDN links, and inline <style> blocks across the full {% extends %} ancestor chain.
• ✨ Backend Context Injection in Preview — variables declared in your backend files are pre-populated as preview context defaults. Profile-defined values still take priority.

Patch Changes

• 🐛 Template Preview renders {% extends %} / {% include %} — the preview panel now resolves parent templates and partials instead of showing raw Jinja2 tags.
• 🗑️ Removed Pro upsell — Jinja2 Enhance Pro has been discontinued; all features are in the free extension.

1.17.0

Minor Changes

• ✨ Filter Docs on Hover — hover any built-in Jinja2 filter (length, default, safe, …) to see its signature, description, and a usage example. Docs available in English and Spanish.
• ✨ Jinja2-aware Formatting — integrates with prettier-plugin-jinja-template for best-in-class Jinja2 + HTML formatting. The extension auto-detects the plugin in your project; if it's missing, it offers to install it for you. Format on save is enabled by default for .html, .jinja2, .j2, and .jinja files.
• ✨ Macro IntelliSense (same-file) — autocomplete and parameter hints for macros defined in the current template. Type {{ to see local macros with their signatures, and trigger signature help with ( to see parameters as you type.
• 🚀 Template Preview v2 — save named context profiles per template (or a workspace-wide * fallback), switch profiles from the sidebar, start fast with built-in mock presets (user, list, paginated, form), and watch the preview update live as you edit the JSON context or the template. Missing variables show as clickable chips you can add to the active profile with one click. Adds the Jinja2: Preview Template with Profile quick-pick command.

Patch Changes

• 🔒 Supply-chain hardening — migrated to pnpm@11.0.8 to mitigate the npm lifecycle-script attack class highlighted by the TanStack npm supply-chain compromise (May 2026). pnpm's content-addressable store and build-scripts-blocked-by-default provide stronger defaults against this vector.

Donations

If you find this extension helpful, consider supporting the developer by buying them a coffee:

Features

• Jinja2 Enhance:

  • Supports Jinja2 control structures like {% for %}, {% if %}, {% block %}, etc.
  • Highlights variable interpolation using {{ }} syntax.
  • Keywords like for, if, block are highlighted with a distinct color for better readability.
  • Pipe filters like capitalize, default, length, lower, etc., are highlighted after the pipe (|).

• HTML and Jinja2 Together:

  • Maintains the standard HTML syntax highlighting while injecting Jinja2 rules.
  • Useful for projects that use Jinja2 templating language for dynamic content within HTML.

• Variable Checking:

  • Analyzes Jinja2 templates to identify used and set variables.
  • Provides warnings for variables that are used but not set within the template.
  • Recognizes variables set in various contexts, including {% set %} statements and {% for %} loops.
  • Automatically checks variables on file save and provides a command to manually trigger checking.

• UI Variable Panel:

  • Displays a panel in the sidebar that shows the variables used and set in the current template.
  • Update the panel by saving the file or manually triggering variable checking.

• Save variables in configuration:

  • Save the variables in the configuration file to avoid rechecking the variables every time you open the file.
  • This feature is useful for large files with many variables, and it works with the quick fix vscode feature.

• Toggle Variable Checking:

  • Allows you to toggle the variable checking feature on and off.
  • Useful for debugging or when you want to temporarily disable variable checking.
  • Use command "Toggle check jinja2 variable check" to toggle the feature.
  • Use configuration Toggle check jinja2 variable check to set the variable checking feature.

• Jinja2 Comment Toggling:

  • Press Ctrl+/ (Cmd+/ on macOS) to toggle Jinja2-style comments {# #} on the current line or selected lines.
  • Automatically detects whether a line is already commented and toggles accordingly.
  • Works with single lines and multi-line selections — all selected lines are commented or uncommented together.
  • Preserves indentation when adding or removing comment markers.

• Template Preview v2:

  • Run Jinja2: Open Template Preview to see how your template renders, or Jinja2: Preview Template with Profile to pick a named context profile.
  • Named context profiles — save multiple JSON contexts per template (or a workspace-wide * fallback) and switch between them from the sidebar.
  • Mock data presets — start fast with built-in presets: user, list, paginated, form.
  • Live updates — the rendered preview re-renders as you edit the JSON context or the template itself.
  • Missing-variable chips — undefined variables appear as clickable chips you can add to the active profile in one click.
  • Collapsible context editor — give the rendered preview the full panel width when you don't need to tweak the context.
  • CSS-aware preview — the preview automatically detects and applies your project's CSS so the output looks like the real thing:
    • Flask url_for('static', filename='...') and hardcoded /static/ paths are resolved from your workspace
    • CDN stylesheets (Bootstrap, Tailwind CDN, Bulma, …) are loaded directly from the <link> tags
    • Inline <style> blocks are extracted from the template and all its {% extends %} ancestors
    • When no CSS is found, a structural fallback stylesheet highlights semantic elements (<header>, <section>, <nav>, <aside>, <article>, <footer>) so the layout is readable at a glance

• Filter Docs on Hover:
  • Hover any built-in Jinja2 filter (length, default, safe, lower, title, join, …) to see its signature, description, and a usage example.
  • Documentation is available in English and Spanish, matching your VS Code display language.
  • Works in .html, .jinja2, .j2, and .jinja files.

• Jinja2-aware Formatting:
  • Delegates formatting to prettier-plugin-jinja-template — best-in-class Jinja2 + HTML formatting with zero custom-parser maintenance.
  • Auto-detects the plugin in your project; if it's missing, the extension offers to install it automatically.
  • Format on save enabled by default via jinja2-html-enhancer.formatting.formatOnSave (master toggle: jinja2-html-enhancer.formatting.enabled).
  • Works for .html, .jinja2, .j2, and .jinja files. Also runs from VS Code's manual format command.

• Macro IntelliSense (same-file):
  • Autocomplete and parameter hints for macros defined in the current template.
  • Type {{ to see local macros with their signatures.
  • Trigger signature help with ( to see parameters as you type — including the active parameter.
  • Also supports cross-file macros ({% import %} namespaces and inherited macros via {% extends %}).

• Theme Support:
  • Choose from multiple themes for Jinja2 syntax highlighting.
  • You can select a theme using the command "Choose Jinja2 Theme" from the command palette (Ctrl+Shift+P).
  • Themes include:
    • Dark Default
    • Light Default
    • Dark High Contrast
    • Light High Contrast
    • Xuby Selection (custom theme)
  • Also you can change the theme colors on your settings:
  • Enter "editor.tokenColorCustomizations": { "textMateRules": [] } in your settings.json file.

Example

Here's an example of the syntax highlighting in action:

And here's an example of the variable checking and UI variable panel:

And here's an example of the variable saving in the configuration file:

Theme Selection

You can choose from multiple themes for Jinja2 syntax highlighting. To select a theme, use the command "Choose Jinja2 Theme" from the command palette (Ctrl+Shift+P). The available themes are:

Dark Default theme, which provides a dark background with contrasting colors for Jinja2 syntax.

Light Default theme, which provides a light background with contrasting colors for Jinja2 syntax.

Dark High Contrast theme, which provides a high contrast dark background for better visibility.

Light High Contrast theme, which provides a high contrast light background for better visibility.

Xuby Selection theme, which is a custom theme with unique colors for Jinja2 syntax.

Installation

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or press Ctrl+Shift+X.
3. Search for Jinja2 Enhance.
4. Click Install.

Alternatively, you can install the extension from the Visual Studio Code Marketplace or the Open VSX Registry.

Usage

1. Open a file with the .html extension.
2. The extension will automatically apply syntax highlighting to both HTML and Jinja2 templating language.
3. Variable checking will occur automatically when you save the file.
4. To manually check variables, use the command "Check Jinja2 Variables" from the command palette (Ctrl+Shift+P).
5. The UI variable panel will display the variables, use the command "Open jinja2 Variable Panel" to open it.
6. Warnings for undefined variables will appear as diagnostics in your editor.

Supported Jinja2 Syntax

• {% for %}, {% if %}, {% block %}, and other control structures.
• {{ variable }} for variable interpolation.
• {% extends %}, {% include %}, {% set %}, {% import %}, {% macro %}, and more.
• Pipe filters like | capitalize, | default, | length, | lower, | upper, etc.

Customization

You can customize the colors used for Jinja2 syntax highlighting by modifying your VSCode theme settings. For example, to change the color of keywords and filters, you can add the following to your settings:

Backend-aware features

• Backend Variables panel. A dedicated webview that lists every variable the backend (Flask render_template, Django render, FastAPI TemplateResponse, Express / Nunjucks .render(), …) passes to the active template, with a one-click Go to definition button per location.
• Go to backend definition. cmd+click (or F12) on a variable inside {{ … }} / {% … %} jumps to the line in your .py / .js / .ts source where it's declared.
• Hover with backend info. Hovering a variable in a template shows the backend file:line where it's set, as a clickable link.
• Quick-fix / lightbulb action. cmd+. on a variable offers "Go to backend definition of ''" — one entry per declaration site.
• Template Preview — Render templates with backend variables directly in VS Code to catch missing variables before render time.

Roadmap

Curious about what's coming next? Check out the Roadmap for the full list of planned features.

Contributing

If you want to contribute to this project, feel free to submit issues or pull requests in the GitHub repository

License

This project is licensed under the MIT License - see the LICENSE file for details.