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
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>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>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>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-enhancementsAdd it to your Prettier configuration file (e.g. .prettierrc):
Read more about prettier-plugin-twig-melody config options and Prettier's options.
Credits
The test suites here are from fvictorio/prettier-plugin-toml.