htmldjangoファイルのフォーマットに成功した

• 日本語

• htmldjango
• Tera
• Python
• coc-htmldjango
• djLint

困っていること

dnfolioでは、Tera というHTMLテンプレートエンジンを利用している。 例えば、about ページ用の templates/about.html はこう書いている。

{% extends "base.html" %} {% block head %}
<meta name="description" content="{{page.description}}">
<meta property="og:type" content="website">
<meta property="og:image" content="https://dnfolio.dev/icons/icon.png">
<meta property="og:title" content="{{page.title}}">
<meta property="og:description" content="{{page.description}}">
<meta property="og:site_name" content="dnfolio" />
<meta property="og:email" content="daiki48.engineer@gmail.com">
<meta property="og:url" content="https://dnfolio.dev/about">

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Daiki48engineer">
<meta name="twitter:title" content="{{page.title}}">
<meta name="twitter:description" content="{{page.description}}">
<meta name="twitter:image" content="https://dnfolio.dev/icons/icon.png">

{% endblock head %} {% block title %} {{ page.title }} {% endblock title %} {%
block content %}
<h1 class="title">{{ page.title }}</h1>
{{ page.content | safe }} {% endblock content %}

これでもまぁ読めることは読めるが、この部分が個人的に気になる。

{% endblock head %} {% block title %} {{ page.title }} {% endblock title %} {%
block content %}
<h1 class="title">{{ page.title }}</h1>
{{ page.content | safe }} {% endblock content %}

{% で折り返しているのは、 dprint の幅を 80 に設定しているため。 Prettier でもこの幅で利用しているので問題無いが、変な部分で折り返しているなぁと思う。 あと、そもそも {% endblock head %} の部分で改行して次の行は {% block title %} からスタートしてほしい。 このフォーマットは dprint の markup_fmt による結果。

こちらが現在の dprint.json 設定。

{
  "json": {
  },
  "markdown": {
  },
  "toml": {
  },
  "malva": {
  },
  "markup": {
    "printWidth": 80,
    "formatComments": true,
    "scriptIndent": true,
    "styleIndent": true
  },
  "excludes": [
    "**/*-lock.json",
    "**/node_modules",
    "**/templates"
  ],
  "plugins": [
    "https://plugins.dprint.dev/json-0.19.4.wasm",
    "https://plugins.dprint.dev/markdown-0.17.8.wasm",
    "https://plugins.dprint.dev/toml-0.6.4.wasm",
    "https://plugins.dprint.dev/g-plane/malva-v0.11.1.wasm",
    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.18.0.wasm"
  ]
}

coc-htmldjango を発見した

私は Neovim の coc.nvim を利用している。この extensions として公開されていた。

coc-htmldjango | yaegassy GitHub

これを導入すればフォーマット出来るのでは？と思い早速導入してみた。

Pythonインストール

私は、Python を使ったことが無かったのでインストールからしていく。

Python Releases for Windows | python

環境によってインストールするファイルは異なるが、私の場合は Download Windows installer (64-bit) をインストールした。 インストーラーに従って進める。

インストーラーの画面でPathを通すチェックボックスもあるのでチェックを忘れずに。 チェックしなかった場合はインストール後に手動で環境変数にPathを通す必要がある。

インストール出来たか確認する。

python --version

Python 3.13.1

私の場合は、pip も一緒にインストールされていた。

pip --version

pip 24.3.1 from D:\python\Lib\site-packages\pip (python 3.13)

coc-htmldjango をインストール

README の Install 項目を確認する。

Install | coc-htmldjango

私は、すでに coc.nvim ユーザーなので CocInstall コマンドでインストールした。

:CocInstall coc-htmldjango

coc-html も一緒にインストールする必要があるようだ。

Recommended coc-extensions to install together
coc-html

:CocInstall coc-html

対象のファイルを開いてフォーマットを実行する

先ほどの templates/about.html をフォーマットしてみる。

フォーマット前がこちら。

{% extends "base.html" %} {% block head %}
<meta name="description" content="{{page.description}}">
<meta property="og:type" content="website">
<meta property="og:image" content="https://dnfolio.dev/icons/icon.png">
<meta property="og:title" content="{{page.title}}">
<meta property="og:description" content="{{page.description}}">
<meta property="og:site_name" content="dnfolio" />
<meta property="og:email" content="daiki48.engineer@gmail.com">
<meta property="og:url" content="https://dnfolio.dev/about">

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Daiki48engineer">
<meta name="twitter:title" content="{{page.title}}">
<meta name="twitter:description" content="{{page.description}}">
<meta name="twitter:image" content="https://dnfolio.dev/icons/icon.png">

{% endblock head %} {% block title %} {{ page.title }} {% endblock title %} {%
block content %}
<h1 class="title">{{ page.title }}</h1>
{{ page.content | safe }} {% endblock content %}

フォーマットしてみる。

Commands | coc-htmldjango

:CocCommand htmldjango.djlint.format

すると

{% extends "base.html" %}
{% block head %}
    <meta name="description" content="{{ page.description }}">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://dnfolio.dev/icons/icon.png">
    <meta property="og:title" content="{{ page.title }}">
    <meta property="og:description" content="{{ page.description }}">
    <meta property="og:site_name" content="dnfolio" />
    <meta property="og:email" content="daiki48.engineer@gmail.com">
    <meta property="og:url" content="https://dnfolio.dev/about">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@Daiki48engineer">
    <meta name="twitter:title" content="{{ page.title }}">
    <meta name="twitter:description" content="{{ page.description }}">
    <meta name="twitter:image" content="https://dnfolio.dev/icons/icon.png">
{% endblock head %}
{% block title %}
    {{ page.title }}
{% endblock title %}
{%
block content %}
<h1 class="title">{{ page.title }}</h1>
{{ page.content | safe }}
{% endblock content %}

フォーマット出来た！
めちゃくちゃ見やすい。

dotfiles を編集

毎回このフォーマットコマンドを打つのはめんどくさい…

:CocCommand htmldjango.djlint.format

よって coc.nvim の設定を編集する。

vim.api.nvim_create_user_command("Djlint", function()
  vim.fn.CocAction("runCommand", "htmldjango.djlint.format")
end, {})

詳しい設定内容は dotfiles を確認してほしい。

dotfiles | Daiki48 GitHub

今回の htmldjango フォーマットには djLint を利用している。

テンプレートエンジンは Tera しか利用したことが無いが、今後別のテンプレートエンジンでフォーマット出来ない場合にこの記事を参考にしようと思う。