prettier-plugin-twig-enhancements

Subtle enhancements for Prettier Twig plugin, prettier-plugin-twig-melody.

Note: This is a plugin for prettier-plugin-twig-melody, not a Prettier plugin.

I made this originally to format YAML frontmatter in Nunjucks templates (since Nunjucks is similar to Twig in syntax) and to address this issue. However it appears the Twig plugin isn't well compatible with Nunjucks, so I'm not using this currently.

Table of Contents

• Enhancements
  • Formatting HTML more like Prettier
  • Printing empty {% block %} statements on one line
• Usage
• Credits

Enhancements

Formatting HTML more like Prettier

Input:

<title>
  {{ title }} | {{ site.title }}
</title>

<h1>Hello, world!</h1>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit sequi modi voluptate quidem enim! Earum voluptatem accusantium nulla cupiditate exercitationem qui? Facilis explicabo veritatis iusto dignissimos laboriosam quidem ipsa sed!</p>

<input type="email" name="email" id="email" class="form-control form-control--large form-control--email">

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            Success!
    </div>

<span class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></span>

Output without this plugin:

<title>
  {{ title }} | {{ site.title }}
</title>

<h1>
  Hello, world!
</h1>

<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit sequi modi
  voluptate quidem enim! Earum voluptatem accusantium nulla cupiditate
  exercitationem qui? Facilis explicabo veritatis iusto dignissimos laboriosam
  quidem ipsa sed!
</p>

<input type="email"
  name="email"
  id="email"
  class="form-control form-control--large form-control--email" />

<div class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  Success!
</div>

<span class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true">

</span>

Output with this plugin:

<title>{{ title }} | {{ site.title }}</title>

<h1>Hello, world!</h1>

<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit sequi modi
  voluptate quidem enim! Earum voluptatem accusantium nulla cupiditate
  exercitationem qui? Facilis explicabo veritatis iusto dignissimos laboriosam
  quidem ipsa sed!
</p>

<input
  type="email"
  name="email"
  id="email"
  class="form-control form-control--large form-control--email"
/>

<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  Success!
</div>

<span
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
></span>

Printing empty {% block %} statements on one line

Input:

        {% block styles %}

        {% endblock %}

    {% block scripts %}{%endblock%}

Output without this plugin:

{% block styles %}

{% endblock %}

{% block scripts %}
{% endblock %}

Output with this plugin:

{% block styles %}{% endblock %}

{% block scripts %}{% endblock %}

Usage

Install with npm. prettier-plugin-twig-melody is a peer dependency so it should also be installed.

npm install --save-dev prettier-plugin-twig-enhancements

Add it to your Prettier configuration file (e.g. .prettierrc):

{
  "twigMelodyPlugins": ["node_modules/prettier-plugin-twig-enhancements"]
}

Read more about prettier-plugin-twig-melody config options and Prettier's options.

Credits

The test suites here are from fvictorio/prettier-plugin-toml.