dnfolioのコードフォーマッターにdprintを使ってみた

dnfolioのコードフォーマッターにdprintを使ってみた

普段はPrettierユーザー

私の利用しているNeovim環境では、coc.nvim をIDEとして利用しているが、そのプラグインである coc-prettier もよく利用している。

ただ、他の競合ツールも使ってみたいので個人サイト環境で好き放題使ってみよう。dprintを。

dprintってなんだ

dprint

A pluggable and configurable code formatting platform written in Rust.

Rust製らしい。

噂ではDenoの内部でも利用されているとか？

.dprint.json | GitHub denoland/deno

dprintの導入

公式ドキュメントに手順が書いてあるのでなぞっていく。

インストール

私はWindows環境で scoop を利用しているが、今回はプロジェクトのローカルでDenoを使って利用することにした。

deno.json を作成して以下の内容を書く。

{
  "tasks": {
    "fmt": "deno task dprint fmt",
    "fmt:check": "deno task dprint check",
    "dprint": "deno run -A npm:dprint"
  }
}

初期化を行う。

deno task dprint init

dprintはフォーマッターを拡張して利用するスタイルっぽいので、今回はHTMLのフォーマッターである markup_fmt と SASSに対応している malva 、あとは TOML と JSON と Markdown に対応しているプラグインを導入した。

"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"
]

あとは、 deno.json に設定している tasks を実行すれば良い。

deno task fmt

Task fmt deno task dprint fmt
Task dprint deno run -A npm:dprint "fmt"
Formatted 2 files.

Teraを利用している場合はちょっと工夫が必要

Tera というHTMLテンプレートエンジンを利用しているが、dprintやPrettier実行時にエラーが発生していた。

例えば、dnfolioの templates/base.html ではこのように書いていた。

<link rel="icon" href="{{get_url(path="/icons/favicon.ico") | safe}}" sizes="any" />

これに対してdprintでフォーマットした場合エラーが発生する。

deno task fmt

Task fmt deno task dprint fmt
Task dprint deno run -A npm:dprint "fmt"
Error formatting D:\dev\personal\zola\dnfolio\templates\base.html. Message: syntax error 'expected self close tag' at line 11, column 46
Had 1 error formatting.

なのでちょっと工夫した。

HTML内でTera専用の構文を使うとフォーマッターが反応しない説があったので以下のように templates/base.html を修正。

{% set url = get_url(path="/icons/favicon.ico") | safe %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dnfolio</title>
    <link rel="stylesheet" href="/style.css" />
    <link rel="icon" href="{{url}}" sizes="any" />
  </head>

  <body>
    {% include "components/header.html" %}
    <section class="section">
      <div class="container">{% block content %} {% endblock %}</div>
    </section>
    <footer>
      <span>© 2024 - 2025 dnfolio</span>
    </footer>
  </body>
</html>

そして実行してみたら

deno task fmt

Task fmt deno task dprint fmt
Task dprint deno run -A npm:dprint "fmt"

問題無さそう。

工夫ポイント

get_url や safe を直接linkタグ内で定義していたが変数として切り出した。

{% set url = get_url(path="/icons/favicon.ico") | safe %}

そして、 url という変数をlinkタグで使用する。全体のコードはこちら。

{% set url = get_url(path="/icons/favicon.ico") | safe %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dnfolio</title>
    <link rel="stylesheet" href="/style.css" />
    <link rel="icon" href="{{url}}" sizes="any" />
  </head>

  <body>
    {% include "components/header.html" %}
    <section class="section">
      <div class="container">{% block content %} {% endblock %}</div>
    </section>
    <footer>
      <span>© 2024 - 2025 dnfolio</span>
    </footer>
  </body>
</html>

コードフォーマットはやっておきたいので解決して嬉しかった。