Menu
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:
704
Syntax highlighting determines the color and style of source code displayed in the Visual Studio Code editor. It is responsible for colorizing keywords like if or for in JavaScript differently than strings and comments and variable names.
To add a syntax highlighting language, simply check its checkbox in the main list of languages. It will appear with a checkmark in bold font to show that it has been selected but not yet installed.
Seeing this question just received an upvote, let me post my solution here.
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?
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.
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
