Shopify Code in JS Reported as Error

[Muxstang]

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.

[Max-Stevenson]

Possibly having the same issue I was having.

In the root of your project create a new directory called .vscode and inside that directory create a new file called settings.json. In the settings.json file add the following rule:

{
  "html.validate.scripts": false,
  "html.validate.styles": false
}

[panoply]

Hey guys,

For now this is the best solution to avoid such errors, it's difficult to find a fluent solution to overcome such an issue as JavaScript infused with Liquid is not something that JavaScript parsers are equipped to handle just yet. I may work on something like this in future but for now, best to just skip validating as per @Max-Stevenson comment.

I'll keep this open and think it might be worth adding to the readme/docs.

[joshistoast]

Any news on this in the year 2023? 👀

[panoply]

Hey @joshistoast,

This one must of got lost, but essentially JS errors are going to be reported for Liquid contained in JavaScript because it is invalid. The workaround is to simply disable validations as per Max comment above https://github.com/panoply/vscode-liquid/issues/58#issuecomment-699125396.

[joshistoast]

This one must of got lost, but essentially JS errors are going to be reported for Liquid contained in JavaScript because it is invalid. The workaround is to simply disable validations as per Max comment above https://github.com/panoply/vscode-liquid/issues/58#issuecomment-699125396.

I saw that, was hoping for a more graceful solution then disabling validation. There's been a few years between then and now so I was curious if any headway was made.