FlaskでJinja2テンプレート内でJavaScriptを使用する場合の注意点

Jinja2とJavaScriptの構文の違いについてVScode上で発生する問題点に関するメモ

Jinja2テンプレート内でJavaScriptを使用する場合は、Jinja2とJavaScriptの構文の違いに注意する必要があるようです。

今回ハマった内容。

データベースから特定のデータを削除する際に、誤って削除することがないよう、アラート表示するためにJavaScriptでダイアログを表示

<script>
       function confirmDelete(bookId) {
           if (confirm('本当に削除しますか？')) {
                window.location.href = '/delete/' + bookId;
           }
      }
</script>

HTML記述内に以下の削除ボタンを押すことで、アラートが実行されるように設定

<a href="#" class="btn btn-danger" onclick="confirmDelete({{ book['book_id'] }});">削除</a>

この記述にVScode上の以下の問題点が指摘

<a href=”#” class=”btn btn-danger” onclick=”confirmDelete({①{ book②[‘book_id’] ③}④});”>削除</a>

この記述の①の部分でProperty assignment expected.javascript

この記述の②の部分で’,’ expected.javascript

この記述の③の部分で’:’ expected.javascript

この記述の④の部分で’,’ expected.javascript

setting.jsonファイルに、以下の記述を追加することで解決

"files.associations": {
    "*.html": "jinja-html"
}

"files.associations" を追記することで、VS Codeが .html ファイルを jinja-html として認識するようになり、Jinja2テンプレートの埋め込みが適切にハンドリングされるようになったようです。

json編集時も問題点が指摘されたため、その内容にハマったのであえてメモ

上記文言を追加した後、Expected commaの内容がどこの部分なのか、毎回この手の内容に時間を費やすので、いい加減気づきたい。

全体のjson記述

{
    "[python]": {
        "editor.formatOnType": true
    },　# ⇒これが抜けていた。
    "files.associations": {
        "*.html": "jinja-html"
    }
}