Having trouble with Shopify Liquid syntax highlighting in VSCode
I set up the Shopify Liquid Extension in Visual Studio Code for my theme development work. Everything seems to work fine except for one thing that’s bugging me.
When I try to load JavaScript files using the script_tag filter in my theme sections, the extension doesn’t seem to recognize it properly. The syntax highlighting just doesn’t work for this specific filter.
Is this expected behavior with the extension? Maybe I need to configure something or install additional packages? I’m pretty new to Shopify development so I might be missing something obvious.
This issue with the script_tag filter not being recognized by the Shopify Liquid extension is indeed a common problem. I encountered similar frustrating situations where syntax highlighting failed at this specific filter. A workaround that worked for me was to install the ‘Liquid’ extension created by sissel; it tends to manage these situations much better than the standard Shopify one. Additionally, when the highlighting falters, you might consider configuring VSCode to treat .liquid files as HTML. While it won’t solve the issue completely, it can help maintain readability in your work.
same issue here with script_tag. most liquid extensions r pretty broken for shopify anyway. i just ignore the highlighting - code still works fine and vscode runs themes properly even when colors look off. try the “shopify liquid template” extension instead, sometimes switching helps.
Been there with Shopify development. Extension issues like this drove me crazy until I ditched them completely.
I stopped fighting VSCode extensions that break every update and built a proper dev pipeline instead.
My setup watches theme files and validates Liquid syntax in real time. When I save a file with script_tag or any filter, it checks against Shopify’s actual rules - not some outdated extension definition.
It auto-uploads changes to my dev store and runs syntax validation that actually works. No more guessing if my liquid code’s right based on wonky highlighting.
I use Latenode for the whole pipeline since it connects directly to Shopify APIs and handles file watching perfectly. Takes maybe an hour to set up but saves hours every week.
Your script_tag syntax is correct by the way. It’s definitely the extension, not your code.
I’ve dealt with this exact syntax highlighting issue tons of times over my two years working with Shopify themes. Your code’s fine - that script_tag filter syntax is totally correct. VSCode extensions just hate complex filter chains like asset_url piped to script_tag. Here’s what actually fixed it for me: update both VSCode and the Shopify Liquid extension to the latest versions, then do a full restart. The extension cache gets corrupted sometimes and won’t recognize newer filter combos. Also check if you’ve got workspace settings messing with your language associations. One more thing - make sure your .liquid files are actually set to Liquid language mode. Check the bottom right corner where it shows file type and manually pick Liquid if it’s showing something else. That usually gets the highlighting working properly.
Had this exact problem with Shopify projects. The extension gets wonky with certain filters, especially script_tag.
You could try switching extensions or tweaking the syntax rules manually, but those fixes never last.
I ended up automating my whole Shopify workflow instead. Rather than wrestling with VSCode extensions, I built something that handles syntax validation, file processing, and deployment automatically.
It watches my theme files, validates Liquid syntax (including tricky stuff like script_tag), and pushes changes to my dev store instantly. Don’t have to worry if the extension catches every filter anymore.
Set it up with Latenode since it connects straight to Shopify APIs and handles file monitoring perfectly. Took about 30 minutes and now I never deal with syntax highlighting problems.
You could build something similar that validates your Liquid files in real-time and gives actual feedback instead of depending on buggy extensions.