vscode liquid format on save adds new tabs

[itszoose]

Hi,
Whenever I save a liquid file, on certain lines it is adding multiple tabs, on the attached video it's doing to the image tag, I have disabled prettier for .liquid files so vscode is only using vscode liquid for formatting code.

Any idea why it's doing this?

Screen.Recording.2022-07-24.at.3.54.19.PM.mov

These are .liquidrc settings

{
    "ignore": [
        {
            "type": "liquid",
            "begin": "comment",
            "end": "endcomment"
        },
        {
            "type": "html",
            "begin": "script",
            "end": "script"
        },
        {
            "type": "html",
            "begin": "style",
            "end": "style"
        }
    ],
    "html": {
        "correct": false,
        "force_attribute": false,
        "braces": 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
    }
}

These are .prettierignore settings

*.liquid

These are my vscode settings:

{
    "editor.fontFamily": "Dank Mono, Hack, Menlo, Envy Code R, Monaco,  Fira Code",
    "editor.fontSize": 16,
    "editor.minimap.enabled": false,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "python.linting.pylintArgs": ["--load-plugins=pylint_django"],
    "workbench.iconTheme": "helium-icon-theme",
    "prettier.jsxSingleQuote": true,
    "prettier.singleQuote": false,
    "prettier.tabWidth": 4,
    "prettier.printWidth": 200,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "[html]": {
        "editor.defaultFormatter": "sissel.shopify-liquid"
    },
    "git.autofetch": true,
    "git.confirmSync": false,
    "explorer.confirmDelete": false,
    "eslint.quiet": true,
    "explorer.confirmDragAndDrop": false,
    "diffEditor.ignoreTrimWhitespace": true,
    "vscode-mysql.enableDelimiter": true,
    "workbench.activityBar.visible": true,
    "editor.minimap.maxColumn": 115,
    "editor.renderControlCharacters": false,
    "workbench.editorAssociations": {
        "*.ipynb": "jupyter.notebook.ipynb"
    },
    "editor.wordWrap": "on",
    "editor.wordWrapColumn": 120,
    "workbench.startupEditor": "none",
    "security.workspace.trust.untrustedFiles": "open",
    "workbench.colorCustomizations": {
        "progressBar.background": "#fff0"
    },
    "editor.insertSpaces": true,
    "editor.tabSize": 4,
    "editor.detectIndentation": false,
    "bracketPairColorizer.depreciation-notice": false,
    "workbench.colorTheme": "Tokyo Night Storm",
    "theme-by-language.themes": "Tokyo Night Storm",
    "liquid.format": true,
    "breadcrumbs.enabled": false,
    "editor.renderWhitespace": "all"
}

My issue is quite similar to this one on stackoverflow, the only difference being is that his issue was prettier related, whereas in my case prettier is disabled for .liquid files.

[panoply]

Hey @itszoose this is because you have a newline in the attribute value at srcset - The formatter used in this version does not support such structures, so something like:

<img srcset="
  {% if x %} foo {% endif %}"

Is going to re-indent upon every save. Though Shopify does this type in theme like Dawn, it is typically bad practice. The good news is that I actually addressed such an issue in Prettify (https://github.com/panoply/prettify/issues/9) but the bad news it will not be supported any time soon.

The workaround for the time being is use {% capture %} and dump the expression into srcset so for example, you'd need to do something like this:

{% capture lazy_srcset %}
<!-- add the srcset value here --> 
{% endcapture %}

<img srcset="{{ lazy_srcset }}">

and typically, just avoid applying newlines in attribute values.

Hope it helps.

[itszoose]

That's unfortunate, so there is actually no way to fix this, perhaps there is a particular formatting rule?

I am using Alpine js, and sometimes need to write extended js code and having to put many js statements in one line is unreadable at all.

Thank you for your time, and for putting this amazing extension.

[panoply]

@itszoose I understand how frustrating it can be but in this version there is nothing at this present moment that can be applied to fix it because it was not developed to support such structures as that you'd employ with Alpine. The pre-release of Prettify will not support Alpine structures but I will work to bring support for it.

If you can share with me a code sample, (for example the code in your screenshot), I will see if there is something that can be done with what is available at present.

[panoply]

🚢 Shipped v3.0.0

[itszoose]

Hey @panoply

Sorry, I totally missed your reply. This bug had me switching from vscode to webstorm for the past couple of months now and unfortunately, it appears that it's still not patched.

As for the code sample, please use this, it should produce the same issue.

<div x-data="
    foo: 'bar'
">
</div>