CODEWITHSUNDEEP
flaskjinja2prettier
hamlet2k
hamlet2k

Reputation: 19

Prettier Throws Unexpected Closing Tag Error with Flask/Jinja2 Template in VSCode

I'm working on a Flask project with Jinja2 templates in VSCode, and I've encountered an issue where Prettier is throwing an "Unexpected closing tag" error when I format my HTML template files. The error specifically points to a closing </button> tag, which seems to be in order.

Here's the Prettier error output:

[ERROR] Unexpected closing tag "button". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (67:7)

This error occurs even though the button tag is properly opened and closed within a Flask/Jinja2 block.

Here is the snippet of the template causing the issue:

<button
  class="btn btn-sm btn-primary"
  onclick="showConfirmationModal('{{url_for("delete_item",id=item.id)}}','Confirm Action','Are you sure?')"
>
Delete
</button>

I'm using Prettier v10.1.0 and VSCode v1.85.1

Does anyone know why this might be happening or how to configure Prettier to work with Flask/Jinja2 templates?

Upvotes: 1

Views: 521

Answers (1)

hamlet2k
hamlet2k

Reputation: 19

Although it works fine for the interpreter, it seems the nested quotes were the problem for the parser.

I changed the quotes " by ' in the most inner, server-side function.

Here is the updated code:

  <button
    class="btn btn-sm btn-primary"
    onclick="showConfirmationModal('{{url_for('delete_item',id=item.id)}}','Confirm Action','Are you sure?')"
  >
    Delete
  </button>

I believe the formatter (prettier) accepts only two nested levels of quotes. Since everything in {{ }} is executed server side, then it is not a problem.

Upvotes: 0

Related Questions