VSCodeにおけるDjango-htmlのformatterについて


# はじめに

VSCoeでPrettierを使っていると、Djangoのtemplateがぐちゃぐちゃに整形されたので、いろいろと調べた結果を書いてみる。

## 使うコード

```django
{% extends 'base.html' %}

{% block title %}{{ section.title }}{% endblock %}

{% block header %}
<div class='jumbotron jumbotron-fluid'>
<div class='container'>
<h1 class='display-4'>Django-html</h1>
<p class='lead'>Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？</p>
</div>
</div>
{% endblock header %}

{% block content %}
<div class='container'>
{% for item in object_list %}
<div class='alert alert-{{ item.priority }}' role='alert'>
<p>{{ item.title }}</p>
<a href='#' class='btn btn-info' tabindex='-1' role='button'aria-disabled='true'>Django-htmlのformatterはどれがいいの？Beautify</a>
<a href='#' class='btn btn-primary' tabindex='-1' role='button'aria-disabled='true'>Django-htmlのformatterはどれがいいの？Prettier</a>
<a href='#' class='btn btn-success' tabindex='-1' role='button'aria-disabled='true'>Django-htmlのformatterはどれがいいの？Pretty Diff</a>
</div>
{% endfor %}
</div>
{% endblock content %}
```

# 1. Prettier

```django
{% extends 'base.html' %} {% block title %}{{ section.title }}{% endblock %} {%
block header %}
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Django-html</h1>
    <p class="lead">
      Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？
    </p>
  </div>
</div>
{% endblock header %} {% block content %}
<div class="container">
  {% for item in object_list %}
  <div class="alert alert-{{ item.priority }}" role="alert">
    <p>{{ item.title }}</p>
    <a
      href="#"
      class="btn btn-info"
      tabindex="-1"
      role="button"
      aria-disabled="true"
      >Django-htmlのformatterはどれがいいの？Beautify</a
    >
    <a
      href="#"
      class="btn btn-primary"
      tabindex="-1"
      role="button"
      aria-disabled="true"
      >Django-htmlのformatterはどれがいいの？Prettier</a
    >
    <a
      href="#"
      class="btn btn-success"
      tabindex="-1"
      role="button"
      aria-disabled="true"
      >Django-htmlのformatterはどれがいいの？Pretty Diff</a
    >
  </div>
  {% endfor %}
</div>
{% endblock content %}

```

う～～～～ん......
prettier-plugin-djangohtmlというものを見つけたものの、使い方がわからない...

# 2. Beautify

```django
{% extends 'base.html' %}

{% block title %}{{ section.title }}{% endblock %}

{% block header %}
<div class='jumbotron jumbotron-fluid'>
  <div class='container'>
    <h1 class='display-4'>Django-html</h1>
    <p class='lead'>Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？</p>
  </div>
</div>
{% endblock header %}

{% block content %}
<div class='container'>
  {% for item in object_list %}
  <div class='alert alert-{{ item.priority }}' role='alert'>
    <p>{{ item.title }}</p>
    <a href='#' class='btn btn-info' tabindex='-1' role='button'
      aria-disabled='true'>Django-htmlのformatterはどれがいいの？Beautify</a>
    <a href='#' class='btn btn-primary' tabindex='-1' role='button'
      aria-disabled='true'>Django-htmlのformatterはどれがいいの？Prettier</a>
    <a href='#' class='btn btn-success' tabindex='-1' role='button'
      aria-disabled='true'>Django-htmlのformatterはどれがいいの？Pretty Diff</a>
  </div>
  {% endfor %}
</div>
{% endblock content %}
```

きれいに整形してくれています。

# 3. Pretty Diff (Unibeautify)

```django
{% extends 'base.html' %}

{% block title %}{{ section.title }}
{% endblock %}

{% block header %}
  <div class='jumbotron jumbotron-fluid'>
    <div class='container'>
      <h1 class='display-4'>Django-html</h1>
      <p class='lead'>Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？</p>
    </div>
  </div>
{% endblock header %}

{% block content %}
  <div class='container'>
    {% for item in object_list %}
      <div class='alert alert-{{ item.priority }}' role='alert'>
        <p>{{ item.title }}</p>
        <a href='#' class='btn btn-info' tabindex='-1' role='button' aria-disabled='true'>Django-htmlのformatterはどれがいいの？Beautify</a>
        <a href='#' class='btn btn-primary' tabindex='-1' role='button' aria-disabled='true'>Django-htmlのformatterはどれがいいの？Prettier</a>
        <a href='#' class='btn btn-success' tabindex='-1' role='button' aria-disabled='true'>Django-htmlのformatterはどれがいいの？Pretty Diff</a>
      </div>
    {% endfor %}
  </div>
{% endblock content %}
```

Pretty DiffはJinja2形式に対応しているためテンプレートタグに対してもインデントがきいています。
以下の記事を参考にPretty Diffを見つけました。
[atom-beautifyを使ったJinja2のソースコード整形](https://qiita.com/yagays/items/f308c5cec481aea35fa1)
3,4行目は

```django
{% block title %}
{{ section.title }}
{% endblock %}
```
こう書くことによって

```django
{% block title %}
  {{ section.title }}
{% endblock %}
```

よりきれいに整形されます。
**使い方**
VSCodeでは[Unibeautify for VSCode](https://marketplace.visualstudio.com/items?itemName=Glavin001.unibeautify-vscode)という拡張から使えます。
拡張をインストールし、プロジェクトディレクトリ内に `.unibeautifyrc.yaml` または `.unibeautifyrc.json` を作成する。~~setting.jsonに"unibeautify.defaultConfig": "/path/to/your/.unibeautifyrc.(yml or json)",を追加すれば設定完了。~~ `.unibeautifyrc`を作成すれば、自動的にフォーマットしてくれます。
詳しくは
https://github.com/Unibeautify/vscode

**追記**
Pretty Diffでは属性の折り返しがautoで設定されているみたいです。
configファイル内で"wrap_line_length"の値を変えてあげればこんな風にできます！
"wrap_line_length": 80

```django
{% extends 'base.html' %}

{% block title %}
  {{ section.title }}
{% endblock %}

{% block header %}
  <div class='jumbotron jumbotron-fluid'>
    <div class='container'>
      <h1 class='display-4'>Django-html</h1>
      <p class='lead'>Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？</p>
    </div>
  </div>
{% endblock header %}

{% block content %}
  <div class='container'>
    {% for item in object_list %}
      <div class='alert alert-{{ item.priority }}' role='alert'>
        <p>{{ item.title }}</p>
        <a
          href='#'
          class='btn btn-info'
          tabindex='-1'
          role='button'
          aria-disabled='true'>Django-htmlのformatterはどれがいいの？Beautify</a>
        <a
          href='#'
          class='btn btn-primary'
          tabindex='-1'
          role='button'
          aria-disabled='true'>Django-htmlのformatterはどれがいいの？Prettier</a>
        <a
          href='#'
          class='btn btn-success'
          tabindex='-1'
          role='button'
          aria-disabled='true'>Django-htmlのformatterはどれがいいの？Pretty Diff</a>
      </div>
    {% endfor %}
  </div>
{% endblock content %}
```
値を小さくすればより細かく折り返ししてくれます。好みで変えればOK

# 4. 既定のHTMLフォーマッタ

```django
{% extends 'base.html' %}

{% block title %}{{ section.title }}{% endblock %}

{% block header %}
<div class='jumbotron jumbotron-fluid'>
    <div class='container'>
        <h1 class='display-4'>Django-html</h1>
        <p class='lead'>Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？Django-htmlのformatterはどれがいいの？</p>
    </div>
</div>
{% endblock header %}

{% block content %}
<div class='container'>
    {% for item in object_list %}
    <div class='alert alert-{{ item.priority }}' role='alert'>
        <p>{{ item.title }}</p>
        <a href='#' class='btn btn-info' tabindex='-1' role='button'
            aria-disabled='true'>Django-htmlのformatterはどれがいいの？Beautify</a>
        <a href='#' class='btn btn-primary' tabindex='-1' role='button'
            aria-disabled='true'>Django-htmlのformatterはどれがいいの？Prettier</a>
        <a href='#' class='btn btn-success' tabindex='-1' role='button'
            aria-disabled='true'>Django-htmlのformatterはどれがいいの？Pretty Diff</a>
    </div>
    {% endfor %}
</div>
{% endblock content %}
```

ふつうにきれいに整形されます
以下の記事で設定を紹介されています。
[Visual Studio Codeのhtmlフォーマッターのメモ](https://qiita.com/rubytomato@github/items/d4716c41a2d15c64f791)

# まとめ
特にこだわりがない人は既定のHTMLフォーマッタで問題がないので使うべきです。私はHTMLを書き始めたころにフォーマッタを調べた際、Prettierの属性の折り返しがきれいだと思って使い始めたのですが、設定次第で既定のHTMLフォーマッタで同じことができます。
テンプレートタグにもインデントをきかせたいという方はPretty Diffがいいでしょう。この記事を書き始めたときはPretty Diffを紹介するつもりだったのに、デフォルトがふつうに良くて、もうこれでいいじゃんってなっちゃいました。個人的にはPretty Diffがちゃんとインデントされていて一番見やすいように感じます。
~~それから、UnibeautifyではHTMLのフォーマッタとしてPretty DiffとJS-Beautifyも使えます。二つが連携してテンプレートタグのインデントと属性の折り返しは両立できないものでしょうか。~~
Pretty Diffで属性の折り返しまでできました～～。飽きるまではPretty Diffを使っていこうと思います。