theme-tools Implement https://github.com/Shopify/liquid-style-guide as checks

At quick glance, there are few things in there we could turn into new checks.

Dec 08 '20 18:12 macournoyer

Clickable link: https://github.com/Shopify/liquid-style-guide

Shortlist of rules that could be checks

Formatting

[ ] Always indent after a comment, case, when, for, if and unless statement, even if that creates extra indenting in the resulting HTML.
[x] Use spaces around operators.
[x] Use spaces around the filter pipeline |.
[x] Use space after {{ and {% , and before }} and %}.
[ ] No spaces after [ and before ].
[ ] Use spaces around the assignment = operator.
[ ] Use single quotes around string literals, not double quotes, unless the string contains a single quote.
[ ] Never use parenthesis in conditions, Liquid will ignore them.
[ ] Use and, or. Never use || or &&. Liquid will ignore everything that comes after || and &&.
[ ] Don't use filters in if and unless conditions.

Only use this: | inside assign statements or that: {{ }}
[ ] Limit lines to ~ 120 characters.
[ ] Avoid trailing whitespace.
[ ] End each Liquid template with a newline.

[ ] Indent the content of a comment with 2 spaces like so:

{% comment %}
Bad comment that spans multiple lines.
A second line in my comment.
{% endcomment %}

{% comment %}
  Good comment that spans multiple lines.
  A second line in my comment.
{% endcomment %}

Syntax

[ ] Favor unless over if for negative conditions.

{% comment %}
  Bad
{% endcomment %}
{% if settings.tagline != blank %}
  {{ settings.tagline }}
{% endif %}

{% comment %}
  Better
{% endcomment %}
{% unless settings.tagline == blank %}
  {{ settings.tagline }}
{% endunless %}

[ ] Use unless with else only when your first code block outputs a resource's content and your second serves as a fallback when that resource does not exist, or has no content.

[ ] Do not ever place tags inside tags. Do not place any {{ ... }} inside this: {{ ... }} or that: {% .. %}, nor any {% ... %} inside this: {{ ... }} or that: {% .. %}..

{% comment %}
  So bad
{% endcomment %}
{% assign my_variable = "{{ another_variable }}-handle" %}

{% comment %}
  Better
{% endcomment %}
{% assign my_variable = another_variable | append: '-handle' %}

{% comment %}
  Best
{% endcomment %}
{% capture my_variable %}{{ another_variable }}-handle{% endcapture %}

Naming

[ ] Use snake_case for all variable names.
[ ] Use snake_case for theme setting keys.

Code blocks and scope

[ ] Avoid more than two levels of for block nesting.

Feb 12 '21 15:02 charlespwd

yes please.

Except we need to push to the new comment syntax.

Feb 24 '21 13:02 tobi

Any chance this style guide can be made public? I'm sure a lot of us would like to see what Shopify's official recommendations are on Liquid styling.

Nov 26 '21 09:11 ConduciveMammal

Lots of those improvements sound like more oriented to prettier than for theme-check. I would keep the focus on performance and correctness here and leave styling to prettier that is better automating this kind of stuff.

Feb 23 '23 19:02 eloyesp

We have prettier for this now

Sep 17 '24 13:09 charlespwd