More than 3 years have passed since last update.

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

Last updated at 2020-12-09Posted at 2020-07-20

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

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

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

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

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

##実行環境

##留意点

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

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

##導入手順
#####１．Ctrl+Shift+xでbeautifyを検索、install

#####２．Ctrl+,でsettingsから、右上の.jsonで開き以下を追記

setting.json

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

#####３．保存してVSCodeを再起動

#####４．編集中のdjango-htmlでフォーマットしたい範囲をCtrl+K Ctrl+Fで選択、フォーマット。（全体で行うときはShift + Alt + F）

#####終わり。

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

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

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

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

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