Can't enable formatting

[pvhelden]

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?

[panoply]

Have you got formatting enabled on save within your vscode settings? The formatting button toggles formatting activation but you need to save the document in order for formatting to work.

[membla]

Experiencing the same issue (I do have formatting on save enabled)

[panoply]

Hey folks, I am unable to re-create this in my environment. Can you give me some more details here?

[pvhelden]

Hi, not sure why it doesn't work for @membla, but right after enabling formatting on save, clicking the button actually toggled the formatting and the icon. Kind of a shame, since there are some files I would like to not format, but still a great extension, couldn't do without it!

[panoply]

@SwagSamaSempai I could expose an ignoreFiles[] option which would allow you to ignore specific files or wildcards from formatting, eg:

ignoreFiles: [
    "dir/*.liquid", 
    "dir2/specific.liquid"
]

I suppose a fair few users would find this helpful.

[pvhelden]

Great, looking forward to it!

[adamwathan]

Having same issues here, the action "Format Document" doesn't work, only "Liquid: Format Document", which VS Code doesn't seem to recognize as a regular formatter so format on save doesn't work. Any trick to getting "Liquid: Format Document" to be the regular "Format Document" command for liquid files?

I also noticed I had to set the language mode to "HTML" for syntax highlighting to work, setting it to "liquid" gives no syntax highlighting.

What's the recommended way to set this all up?

[panoply]

Troubleshooting this issue in v2.3.0:

Issues like this are generally caused due to conflicting workspace settings, try the following:

1. Set the editor.formatOnSave option to true
2. Set the liquid.format options to true
3. If you've got Prettier running or any other formatting, disable it in your workspace, eg:

{
"prettier.disableLanguages": [
    "html",
    "liquid"
  ]
}

4. Restart VS Code.

This version injects Liquid grammars into the HTML Language and that's why when setting the language to Liquid the HTML syntax doesn't highlight (only the Liquid syntax does). Using injection grammars provides us with HTML intellisense features and given the Liquid is a templating language used within HTML we leverage injection grammars. You can associate .liquid files to HTML within workspace settings and have VS Code treat .liquid files as HTML, eg:

{
    "files.associations": {
        "*.liquid": "html"
    }
}

Important

In the next release of this extension (v2.4.0^) the extension will no longer use Injection grammars which are replaced by a Liquid Language Server which will treat Liquid as it's only language and provide many additional features. Most importantly the .liquid file association to html you set in this version will need to be removed.

[joshuaiz]

Followed all the suggestions above and still cannot get formatting to work. Getting this error:

Command 'Liquid: Format Document' resulted in an error (command 'liquid.formatDocument' not found)

[fershad]

Was running into this problem today. Troubleshooting steps above helped resolve for me.

[mikeacre]

Same, I was having issues getting the formatting to work, but disabling my Beautify app and restarting VS code allowed the formatting to work properly.

[renestalder]

I had the same issue and deactivating prettier for HTML in the specific project with the steps described by @panoply did the trick.

[dossy]

I've disabled Prettier and have "editor.formatOnSave": true and when loading VSCode, I get this error in the status line:

Extension 'HTML Language Features' cannot format 'sections/header-image.liquid'

As you can see, the 💧Liquid: ✔️ is in the status line.

Also, when I use Liquid: Format Document from the command palette, it does nothing, except for display the "ℹ️ Document Formatted 💧 " notification. The actual document doesn't change at all.

As an experiment, I went and disabled ALL my installed extensions and ONLY enabled the sissel.shopify-liquid extension, and there's no change.

Visual Studio Code

Version: 1.52.1
Commit: ea3859d4ba2f3e577a159bc91e3074c5d85c0523
Date: 2020-12-16T16:30:02.420Z
Electron: 9.3.5
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Darwin x64 17.7.0

This is on v2.3.0 of the extension.

[panoply]

In workspace settings, set the default formatter:

{
    "[html]": {
        "editor.defaultFormatter": "sissel.shopify-liquid",
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": false
        }
      }
}

[dossy]

Here's my test.liquid, all "messed up" hoping to get pretty-printed:

  <div>
this is a test
<span>foo</span>
    |</div>

{% schema %}
  { "foo": "bar",
"key":"value" 
      ,"ay":"bee"
   }
   
  {% endschema %}

Using Liquid: Format Document does actually do something, but it does the wrong thing. Here's the result:

<div>
  this is a test
  <span>foo</span>
  |</div>

{% schema %}
{ "foo": "bar",
"key":"value" 
      ,"ay":"bee"
   }

{% endschema %}

[panoply]

Do the following:

1. Make sure editor.formatOnSave is set to true
2. In some cases, applying file association might help, eg: "files.associations": { "*.liquid": "html" }
3. Make sure you've set liquid.format to true
4. The HTML you've passed is being skipped by the formatter because you're placing a dash character | before the starting close brace, PrettyDiff has trouble parsing that without the appropriate rulesets, thus it skips that code block, for example:

https://user-images.githubusercontent.com/7041324/102677125-333b5a80-41a1-11eb-9cb5-76d8cd509948.mov

4. Sometimes the parser requires a double scan, by that I mean you should run it 2 times. It's much more convenient to ensure you are formatting onsave. You'll see how I run your code, the first format is applied on (cmd+s) which adjusts the structure, the second format (cmd+s again) will correct everything.

https://user-images.githubusercontent.com/7041324/102676972-59142f80-41a0-11eb-991e-330f94619120.mov

Your .liquidrc file should adopt the defaults, the file rulesets should look something like this:

{
  "ignore": [
    {
      "type": "liquid",
      "begin": "comment",
      "end": "endcomment"
    }
  ],
  "html": {
    "correct": true,
    "force_attribute": false,
    "braces": false,
    "preserve": 1,
    "wrap": 80,
    "preserve_text": true,
    "content": true,
    "space_close": true,
    "tags": [
      {
        "tag": "icon",
        "rules": {
          "force_attribute": false,
          "space_close": true
        }
      },
      {
        "tag": "source",
        "rules": {
          "force_attribute": true,
          "space_close": true
        }
      }
    ]
  },
  "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": true,
    "brace_block": false,
    "no_semicolon": true
  }
}

[panoply]

Also, sometimes a restart does the trick. These issues have all been addressed in Liquify which I will begin to release over the next couple of weeks.

[dossy]

I was able to get it to work with your .liquidrc and I also happened to have whatwedo.twig and mblode.twig-language-2 extensions installed, and I think that whatwedo.twig might have been interfering as I uninstalled it. What's strange is I had tested (earlier) with ALL extensions disabled and couldn't get sissel.shopify-liquid to work, but now it does.

And, even better: it appears to work with "editor.formatOnSave": false (which is a must - I cannot use VSCode with that on, unfortunately).

Thanks for your help!

[panoply]

Glad you could work it out. Yeah, the Twig extension should be avoided. I'm really looking forward getting all active users off this version, it's well overdue. Thanks for taking the time to comment fam, it helps others and I really appreciate it, because it gives me an opportunity to go into a little more depth which someone might find helpful.

Happy Holidays.

[dossy]

I think I'm going to have to wait for you to release Liquify because I just let sissel.shopify-liquid v2.3 reformat some of my actual project Liquid files, and there's some weirdness about how it's indenting some lines, and worse yet: every time I save and it reformats the file, it indents the lines some more.

I think this is the smallest reproducible case:

<div style="foo: bar;
  {%- if "a" == "b" %} key: value;{% endif -%}
  ">test</div>

After the first save and reformatting, I'm left with this:

<div a" == " b" %} key: value;{% endif -%}
    " style="foo: bar;
    {%- if ">test</div>

For now, I'll just use the extension for syntax highlighting and turn off the formatting stuff and wait to see what the new version does. Thanks!

[panoply]

So for attributes and expressing Liquid in this manner the formatter is actually doing its job, the problem you are making is using double quotations without escaping, just use single quotations within all your Liquid syntax, eg:

<div style="foo: bar; {%- if 'a' == 'b' %} key: value;{% endif -%}">test</div>

In some cases you will need to refactor those tags if you are starting with using the extension but in most cases adjusting the format rules will fix these issues. PrettyDiff is the formatter and it uses Sparser to parse, so you need to adhere to those specs, you can get the full list here (everything under "markup" will be applied to HTML).

Might be worth noting, you will have much more success by trying to avoid infusing Liquid within attributes, that help avoid headaches occuring.

Don't write newlines within strings, for example:

<div class="
{%- if cond %}foo{% endfoo %}
"></div>

When you do something like this, and write some Liquid condition, the parser is going to interpret the Liquid within the string attribute as if it were on its own line, and even though you strip those newlines (with -), the formatter is still going to go ahead and not respect that structure. The better way would be:

<div class=" {%- if cond %}foo{% endfoo %}">

In your case, when it comes to style="" attributes, it's better do something like this:

{%- capture style_attr -%}
  {%- if "a" == "b" -%}key: value;{% endif -%}
{%- endcapture -%}
<div
  id="foo"
  class="some-class"
  data-attr="some_attr"
  style="foo: bar; {{ style_attr -}}">
  test
</div>

Because Liquid is free range, its unpredictable, sanity is hard.

[geongeorge]

@panoply I'd love to know when Liquify is being released?

[joshbedo]

For some reason prettier will format {% schema %} in a way that breaks when uploading. Anyone figure out a solution for using prettier or an alternative with *.liquid files?

[dossy]

@joshbedo It's probably not what you want to hear, but as a VSCode/Vim and a jq user, I mark the region inside the {% schema %} section and pipe it through jq.

Basically, something like:

:'a,'b!jq

Where I set the a mark on the line after {% schema %} and the b mark on the line before the {% endschema %}.

[MeffMara]

Please help, after saving, added extra tags

[panoply]

@MeffMara Disable prettier. Do not use in conjunction with the Sparser/PrettyDiff. Also, check you HTML code. This is known issue that has been addressed in Liquify. I am back working on the project and the reason for the delay was addressed in #56.

@geongeorge I am sorry it has take so long, I have been battling with some personal stuff. I am back working on the project and will release the beta very soon. Let me know if you want to be apart of the testing for this.

[mateus-dias-cwb]

Hey @panoply, hey everyone! I'm having the same problem as the original one in this thread. Any updates? Have anyone from the community found any teak that solve this? And @panoply thanks for the work man! I hope everything is ok!

[panoply]

🚢 Shipped v3.0.0

This error should no longer persist. Take a look at the release notes and readme