skip to Main Content

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?

2

Answers


  1. Can’t be formatted this way in PhpStorm yet: https://youtrack.jetbrains.com/issue/WI-12782 & https://youtrack.jetbrains.com/issue/WI-39065 – corresponding feature requests to add proper formatting you can vote for.

    Login or Signup to reply.
  2. 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)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search