Adding an extra "}" on format

[jamiegalbreath]

Hey I'm having so many weird problems with this extension and in general any extension with formatting liquid files. I have it working but every time it formats the doc it adds an extra "}" on the end. I have disabled all other extensions.

Basically, my code looks like this in the end:

{% schema  %}
  {}
{% endschema %}}}}}}}}}

My settings are as follows for user:

{
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.accessibilitySupport": "off",
  "[liquid]": {
    "editor.bracketPairColorization.enabled": true,
    "editor.defaultFormatter": "sissel.shopify-liquid",
    "editor.formatOnSave": true,
    "liquid.format.enable": true
  },
  "liquid.format.enable": true,
  "editor.formatOnPaste": true,
  "explorer.confirmDelete": false,
  "files.associations": {
    "*.liquid": "liquid"
  },
  "workbench.colorTheme": "Dracula Soft"
}

and workspace:

{
  "liquid.format.enable": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.accessibilitySupport": "off",
  "[liquid]": {
    "editor.bracketPairColorization.enabled": true,
    "editor.defaultFormatter": "sissel.shopify-liquid",
    "editor.formatOnSave": true,
    "liquid.format.enable": true
  },
  "editor.formatOnPaste": true,
  "explorer.confirmDelete": false,
  "files.associations": {
    "*.liquid": "liquid"
  }
}

Any ideas?

[jamiegalbreath]

I edited the above as I copied the code wrong

[panoply]

Hey @jamiegalbreath

Thanks for taking the time to inform about the issue, it helps. So this might be a defect, I haven't experienced it myself as yet but @toklok reported this a few days ago and he has tested Prettify thoroughly. I will be working through the formatting bugs tomorrow and will get to the bottom of it for v3.1.0.

weird problems with this extension and in general any extension with formatting liquid files.

I hear you! Liquid is super difficult to wrangle when it comes beautification. I am working on putting together a fluid solution but the edge cases are vital to getting it there. Looking at your workspace configuration, you should disable editor.formatOnType.

In the meantime, try the following setting:

{
  "markup": {
    "correct": true,
    "quoteConvert": "none",
    "delimiterSpacing": true,
    "selfCloseSpace": true,
    "commentNewline": true,
    "forceIndent": true,
    "attributeSort": false,
    "attributeSortList": [],
    "attributeCasing": "preserve",
    "forceAttribute": false,
    "forceLeadAttribute": false,
    "preserveAttributes": false,
    "preserveText": false
  },
  "json": {
    "bracePadding": false,
    "braceAllman": true,
    "arrayFormat": "indent",
    "objectIndent": "indent",
    "objectSort": false
  }
}

[jamiegalbreath]

Thanks for looking into this. I have tried the above unfortunately no change.

Is this what you meant?

{
  "liquid.format.enable": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.accessibilitySupport": "off",
  "[liquid]": {
    "editor.bracketPairColorization.enabled": true,
    "editor.defaultFormatter": "sissel.shopify-liquid",
    "editor.formatOnSave": true,
    "liquid.format.enable": true
  },
  "workbench.colorTheme": "Dracula Soft",
  "editor.formatOnPaste": true,
  "explorer.confirmDelete": false,
  "files.associations": {
    "*.liquid": "liquid"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "markup": {
    "correct": true,
    "quoteConvert": "none",
    "delimiterSpacing": true,
    "selfCloseSpace": true,
    "commentNewline": true,
    "forceIndent": true,
    "attributeSort": false,
    "attributeSortList": [],
    "attributeCasing": "preserve",
    "forceAttribute": false,
    "forceLeadAttribute": false,
    "preserveAttributes": false,
    "preserveText": false
  },
  "json": {
    "bracePadding": false,
    "braceAllman": true,
    "arrayFormat": "indent",
    "objectIndent": "indent",
    "objectSort": false
  }
}

[panoply]

Have you looked over the readme?

That configuration is invalid. markup and json are not valid configurations for vscode workspace. You can either use a .liquidrc file for defining those rules or you can apply them via the liquid.format namespace.

[jamiegalbreath]

Ah that makes sense! FIXED thanks YOU!

[panoply]

Great! I'll leave this open because there is a defect that does actually write an additional } but for now those settings should be enough to keep things tame until v3.1.0.

[jamiegalbreath]

Has this got something to do with it?

<script type="text/javascript">
var test = `this is a string with ${something}`
</script>

Above works and formats ok but if you change to this...

<script type="text/javascript">
    var test = `this is a string with ${something} - ${something.something}`;
</script>

it formats incorectly to this...

<script type="text/javascript">
    var test = `this is a string with ${something} - ${;
      something.something
    }`;
</script>

[panoply]

Indentation of template literals, ie: ${} is not invalid, it is the intended behaviour of the JavaScript formatter (but I will introduce an option to disable it at a later time). Also I cannot re-create:

https://user-images.githubusercontent.com/7041324/193417508-ea0d9968-7a82-4a95-acc3-853ff240ddd3.mov

For now it is best to exclude JavaScript embedded regions of complexity until Prettify reaches at least a 95% support rate as per Language Support (it is only at 85%. All you need to do is wrap <script> tags in ignore comments, eg:

<!-- @prettify-ignore-start -->
<script type="text/javascript">
    var test = `this is a string with ${something} - ${something.something}`;
</script>
<!-- @prettify-ignore-end -->

[jamiegalbreath]

It formats correctly on the first save and then on the second it does it wrong. Ok good to know. I'll use this for now.