If I have the following line:

<div data-flickity='{ "autoPlay": 1000}'>

It gets replaced by:

<div data-flickity="{ 'autoPlay': 1000}">

Which is not ideal, and breaks that particular plugin. Is there a way to ignore this particular line when it comes to formatting? I've tried variations of this with no joy:

    "liquid.rules": {
      "ignore": [
        {
          "type": "liquid",
          "begin": "data-flickity",
          "end": "}"
        }
      ]
    }

every front matter file starts with

---
// Some key value pairs if needed
---

but in scss files, vscode shows error. In standard scss file it is indeed error. But in liquid, it shouldn't be. Hence I can't save the file with format document enabled. I can still save the file manually outside vscode but then what's the point of using an IDE.

• Issue Type: Bug
• Extension Name: shopify-liquid
• Extension Version: 2.3.0
• OS Version: Linux x64 5.3.0-40-generic
• VSCode version: 1.42.1

{
	"messages": [],
	"activationTimes": {
		"codeLoadingTime": 12,
		"activateCallTime": 5,
		"activateResolvedTime": 0,
		"activationReason": {
			"startup": false,
			"extensionId": {
				"value": "sissel.shopify-liquid",
				"_lower": "sissel.shopify-liquid"
			},
			"activationEvent": "onLanguage:html"
		}
	},
	"runtimeErrors": [
		{
			"name": "TypeError",
			"message": "Cannot read property 'document' of undefined"
		},
		{
			"name": "TypeError",
			"message": "Cannot read property 'document' of undefined"
		},
		{
			"name": "TypeError",
			"message": "Cannot read property 'document' of undefined"
		},
		{
			"name": "TypeError",
			"message": "Cannot read property 'document' of undefined"
		},
		{
			"name": "TypeError",
			"message": "Cannot read property 'document' of undefined"
		},
		{
			"name": "TypeError",
			"message": "Cannot read property 'document' of undefined"
		},
		{
			"name": "TypeError",
			"message": "Cannot read property 'document' of undefined"
		}
	]
}

after saving a .liquid file, the closing braces of a liquid object receive a space, like so:

{{some_object}}

to this:

{{some_object} }

This completely breaks the highlighting and produces a syntax error during live editing. I am not sure if this is a problem with vscode or the extension. I am not using any other extensions and have disabled the vscode settings for inserting spaces before and after braces.

any help is appreciated so I can move on. thank you

VSCodium, the telemetry-less fork of VSCode uses Open-VSX instead of Microsoft Marketplace due to licensing restrictions. I request you to publish this extension in Open-VSX too so that we can use it.

Before formatting

After formatting

Other parts are correctly formatted.

My extension configuration :

  "liquid.format": true,
  "liquid.rules": {
    "ignore": [
      {
        "type": "liquid",
        "begin": "comment",
        "end": "endcomment"
      },
      {
        "type": "html",
        "begin": "script",
        "end": "script"
      },
      {
        "type": "html",
        "begin": "style",
        "end": "style"
      }
    ],
    "html": {
      "correct": true,
      "force_attribute": false,
      "preserve": 2,
      "unformatted": false
    },
    "js": {
      "preserve": 1,
      "method_chain": 0,
      "quote_convert": "none",
      "format_array": "indent",
      "format_object": "indent",
      "braces": false,
      "no_semicolon": false,
      "brace_block": true
    },
    "scss": {
      "css_insert_lines": true,
      "preserve": 2,
      "braces": false,
      "brace_block": true
    },
    "css": {
      "css_insert_lines": true,
      "preserve": 2,
      "braces": false,
      "brace_block": true
    },
    "json": {
      "preserve": 0,
      "braces": false,
      "brace_block": true,
      "no_semicolon": true
    }
  }

Does anyone have any idea?
Thanks in advance!

Is this project abandoned?

Hi, I am trying to format a .liquid which contains script tag, somehow the formatter would modify the content without good intent.
I searched all the internet and cant find myself an answer. Any idea would be appreciated, cheers!
This issue will be more likely to occur when you have more than one script tag in the file.

Before:

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "{{ shop.name }}",
  {% if settings.logo %}
    "logo": "https:{{ settings.logo | img_url: '450x' }}",
  {% endif %}
  "sameAs": [
      "{{ settings.social_twitter_link }}",
      "{{ settings.social_facebook_link }}",
      "{{ settings.social_pinterest_link }}",
      "{{ settings.social_instagram_link }}",
      "{{ settings.social_tumblr_link }}",
      "{{ settings.social_snapchat_link }}",
      "{{ settings.social_youtube_link }}",
      "{{ settings.social_vimeo_link }}"
    ],
    "url": "{{ shop.url }}{{ page.url }}"
  }
</script>

After:

<script type="application/ld+json">

�[36mLine: 2�[0m
�[31m(empty line)�[0m
�[31m�[36mLine: 1�[0m�[0m
�[31m�[31m�[36 mLine : 2 �[�[0m�[0m
�[31m�[31m        0 m �[�[0m�[0m
�[31m�[31m            31 mundefined�[�[0m�[0m
�[31m�[31m                0 m �[�[0m�[0m
�[31m(empty line)�[0m
</script>

Hi,

I love this extension and to the most part it works pretty well. It does however mess up when you have inline schema data like this:

{% if template.name == 'index' %}
<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": "{{ shop.name }}",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "{{ shop.url }}/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      },
      "url": "{{ shop.url }}{{ page.url }}"
    }
  </script>
{% endif %}

as it is converted to this:

<script type="application/ld+json">


�[36mLine: 1�[0m
�[31m�[36 mLine : 1 �[�[0m
�[31m        0 m �[�[0m
�[31m            31 m�[�[0m
�[31m                36 mLine : 2 �[�[0m
�[31m                    �[�[0m
�[31m                        0 m �[�[0m
�[31m                            31 m 0 m �[�[0m

</script>

{% if template.name == 'index' %}
  <script type="application/ld+json">


�[36mLine: 2�[0m
�[31m(empty line)�[0m
�[31m(empty line)�[0m
�[31m�[36mLine: 1�[0m�[0m
�[31m�[31m�[36 mLine : 1 �[�[0m�[0m
�[31m�[31m        0 m �[�[0m�[0m
�[31m�[31m            31 m {�[0m�[0m
�[31m�[31m                �[�[0m�[0m

</script>
{% endif %}

I've already verified that I don't have the other Liquid extensions known to cause issues, and I also have Prettier disabled on this test.

Any way I can get around this?

I had to uninstall this plugin because it was causing syntax errors in my other projects which are written with Angular.

When I saved a .html file in Angular this extension was auto "correcting" syntax from routerLink to routerlink. This broke all links in my Angular project. This is just one example.

This extension should only be affecting liquid syntax, not all HTML syntax.

Would be nice to be able specify the indent size for html tags when parsing and formatting liquid files. As far as I can see, it defaults to 4 and can't be changed, and also ignores editor.tabSize setting (which, in my case, is set to 2, and is respected when I trigger the built-in formatting of vsCode (Ctrl+Shift+i on Linux)).

Hey - I've got a funky issue where when I format a .liquid file with a {% schema %} section, the liquid code formats perfectly but the formatter adds about 50 newlines between the {% schema %} tags and their containing JSON, and removes all indents from the schema JSON. See screenshots:

Here's my .liquidrc, not sure if I'm doing something wrong?

Thanks for any help! And cheers for a fantastic extension!

Sorry if this is an issue with scss support, but if scss.liquid is supported then why there is an error for not valid scss syntax?

Should I report it on the scss support page ?

Convert things like:

{{foo.bar}}         -> {{ foo.bar }}
{%if foo%}          -> {% if foo %}
{{ foo|asset_url }} -> {{ foo | asset_url }} 

As it is the recommended syntax, and would greatly improve the crazy inconsistencies in peoples' code 😁

Feature request

Get folding with liquid code(⌄)

We can fold HTML code, but not liquid code, hope someone can help us.
Thanks!!!

Renew issue #24
As already talked about in #24 it seems it's happening again for some reason.
I do work just in a simple shopify theme folder structur which is generally not really a project folder structure. But as I read from linked issue it should work also for non-workspace environments.

Could you go over it again?

Is this normal behavior?

If I change the Language Mode to Liquid instead of HTML it does no formatting at all.

I have the following in my .liquidrc

{
  "ignore": [
    {
      "type": "liquid",
      "begin": "comment",
      "end": "endcomment"
    },
    {
      "type": "html",
      "begin": "script",
      "end": "script"
    },
    {
      "type": "html",
      "begin": "style",
      "end": "style"
    }
  ],
  "html": {
    "correct": true,
    "force_attribute": true,
    "braces": true,
    "brace_block": true,
    "wrap": 2,
    "preserve": 0,
    "unformatted": false
  },
  "js": {
    "preserve": 1,
    "method_chain": 0,
    "quote_convert": "none",
    "format_array": "indent",
    "format_object": "indent",
    "braces": false,
    "no_semicolon": false,
    "brace_block": true
  },
  "scss": {
    "css_insert_lines": true,
    "preserve": 2,
    "braces": false,
    "brace_block": true
  },
  "css": {
    "css_insert_lines": true,
    "preserve": 2,
    "braces": false,
    "brace_block": false
  },
  "json": {
    "preserve": 0,
    "braces": false,
    "brace_block": true,
    "no_semicolon": true
  }
}

Am I missing something? Thanks in advance!

My project is set to use tabs everywhere (except for yaml), but the auto-formatter in this extension does not respect that, and I cannot see a way to customise indenting behaviour for HTML in the liquidrc.

Could this extension either respect the indent preferences or allow the indenting options to be set for all liquid file types?

I can't find v2.4, I need it.

Due to the similarity between Liquid and Twig currently the syntax highlighting with https://github.com/mblode/vscode-twig-language-2 leads to a better result. Maybe have a look at their approach and add some low hanging fruits to your extension.

My liquid files look like this...

In addition, it keeps formatting to 4 spaces vs. 2 spaces — how can I correct this?

I'm using this extension for the first time. I have a .js.liquid file but after installing this extension I get the following error on liquid syntax:

Can someone help me figure out what could be wrong? I have not made any changes to the generated .liquidrc file yet.

Figured I'd make this its own issue, though seems related to #42

The error:

[1/25/2021, 9:51:32 PM] PrettyDiff: 1 more end type than start types.

On every save. I swear it was formatting this document fine until... Something. And now this. I don't see anything wrong with my document 🤔

The snippet for a checkbox setting results in this code:

{
    "type": "checkbox",
    "id": "id",
    "label": "label",
    "default": "true",
    "info": ""
},

However, the default value needs to be boolean and not string - the hypens need to be removed.
Furthermore, I think it would be better to remove the comma from the snippets. Much more often, I happen to have a comma too much now in my schemas instead of one to few.

I have some Liquid tags in my <style> in order to change colors in the Shopify Customizer.

<style> #bar-container { position: relative; top: 65px; z-index: 5; width: 100%; background-color: {{ section.settings.announcement_bg }} ; /* Having the BG color available in the customizer */ height: 40px; display: flex; align-items: center; font-size: 14px; } </style>

The {{ section.settings.announcement_bg }} gives the error: "property value expected".

Any way of ignoring these errors?

The Add line comment command, or similar, creates <!-- foo --> within .liquid files.
It might be preferable for it to create {% comment %} foo {% endcomment %} instead, if possible?

The benefit being that the liquid compiler will strip these out, so it is the best way to add comments to liquid files, typically

Hey, is it possible to format the liquid document using 2 spaces? I have it set to 2, but when I use the liquid formatter it always formats to 4 spaces. Thanks!

Input:

<html>
  <head>
    {% comment %}
     apostrophe's
    {% endcomment %}
  </head>
  <body>
  </body>
</html>

Formatted:

<html>
  <head>
    {% comment %}
     apostrophe's
    {% endcomment %}
  </head>
  <body>
  </body>
</html>
  </head>
</html> 

And after every format it injects another..

  </head>
</html>

..every single time!

It appears to only happen when a comment contains an ' apostrophe or " quote, which is quite bizarre :)

When I try to format a table, it splits some of the td tags to 2 lines like this.

        <td>{{Product.TotalSum}}
            €</td>

Is there a way to prevent td tags from breaking?

I am not 100% sure if this is an issue with this extension, if I have it configured wrong, or if I should have disabled something else. I just recently started with Shopify so please forgive me.

I am seeing that the following code, see below, gets a "Property Assignment expected error on the first { after "addToCart: "and then 4 errors for Decloration or statement expected.

<script> // Override default values of shop.strings for each template. // Alternate product templates can change values of // add to cart button, sold out, and unavailable states here. theme.productStrings = { addToCart: {{ 'products.product.add_to_cart' | t | json }}, soldOut: {{ 'products.product.sold_out' | t | json }}, unavailable: {{ 'products.product.unavailable' | t | json }} } </script>

Again, not sure is this is truley replated to the extension or note.
Thanks for any help.

Hi,

I recently downloaded your extension and everything seemed to work perfectly, I had no problem with syntax coloring or suggestions, but then I noticed I couldn't format Liquid code. I tried reinstalling and putting a .liquidrc in my root folder but nothing changed.

I noticed that the tag in the status bar always displayed a cross, even after clicking on it, even though an activation message pops up. A deactivation message never pops up, no matter how many times I press the button.

Note that clicking this button still checks the "Liquid: Format - Whether to enable/disable Liquid formatting." VS Code setting. On the other hand, changing the setting itself will not change the status bar button in any way.

Do you have any idea what could be causing this?

I originally filed this as a bug on VSCode itself, but it turns out it’s vscode-liquid causing it. Please see for details: microsoft/vscode#81756

I was fine with these before, but now i'm noticing that they're taking precedent over Emmet snippets which is fairly annoying.

is there a flag to be able to disable snippets suggestions just from the extension?

When attempting to format a large file (.liquid) I get an error in the output panel "PrettyDiff: 2 more start types than end types." and the document is not formatted.

I assume this means the document cannot be formatted due to a syntax error but there is no hint as to which line. I tested the extension on a small document and it worked without issue.

What does this error code mean? How can I determine the source of the syntax error?

When I format a liquid file with the formatter provider by vscode-liquid, the formatter changes single quotation marks of the HTML markup code to double quotations, all the time.

The default HTML formatter of vscode handles it correctly by keeping it as is.

Single quotations might be rarely used, but they can for example be useful when JSON data is provided via an HTML attribute's value. As JSON is bitchy about requiring double quotations all the time, the solution is to surround the value of the HTML attribute with single quotations to be able using double quotations in the value itself.

Example:

<body class="l-{{data.template}}" data-controller="font" data-font-families-value='["Sailec"]' data-font-loaded-families-value="[]">
</body>

When formatting with vscode-liquid, it will result in this (see data-font-families-value value):

<body class="l-{{data.template}}" data-controller="font" data-font-families-value="['Sailec']" data-font-loaded-families-value="[]">
</body>

I noticed earlier the day, when my client-side JavaScript code threw an error due to not being able to JSON parse the value it got from the HTML elements.

Hey,

Using the current extension, on latest VS Code, none of the commands work, yet they do show up as an option.

After some digging, I've installed the project dependencies in the extension directory

~/.vs-code/extensions/sissel.shopify-liquid-2.3.0

Restarted the VS Code, and everything now works :-)

Snippet pulled from Shopify/Dawn theme.

Before:

{% style %}
     {{ settings.type_body_font | font_face: font_display: 'swap' }}
     {{ body_font_bold | font_face: font_display: 'swap' }}
     {{ body_font_italic | font_face: font_display: 'swap' }}
     {{ body_font_bold_italic | font_face: font_display: 'swap' }}
     {{ settings.type_header_font | font_face: font_display: 'swap' }}

     :root {
       --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
       --font-body-style: {{ settings.type_body_font.style }};
       --font-body-weight: {{ settings.type_body_font.weight }};

       --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
       --font-heading-style: {{ settings.type_header_font.style }};
       --font-heading-weight: {{ settings.type_header_font.weight }};

       --color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
       --color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
       --color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
       --color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
       --color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
       --color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
       --color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
       --payment-terms-background-color: {{ settings.colors_background_1 }};
     }

     *,
     *::before,
     *::after {
       box-sizing: inherit;
     }

     html {
       box-sizing: border-box;
       font-size: 62.5%;
       height: 100%;
     }

     body {
       display: grid;
       grid-template-rows: auto auto 1fr auto;
       grid-template-columns: 100%;
       min-height: 100%;
       margin: 0;
       font-size: 1.5rem;
       letter-spacing: 0.06rem;
       line-height: 1.8;
       font-family: var(--font-body-family);
       font-style: var(--font-body-style);
       font-weight: var(--font-body-weight);
     }

     @media screen and (min-width: 750px) {
       body {
         font-size: 1.6rem;
       }
     }
   {% endstyle %}

After document formatting:

{% style %}

   {{settings.type_body_font | font_face: font_display: 'swap'}}{{body_font_bold | font_face: font_display: 'swap'}}{{body_font_italic | font_face: font_display: 'swap'}}{{body_font_bold_italic | font_face: font_display: 'swap'}}{{settings.type_header_font | font_face: font_display: 'swap'}}:root {
     --font-body-family: {{settings.type_body_font.family}}, {{settings.type_body_font.fallback_families}};
     --font-body-style: {{settings.type_body_font.style}};
     --font-body-weight: {{settings.type_body_font.weight}};

     --font-heading-family: {{settings.type_header_font.family}}, {{settings.type_header_font.fallback_families}};
     --font-heading-style: {{settings.type_header_font.style}};
     --font-heading-weight: {{settings.type_header_font.weight}};

     --color-base-text: {{settings.colors_text.red}}, {{settings.colors_text.green}}, {{settings.colors_text.blue}};
     --color-base-background-1: {{settings.colors_background_1.red}}, {{settings.colors_background_1.green}}, {{settings.colors_background_1.blue}};
     --color-base-background-2: {{settings.colors_background_2.red}}, {{settings.colors_background_2.green}}, {{settings.colors_background_2.blue}};
     --color-base-solid-button-labels: {{settings.colors_solid_button_labels.red}}, {{settings.colors_solid_button_labels.green}}, {{settings.colors_solid_button_labels.blue}};
     --color-base-outline-button-labels: {{settings.colors_outline_button_labels.red}}, {{settings.colors_outline_button_labels.green}}, {{settings.colors_outline_button_labels.blue}};
     --color-base-accent-1: {{settings.colors_accent_1.red}}, {{settings.colors_accent_1.green}}, {{settings.colors_accent_1.blue}};
     --color-base-accent-2: {{settings.colors_accent_2.red}}, {{settings.colors_accent_2.green}}, {{settings.colors_accent_2.blue}};
     --payment-terms-background-color: {{settings.colors_background_1}};
   }

   *,
   *::before,
   *::after {
     box-sizing: inherit;
   }

   html {
     box-sizing: border-box;
     font-size: 62.5%;
     height: 100%;
   }

   body {
     display: grid;
     grid-template-rows: auto auto 1fr auto;
     grid-template-columns: 100%;
     min-height: 100%;
     margin: 0;
     font-size: 1.5rem;
     letter-spacing: 0.06rem;
     line-height: 1.8;
     font-family: var(--font-body-family);
     font-style: var(--font-body-style);
     font-weight: var(--font-body-weight);
   }

   @media screen and(min-width: 750px) {
     body {
       font-size: 1.6rem;
     }
   }

   {% endstyle %}

Hey panoply, big fan of the extension, it was the main reason I moved away from my old editor to VSCode, so thanks for all your time and effort.

I'm experiencing a new issue since the update to 1.6.2 which fixes the ignore comments bug. The update throws errors when formating using document and selection format commands:

Liquid Document could not be formatted, check your code!

Liquid Format Failed! The selection is invalid or incomplete!

This has been tested on a bare bones liquid file containing a single liquid stastement, a clean install of VSCode (Win 64), a clean settings json and no other extensions installed.

Liquid files are auto detecting as HTML and I see no liquid switch in the bottom status bar for controlling Liquid formating on/off, in case any of that is relevant.

Syntax highlighting, snippets and autocomplete are functioning as before.

I might be missing something but

{%- for item in include.data -%}
    {% assign newItem = item[1] -%}
{%- endfor -%}

ends up as

{%- for item in include.data -%}
{% assign newItem = item[1] -%}
{%- endfor -%}

Same for if.

I tried the code in the PrettyDiffs web app and indenting is correct.

thanks

I'm working with the shopify default dawn theme and there are some microdata blocks in the header.liquid.
If i try to format the document, everything seems to work fine, but the json-ld blocks are broken afterwards.

It goes from:

<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Organization",
      "name": {{ shop.name | json }},
      {% if section.settings.logo %}
        {% assign image_size = section.settings.logo.width | append: 'x' %}
        "logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
      {% endif %}
      "sameAs": [
        {{ settings.social_twitter_link | json }},
        {{ settings.social_facebook_link | json }},
        {{ settings.social_pinterest_link | json }},
        {{ settings.social_instagram_link | json }},
        {{ settings.social_tiktok_link | json }},
        {{ settings.social_tumblr_link | json }},
        {{ settings.social_snapchat_link | json }},
        {{ settings.social_youtube_link | json }},
        {{ settings.social_vimeo_link | json }}
      ],
      "url": {{ shop.url | append: page.url | json }}
    }
  </script>

to

<script type="application/ld+json">

�[36mLine: 1�[0m
�[31m�[36 mLine : 1 �[�[0m
�[31m        0 m �[�[0m
�[31m            31 m {�[0m
�[31m                �[�[0m
�[31m                    0 m �[�[0m
�[31m                        31 m "@context" : "http://schema.org",�[0m
�[31m                        �[�[0m
</script>

I've copied this block in a blank liquid file… same problem.

Is there any way, to exclude formatting those blocks?
Or can i adjust some other setting?

If you need further information, just ask.
Thanks for the otherwise great extension 👍

Hi @panoply

When typing "preset" and pressing tab, autocompletion writes "categorey" instead of "category" :

If you use Prettier, its HTML formatting trumps this plugin and makes a huge hot mess.
There is a workaround which is that you can set your workspace settings along the lines of

{  
  "settings": {
    "editor.formatOnSave": true,
    "[html]": {
      "editor.defaultFormatter": "sissel.shopify-liquid"
    }
  }
}

Which will force this plugin to be the default formatter for HTML language files.
Obviously that'll apply to filetypes other than .liquid, which isn't ideal but most likely fine for a Jekyll/Shopify project.
Perhaps it could be built-in as an option, to this plugin? Might not be possible. Either way this issue could be closed and stay here to help anyone with the same problem.

PS: Fantastic plugin, thank you @panoply ! The "Generate a .liquidrc file" feature is genius.

I am using liquid to generate asciidoc content in a reporting system.

Would it be possible to support asciidoc / liquid combination as well?

On a Mac, VSCode maps Cmd+Shift+L to Select All Occurrences of Find Match by default. This plugin overwrites Cmd+Shift+L to Liquid: Format Document which is very degenerative to the UX. Any plugin should not overwrite any of the default key bindings in VSCode. Please consider remapping to another key combination or add editorLangId == 'liquid' to the key binding condition.

When I follow the quickstart, and try to run Liquid: Generate .liquidrc File I get the following error:

command 'liquid.liquidrc' not found

Any idea why this happens, or what I can do to find out?

Hi,

I've just isntalled your extension into VSCode and like how it works so far.
One issue I have is with the formatter with the default settings -> it removes my newlines .
Example:

1. code

{%- comment -%}
make sure this file does not have any additional new lines in it. it would break calss generation

assumed variables:
- genClass
- genAdditionalClass
- genSectionClass
- genUseNarrow
{%- endcomment -%}
{%- assign container-classes = bgt-block-h-text-image.container-class | split: ' ' -%}
{%- assign additional-container-classes = additionalContainerClass | split: ' ' -%}
{%- assign containerClass = 'bgt-component-section-h-text-image' -%}
{%- assign isNarrow = true -%}
{%- for class in additional-container-classes -%}
{%- assign containerClass = containerClass | append: ' bgt-component-section-h-text-image--' | append: class -%}
{%- assign containerClass = containerClass | append: ' bgt-component-section--' | append: class -%}
{%- if class == 'edge-to-edge' or class == 'full-width' -%}
{%- assign isNarrow = false -%}
{%- endif -%}
{%- endfor -%}

2. first save

{% comment %}{%- comment -%}{% endcomment %}
make sure this file does not have any additional new lines in it. it would break calss generation

assumed variables:
- genClass
- genAdditionalClass
- genSectionClass
- genUseNarrow{%- endcomment -%}{%- assign container-classes = bgt-block-h-text-image.container-class | split: ' ' -%}{%- assign additional-container-classes = additionalContainerClass | split: ' ' -%}{%- assign containerClass = 'bgt-component-section-h-text-image' -%}{%- assign isNarrow = true -%}{%- for class in additional-container-classes -%}
{%- assign containerClass = containerClass | append: ' bgt-component-section-h-text-image--' | append: class -%}
{%- assign containerClass = containerClass | append: ' bgt-component-section--' | append: class -%}
{%- if class == 'edge-to-edge' or class == 'full-width' -%}
    {%- assign isNarrow = false -%}
{%- endif -%}{%- endfor -%}

3. second save

{% comment %}{%- comment -%}{% endcomment %}make sure this file does not have any additional new lines in it. it would break calss generation
    
    assumed variables:
    - genClass
    - genAdditionalClass
    - genSectionClass
    - genUseNarrow{%- endcomment -%}{%- assign container-classes = bgt-block-h-text-image.container-class | split: ' ' -%}{%- assign additional-container-classes = additionalContainerClass | split: ' ' -%}{%- assign containerClass = 'bgt-component-section-h-text-image' -%}{%- assign isNarrow = true -%}{%- for class in additional-container-classes -%}{%- assign containerClass = containerClass | append: ' bgt-component-section-h-text-image--' | append: class -%}{%- assign containerClass = containerClass | append: ' bgt-component-section--' | append: class -%}{%- if class == 'edge-to-edge' or class == 'full-width' -%}
{%- assign isNarrow = false -%}{%- endif -%}{%- endfor -%}

As you can see above, new lines are removed one by one after multiple saves and the code gets minified to some degree. What I want is to automatically indent the code so that I can better follow statements.

I have disabled the formatter as it does not help me at all.

Thanks,
George

There is something wrong. When I try click on Enable formating, it shows like it enable but the status do not change.

Hey all users 👋

Firstly, thank you for using this extension. As some of you aware, over the last 12 months I have been working on the next version of this project with the end goal of bringing modern IDE feature to multiple variations of the Liquid Language. This endeavour that has taken a very long time to conclude and this mainly comes down to a few things, like the daily grind of adulthood, work, covid and mostly because Liquid is a customisable language with no real formal grammar, it's a templating language so thats its very nature. Coming up with a solution that will be able to accommodate its various use cases was rather difficult to say the least. Multiple rewrites, lack of sleep and a somewhat steep adoption in new techniques and approaches in software development/engineering etc has resulted in delayed releases.

This issue aims to provide any curious users awaiting on the next release a feature ship list as well as give some insight into what to expect.

Liquify

The next release will be shipping under a new name, which is "Liquify" the reason for this is because support will also be made available in Sublime and Atom. Additionally, the project will open source a multitude of tools and third parties, like its AST parser, TextMate grammars, LSP client and various rollup bundle utilities which are used in the development environment that people may find useful in projects unrelated to the tool.

Variation Specific

Liquify will treat each Liquid Variation differently. Users who are developing with Jekyll do not require Shopify variation features, for example the {% schema %} tag is unique to the Shopify Liquid variation only, it is not available in the Jekyll/Standard/Eleventy variation. The same logic applies to Jekyll/Eleventy where something like frontmatter is not supported in Shopify and therefore users should not be subject to features that are not supported in the development environment they are working within.

In Liquify, you will define your variation on a per-project basis, this will tell the tool to load and execute according to the engine the developer has defined in their .liquidrc file.

Language Server Protocol

Liquify will use the Language Server Protocol (LSP for short) to facilitate its features. LSP is generally leveraged and used by official languages like Python, Elixir, JavaScript and more, so Liquid will be hanging out with the big guys in the code game. More importantly, by leveraging LSP Liquify will become available to any editor that understands the protocol.

Completions

Liquify will provide code completions of tags, objects and filters for multiple variations of Liquid, ie: Shopify, Jekyll, Eleventy etc. Completions will really empower your development workflow, especially for Shopify developers as the entire Shopify theme API will be at your fingertips. For those using Standard Liquid or Jekyll/Eleventy you were not forgotten and completions are facilitated also.

Scope Completions

It's common practice in Liquid to set a variable and then reference that variable or split it up and iterate over the values, whatever the case might be, if you work with this templating language, you're going to use {% assign %} or {% capture %}. Liquify will keep track of your variables, treating them as "scopes" in each file they are defined and from here will automatically be supplied to completions.

Extendable Completions

Completions will be extendable, this means Jekyll/Eleventy developers will be able to provide completions to any custom Liquid tags/filters that you may be implementing through a plugin. You can simply define any extendable completions within the .liquidrc and boom, they are catapulted right into your document tag.

Externally Referenced Completions

Liquid is often referencing data from external files. In Shopify (for example) you will reference locales, or settings_data.json whereas in Jekyll or Eleventy you will reference _collection or _data yaml/json files. In most cases you call upon this data using Liquid and while that has worked just fine for the last decade, the landscape has changed and those files can be monolithic. Services like DatoCMS empower developers by generating these files from a series of models and so it's not always easy remembering what is what. Liquify solves this issue and will scan your workspace for any files that the variation may require or use and from here supply them to you. It does this progressively and will cache results.

This feature may not make it to the official release, but rest assured will be available in a minor post 3.0.

Embedded Language Completions

The completion feature goes one step further by providing embedded language support for code blocks like the Shopify {% schema %} tag where the contained JSON will support completions (so no more shitty or otherwise annoying snippet patches, hooray!) – Embedded language completions use Language Services made available by vscode and you will able to assert new embedded language blocks to specific tags, truly customisable.

Hover Descriptives

Liquify will provide users with hover descriptives of syntax, this means you will never have to goto a documentation page again. The tool will provide you with the official description of each object, object property, tag, or filter relative to the variation it belongs to. This feature will really help devs leverage the language to its fullest and use aspects and tags that you might otherwise not have known existed.

Validations/Linting

Liquify will support syntax validations and linting capabilities. This is a great feature that not only helps you write clean and concise Liquid code, but also will prevent you from writing incorrect syntax. Even though Liquid is a very basic and simple language, it can sometimes get quite chaotic in large code bases and scouring code for parse issues can get tiresome. This feature aims to prevent this and enables you or your team to implement a strict styleguide of how Liquid syntax should be expressed, while at the same automatically fixing errors that may occur.

Users will have the option to control linting via the available rulesets, which can be customized to suit your desired tastes. Want auto-spacing within tags? No problem. Want enforce {% capture %} only variables, No problem. Whatever the case, you will get control via the rulesets.

Codelens / Document Linking

In variations outside of the Standard variation, we have {% include %} (or {% render %} in Shopify) tags which allow developers to reference an external file, otherwise known as snippets or partials. Liquify understands these type of tags and will provide a document link to the file that is being referenced, think of this like import in JavaScript. Simply, cmd+click to open the linked file or peek the content of the include via codelens. Its dope fam, really dope.

Formatting

A lot of developers use this extension for the formatting capabilities, you'll get that goodness in Liquify and it's a lot more powerful. All issues relating to the formatting have been addressed accordingly and by adopting LSP along with the the powerful Liquify AST parser, formatting is far less error prone and won't mess up your code like it has a habit of doing at times. It is still powered with PrettyDiff but now relies more on Sparser. Because Liquid is almost always infused with HTML, rulesets and formatting options are now geared towards a structure and default that is more suitable to a Liquid use case, with indented attribute wrapping/ordering and much more.

Digesting Prettier/JS Beautify

Post Liquify release, the ability to digest prettier/js beautify rules will be made available, this is because PrettyDiff is capable of understanding formatting rulesets supplied by these formatters. This means if you're fanboy or fangirl of those tools, Liquify will respect your presets in those files and work with them to facilitate your beatification taste.

No more injection grammars

In the current version (2.3) grammar injections are leveraged so as to provide and respect HTML Language features like HTML completions and validation supported in vscode. This comes at a cost which I was unaware of when first implementing them and this has led to some errors and headaches. In Liquify, grammar injections have been boycotted but HTML language features have been preserved, this means that Liquid will not interfere with HTML syntax, instead Liquid and HTML are combined and work with one another. I want to apologize to anyone that suffered at that really terrible implementation of mine, I was young and reckless. The new approach will be tightly coupled with variation specific Liquid and Liquify users will get each variation supplied to them as separate languages, for example Liquify will provide:

• Liquid Standard
• Liquid Shopify
• Liquid Jekyll
• Liquid Eleventy

You will need to choose what variation and grammar to use, opposed to the current approach of selecting HTML. This also means a separation of syntax highlighting specific to the variation you're working with, happy days!

Improved Syntax Highlighting

Liquify has gone a level deeper to bring more expressive syntax highlighting to your editor, you will get even more clear and precise highlighting of code, which allows to you better distinguish Liquid from HTML or other languages, additionally, some great improvements were made to structure of textmate files, which improved rendering speed.

Freemium Model

Liquify will operate on a freemium license model, which means it will be partially proprietary, but chill fam, before you bring upon the wrath of cancel culture, hear me out. Firstly, I am not going to hustle you and all the features you have in the current version are still going to be available in Liquify for free and will forever stay that way. Additionally, most of the features listed here are available for free too. There will be no annoying distractions, popups or "buy me, buy me" bullshit like we all have suffered at the hands of other tech tooling. The extension will function uninterrupted without licensing and again to reiterate the vast majority of features will be free, however some features if you so happen to want them will require a small one-time licensing cost or if you only need to use those features for a project, then you will be able to lease them on a per month basis.

Alight, how much?
Currently, I am still working on the intricacies of this, as of now, licensing will be required for features which pertain to the SaaS variations (ie: Shopify) and/or for some advanced features that pertain to non-SaaS variations – to be clear this still being decided, but please note that individuals and agencies will be subject to different pricing. In terms of cost, for individuals who wants to lease, it will be around the same price as a decent coffee and for the bandits who want to license up, then you will be looking at around the same cost as paperback book. This will be a one time cost, so no ongoing or yearly commitments, you pay, you get, signed sealed delivered.

Any chance it won't ship proprietary
There is still a chance that the tool will ship free with no cost and I really hope that it comes to fruition, fingers crossed!

Conclusion

I've listed the main features you will expect to see in Liquify and I hope anyone that was curious gets a little more insight. There are a lot more great additions shipping, things like .liquidrc intellisense, an optional theme, semantic highlighting, inline comment ignores & formatting, improved support when using Liquid in JavaScript, CSS, SCSS, Markdown, various extensibility, incremental parsing and much more.

The official release is getting closer. To give an ETA is still hard but users can rest easy knowing that it should conclude and go out well before we close this shitty year of 2020, so in the next few months you can expect to be using Liquify.

Thanks,
Panoply.

The extension will create a error for this line of code even though it's valid, it does not recognize the object. this snippet is from the Dawn 2.0 template, snipppets/product-card.liquid file.

{% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}

Image of errors.

I'm unable to enable the liquid extension after installing. Tried to install via marketplace but was unable so it prompted me to install manually.

The app is installed but grayed out and I cannot enable for some reason.

Any ideas?

Thanks!