Auto formating of a .liquid-file (a Shopify theme file)

Question

I'm editting some 3rd-party code (a Shopify theme) and the code is absolutely unreadable.

Ideally, I would like to be able to auto format .liquid-files, but can't seem to be able to.

My attempt in PhpStorm

I've tried inserting the code in PhpStorm and pressing CMD + Option + l (after doing this), which does something, but makes newlines in random places, like this:

{% unless current_tags %}<h1
class="text-center text-uppercase title-under">{{ 'blogs.general.title_main' | t }}</h1>{% else %}<h1

My Attempt in Atom

In Atom I tried installing atom-beautify, but that didn't recognize the file-type. I can see that others have had my issue as well. Since .liquid share quite a lot with .blade.php, then I tried to see if there was a solution for that format, which resulted in an open thread as well.

I tried looking into adding support for a new language (with atom-beautify), but it got quite time-consuming fast.

My attempt with PrettyDiff.com

This got kinda close. But it's still a hassle, if I have an entire Shopify-theme, to copy the code into that website, before moving it to my editor. If PrettyDiff could absolutely nail the auto formatting, then I might have lived with it, - but it still does something like this:

{% if settings.show_blog_sidebar %}
  <div class="col-xl-8 col-lg-8 col-md-12" id="centerColumn">
    {% endif %}

What I would like to achieve

To make this crap:

{% unless current_tags %}<h1
class="text-center text-uppercase title-under">{{ 'blogs.general.title_main' | t }}</h1>{% else %}<h1
class="text-center text-uppercase title-under">{{ 'blogs.general.title_result' | t }} {{ current_tags.first | replace: '-', ' ' }}</h1>{% endunless %}
    {% for article in blog.articles %}{% if article.excerpt contains "SOMEVAR" %}<p>
    test</p>{% capture _article %}{% include "get-content-with-key" content: article.excerpt key: "[SOMEVAR]" %}{% endcapture %}{% capture _title %}{% include "get-content-with-key" content: _article key: "[title]" %}{% endcapture %}{% capture author %}{% include "get-content-with-key" content: _article key: "[author]" %}{% endcapture %}{% capture image %}{% include "get-content-with-key" content: _article key: "[image]" %}{% endcapture %}{% capture content %}{% include "get-content-with-key" content: _article key: "[content]" %}{% endcapture %}{% if _title == '' %}{% assign _title = article.title %}{% endif %}{% if author == '' %}{% assign author = article.author %}{% endif %}
    {% if article.comments.size > 0 %}{% assign comment_url = article.url | append: '#comments' %}{% else %}{% assign comment_url = article.url | append: '#addcomment' %}{% endif %}
        <div class="{{ grid }}">
        ...
        ...

Look like this:

{% unless current_tags %}
  <h1 class="text-center text-uppercase title-under">{{ 'blogs.general.title_main' | t }}</h1>
{% else %}
  <h1 class="text-center text-uppercase title-under">{{ 'blogs.general.title_result' | t }} {{ current_tags.first | replace: '-', ' ' }}</h1>
{% endunless %}

{% for article in blog.articles %}
  {% if article.excerpt contains "SOMEVAR" %}
    <p>test</p>
    {% capture _article %}
      {% include "get-content-with-key" content: article.excerpt key: "[SOMEVAR]" %}
    {% endcapture %}
    {% capture _title %}
      {% include "get-content-with-key" content: _article key: "[title]" %}
    {% endcapture %}
    {% capture author %}
      {% include "get-content-with-key" content: _article key: "[author]" %}
    {% endcapture %}
    {% capture image %}
      {% include "get-content-with-key" content: _article key: "[image]" %}
    {% endcapture %}
    {% capture content %}
      {% include "get-content-with-key" content: _article key: "[content]" %}
    {% endcapture %}
    {% if _title == '' %}
      {% assign _title = article.title %}
    {% endif %}

    {% if author == '' %}
      {% assign author = article.author %}
    {% endif %}

    {% if article.comments.size > 0 %}
      {% assign comment_url = article.url | append: '#comments' %}
    {% else %}
      {% assign comment_url = article.url | append: '#addcomment' %}
    {% endif %}
      <div class="{{ grid }}">
            ...
            ...

Am I really the first human being on this planet who would like to auto format a .liquid-file?

Answer 1

Use Vim or GVim syntax highlighting and command line flags to reformat your code.

vim -V -se +"filetype plugin indent on|set syntax=liquid|filetype|normal gg=G" -cwq test.liquid

-s is silent mode
-e is execution mode (not normal mode)
+"" executes the string inside the quotes, separated by pipes
-cwq is short-hand for command :wq
filetype is just for debugging
normal gg=G goes to the top of the file and re-indents all the way to the end.

If you are just using Vim as an IDE you just type gg=G in normal (not editor) mode (assuming you have filetype based indentation turned on)