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
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.
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
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)