問題と原因

久しぶりにDjangoを触ってWebサイトの改修をしていました。

何気なく保存をした瞬間に、謎の構文エラーが出る...という事態に苦しんでいました。

VSCodeの自動整形時に、テンプレート構文が崩れる
なぜ？


よくよく調べてみると、VSCodeのPrettierで保存時に自動整形が走るように設定していた結果、保存時にHTMLとして解析され、変な部分で改行されてしまって、テンプレート構文が正しく認識できなくなっていることに気づいたのです。

さて、どうしたものか...



対処法

VSCodeの拡張機能で、Djangoを入れる。

VSCodeの拡張機能 Django



これで、テンプレート構文で書いたDjango HTMLとして解析されるようになります。

VSCode
下部のファイル種別がちゃんとDjango HTMLになってますね




VSCodeの拡張機能で、Beautifyを入れる。
ただしこの拡張機能、メンテナンスが止まっているので非推奨扱いになっています（インストールは普通にできるものの、利用は自己責任で！）

VSCodeの拡張機能 Beautify


.vscode/settings.jsonで、以下のように書いて保存。



これでOK！
保存しても、構文が崩れなくなりました。良かった良かった。


※ちなみに、VSCodeでなく、PyCharmなどのPythonに強いエディタを使えば、こうした現象はそもそも起きないので楽、というコメントも見かけました。それはそう。



参考