Why is VS Code showing an error when I use a jinja2 for loop inside javascript? - Stack Overflow

admin管理员组

文章数量:1345106

I am using Flask do develop a web app to visualize data retrieved from a database. I want to include a chart which requires a Jinja for loop to acplish population of the chart. When I place the for loop inside the JavaScript <script> tag in an .html document VS Code shows a syntax error. It's fine outside the <script> tag. I tried the exact same code in Eclipse and receive no formatting error. I have also noticed that Jinja text tags such as '{{label}}' can be entered inside JavaScript with no syntax error showing.

screen shot of syntax error in VS Code

I have spent a lot of development time in VS Code and would prefer to not have to switch IDEs at this stage. Any help would be greatly appreciated.

I am using Flask do develop a web app to visualize data retrieved from a database. I want to include a chart which requires a Jinja for loop to acplish population of the chart. When I place the for loop inside the JavaScript <script> tag in an .html document VS Code shows a syntax error. It's fine outside the <script> tag. I tried the exact same code in Eclipse and receive no formatting error. I have also noticed that Jinja text tags such as '{{label}}' can be entered inside JavaScript with no syntax error showing.

screen shot of syntax error in VS Code

I have spent a lot of development time in VS Code and would prefer to not have to switch IDEs at this stage. Any help would be greatly appreciated.

• javascript
• visual-studio-code
• syntax
• jinja2

Share Improve this question Follow asked Nov 9, 2020 at 19:26 Eric FeightEric Feight 13611 silver badge66 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

After a bit of experimenting I found the Python Extension Pack by Don Jayamanne. It solved the syntax error problem. I still get some strange color coding, but everything seems to be working. If anyone has a suggestion of a better extension pack, I would love to give it a try.

I changed the HTML to Jinjascreenshot in the bottom right and it solved the issue for me.

Thanks for the earlier posts

It seems that VS Code's HTML language mode identifies some Jinja syntax as errors. You can address this by changing your language mode in the bottom right from HTML to Django HTML.

This is what the Python Extension Pack that Eric mentions above is doing.

Not a perfect solution, but a decent work around.

One workaround is that you could put jinja2 template's code as js ment, jinja2 template will work as expected. For example,

const messages = [];
// {% for field, errors in form.errors.items() %}
    // {% for error in errors %}
    messages.push(`{{ field }}:{{ error }}`)
    // {% endfor %}
// {% endfor %}
console.log(messages)

Another option is to use with backtick character

const flashMessages = JSON.parse(`{{ get_flashed_messages() | tojson }}`);

Or make it string and convert to appropriate datatype(int here) like this

<button class="btn btn-primary" type="button" onclick='fetchServicePackage(parseInt("{{ service.id }}", 10))'>View Packages</button>

These worked for me in my Flask App.

本文标签： Why is VS Code showing an error when I use a jinja2 for loop inside javascriptStack Overflow