Does vscode have a plugin that can recognize jinja variable in javascript?

Question

A similar question like this: Javascript is not recognizing a Flask variable

When I type things like this in vscode,

<script type="text/javascript">
    var x ={{ data }};
</script>

it will always reformat like this

<script type="text/javascript">
    var x = {
        {
            data
        }
    };
</script>

No longer a Jinja variable, and cannot really work in js.
So, is there such a plugin in vscode that can fix this problem?

Answer 1

The problem here lies with VSCode, especially with Syntax Highlighting and Formatting Extensions.

There is some conflict between some of your enabled extensions which - on save - format the JavaScript code in above way.

1. Disable all enabled formatting extensions in VSCode

2. I only activated the following:

   • Python
   • Python Extension Pack by Jayamanne
   • Better Jinja by Samuel Colvin

This way on save the syntax doesn't get shredded anymore making the JavaScript recognize your {{ data }} correctly.