DEV Community

Xavier Díaz
Xavier Díaz

Posted on

Jinja2 Enhance: VS Code Extension for Syntax Highlighting, Variable Checking & More

#vscode #jinja2 #python #html

Jinja2 Enhance: VS Code Extension for Syntax Highlighting, Variable Checking & More

If you've ever worked with Jinja2 templates in Flask, Django, or FastAPI, you know the drill — you open an HTML file and half of it is {{ this }} and {% that %}, and VS Code just... stares at it blankly. No highlighting, no help. Just vibes.

That frustration is what pushed me to build Jinja2 Enhance — a VS Code extension that makes working with Jinja2 HTML templates actually pleasant.

What it does

At its core, it layers Jinja2 syntax highlighting on top of normal HTML highlighting, so both coexist without stepping on each other. But honestly, it grew into a lot more than that.

✨ Syntax Highlighting

Control structures, variable interpolation, filters, keywords — all highlighted in a way that actually makes the template readable at a glance.

Syntax Example

Covers the full range: {% for %}, {% if %}, {% block %}, {% extends %}, {% include %}, {% set %}, {% macro %}, pipe filters like | capitalize or | default, and more.

✨ Variable Checking — zero config

Starting in v1.13.0, the extension automatically scans your template when you open it, and re-checks every time you save. No setup, no config files.

It spots variables that are used but never defined within the template and surfaces them as warnings right in your editor — the same way VS Code flags a missing import in Python or JavaScript.

Variable Panel

It accounts for variables set via {% set %}, loop variables from {% for %}, and anything inherited from a parent template via {% extends %}.

✨ Variable Panel

A dedicated sidebar panel lists every variable used or defined in the current file. The Origin column (new in v1.13.0) tells you at a glance whether a variable comes from a {% set %}, a loop, a parent template, or your backend — no more guessing.

✨ Save Variables to Config

For larger Jinja2 templates, you can save your variable configuration so the Quick Fix lightbulb can help resolve warnings without hunting through your codebase.

Save Variable Config Example

✨ Jinja2 Comment Toggling

Ctrl+/ (or Cmd+/ on Mac) toggles {# #} Jinja2 comments on single lines or selections — exactly like you'd expect from any language in VS Code.

✨ Theme Support

Five themes available via the command palette (Ctrl+Shift+P → "Choose Jinja2 Theme"):

Theme Preview
Dark Default Dark Default
Light Default Light Default
Dark High Contrast Dark High Contrast
Light High Contrast Light High Contrast
Xuby Selection Xuby Selection

Pro Tier (coming soon)

A Jinja2 Enhance Pro version is in progress, aimed at teams doing heavier full-stack Python development:

  • Backend Variables panel — see every variable your Flask/Django/FastAPI view passes to the template
  • Go to backend definition — Cmd+click a template variable to jump straight to its declaration in Python or JS
  • Hover info — hover over a variable to see its source file and line number
  • Quick-fix lightbulb — Cmd+. on any variable offers "Go to backend definition of <var>"
  • Template Preview — render Jinja2 templates with real backend variables, right inside VS Code

Install

Search "Jinja2 Enhance" in the VS Code Extensions panel, or install directly:

Full docs at jinja2.xuby.cl.

This is an indie extension — if it saves you even a few headaches:

  • ⭐ A review on the Marketplace listing helps other developers find it
  • ❤️ A like on this post if it was useful

It really does make a difference — thank you 🙏

MIT licensed and open source. Contributions welcome on GitHub.

Top comments (0)