Associate HTML as Jinja2 Templates in VSCode

March 23, 2021

Syntax Highlight HTML files as Jinja2 Templates


If you develop websites using a framework, such as Django or Flask, chances are you will use one of the templating languages for the HTML files. This can be Jinja2, Django-Template, Cameleon, or any other templates. What if you want the IDE to highlight the template language's syntax to help with the development process? Some IDE allows the user to select Template language by simply right-click on the folder and specify it with the template language in question.

For VSCode, if you would like to associate the HTML files with Jinja2 template language, it is a two-step process, as explained in https://dev.to/wrrnwng/associate-html-as-jinja-files-in-vscode-npa.

Here are the steps:

  • Install 'Better Jinja' Template Highlighting.
Jinja2_Highlight_1.png

  • In project-level (recommended) settings.json, associate html files with 'jinja2-html'.
HTML_Jinja2_2.png

  • ViolĂ , you now have Jinja2 syntax highlighting in your HTML templates.
HTML_Jinja2_3.png

Happy coding!

Eric

Return to blog