Custom Syntax Highlighter in Visual Studio for Shopify .liquid Files

Question

I'm currently working in a Shopify project which I have integrated to work locally. I'm using Visual Studio as my IDE which is super awesome. When working with .liquid files, I treat the extension to be opened with HTML editor with encoding. This is pretty sweet, but then I think it will be even better if I can have a syntax highlighting done for all the 'liquid' specific syntax, especially {% and %} since {{ and }} have been highlighted thanks to AngularJS syntax I reckon.

I found out that there are libraries to provide better intellisense, but not for .liquid files. What's the best way to get started with configuring a custom syntax highlighter? Will this be a quick process to do?

Screenshot:

Gogetter

Answer 1

Seeing this question just received an upvote, let me post my solution here.

(Especially) For Windows Developers

Your best choice is to use VS Code, which is a lightweight, cross-platform source code editor by Microsoft. There's an extension called Liquid Languages Support by Neil Ding which I used

Alternative: There seems to be a better extension called Shopify Liquid Template Snippets by Franky Lau, which I haven't tested. Can anyone who has used this share their insights?

Theme Kit

If you are looking on how to upload your local changes directly to your development theme, or an alternative workflow for Mac/Linux users, check out Shopify Theme Kit.

Gogetter

Answer 2

Haven't tried it but there is a liquid highlighting extension for VS 2017 / 2019

Sapphism

@Marek a +1 then ? – Sapphism

It can't do liquid/html formatting which makes it hard to use. – Bramante

Answer 3

Best extension I have found to date is VS Code Liquid by Nikolas Savvidis. I'm pretty confident it will handle the sorts of situations you've described.

I use Locomotive CMS which also requires mixed code types within files and Liquid Language Support can't handle it.

Arlo