【初心者向け】VSCodeでDjango-htmlを自動整形したいときに躓いたのでメモ #Python

はじめに

この記事ではDjango-htmlのフォーマッター（厳密に言うと違うけど）をVisual Studio Code上で動かすのに困った点などをまとめる。

Django-girlsとかから取り敢えず初めて見たけど、
「there is no formatter for 'django-html' files installed('django-html' ファイルのフォーマッタがインストールされていません。)」って出て苦戦してる人向け。

コーディングは見やすさが命。

記述パターンを統一することで可読性が上がり、純粋な作業効率のUPだけでなく
スムーズなチーム間共有にも繋がる。あと見やすいとモチベも向上する。

それを自動でお手伝いしてくれる拡張機能(とか)が、いわゆるコードフォーマッター。
便利な世の中になったよね。

手順的には割とあっさりなので、仕組みが分からずなんでやねんと試行錯誤した部分を先に走り書きとしてまとめておく。

VSCodeの内部にもjs-beautifyというフォーマッターがあり、実は結構これで色々できる。けど使用するスタイルを変更する機能がないので断念。
Extensionsとしてはprettierとかが有名。だけどhtml,css,jsとかに対応してる一方でDjango-htmlはこちらも非対応だった為断念。（settingうまく弄ればいけたかも？
beautifyはjs-beautifyで出来ない設定を可能にし、拡張性をもたらすアドオン。今回はこれを使用。
留意点として、Django-html用のformatterは、2020年7月現時点では存在しない(多分)。今回はhtml扱いのなかで、Django-htmlをフォーマットしているため、Djangoテンプレートとの融和性は低め。なのですべてがきれいに整えられるわけではないことに注意。

setting.json

  "beautify.language": {
    "html": [
        "htm", "html", "django-html"
    ]
  }

最初は「拡張子htmlなのにエンコードされない、ぐぬぬ..」とかれこれ１時間ほど設定を見直していたが、Django-html用のformatterがないという初歩的な勘違いだった。おかげでjs-beautifyとprettierの特徴や違いが学べたから良しとしよう。

Djangoはbeautifyでjsはprettierとか言語別でフォーマットをしておくと便利かも。

ちなみにVSCode内蔵のformatを指定するときはこう↓

"editor.defaultFormatter": "vscode.html-language-features"

最後までお読みいただきありがとうございました。