Go to Qiita Advent Calendar 2024 Top
LoginSignup
22
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@ajim

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

Last updated at Posted at 2019-06-26

はじめに

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

使うコード

{% 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

{% 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

{% 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)

{% 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のソースコード整形
3,4行目は

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

こう書くことによって

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

よりきれいに整形されます。
使い方
VSCodeではUnibeautify for 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

{% 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フォーマッタ

{% 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フォーマッターのメモ

まとめ

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

22
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
22
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?