46

I wonder if someone managed to enable the Liquid templating engine syntax highlighting in WebStorm IDE, I work a lot on Shopify stores and really like using Webstorm for that purpose. Did anyone managed to get this working?

I found some resources regarding this issue on JetBrain's forum though it didn't quite got me anywhere, there is one dude who suggested using 'tmBundle' and that might work if you do some dark magic.

The thread is: RUBY-7210 and the official plugin request: JetBrain's plugins: Liquid Templating language request

Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
Ilia luk
  • 2,065
  • 2
  • 16
  • 18
  • OK, I figured something out though it's not a complete solution and I'm far from being happy with it, just followed the advice from "RUBY-7210" thread which suggests to use 'tmBundle' to enable .liquid highlighting. So to do that you can download the following package: https://github.com/Shopify/liquid-tmbundle/ go to "webStorm settings > Plugins" and make sure you got "TextMate bundles support" enabled. next go to "Settings > Editor > TextMate Bundles" press the "+" and point to the place of the package you downloaded from gitHub. open a ".liquid" file and walla, got highlighting, a bad one. – Ilia luk Mar 29 '15 at 23:28
  • One more thing, make sure in the "settings > Editor > TextMate Bundles" section you change the "TextMate Color Scheme" to your current Scheme by pressing on the default "Mac Classic" and choosing something else, it makes it look a bit better though I'll be really happy if WebStorm could treat this file as normal "HTML" file with this extra 'tmBundle' highlighting. – Ilia luk Mar 30 '15 at 00:00

5 Answers5

132

I've found out that Twig have a very similar syntax to Liquid, enabling the Twig plugin will highlight Liquid syntax and will keep the HTML highlight/autocomplete/emmet functionality working as opposed to the "textMate Liquid bundle".

Go to Settings > Editor > File Types find "Twig" on that list and associate Liquid files with it by adding *.liquid to the registered patterns section.

If you can't find Twig, download the official plugin from the "Browse repositores" or in the "install JetBrains plugin". If you can't find it there then download the plugin and install it manually by pressing "install plugin from disk": https://plugins.jetbrains.com/plugin/7303?pr=

You will also want to associate *.scss.liquid to .scss files, *.css.liquid to .css files and *.js.liquid to .js files so that Twig wouldn't run on those type of files.

The end result works like a charm! it's the best solution yet until some official plugin will come out

starball
  • 20,030
  • 7
  • 43
  • 238
Ilia luk
  • 2,065
  • 2
  • 16
  • 18
  • 4
    I've found that you need to associate the *.scss.liquid, *.css.liquid, and *.js.liquid BEFORE you associate *.liquid to "Twig". In my case if I associated *.liquid to "Twig" first, PHPStorm would recognize *.scss.liquid, *.js.liquid, and *.css.liquid as a "Twig" file. – Brian C Mar 10 '17 at 21:18
  • 1
    Twig uses `{# #}` as a comment style, I'm looking to change that to `{% comment %}` any ideas? Would be nice to use the default keyboard shortcut – s0rfi949 Dec 06 '18 at 05:54
  • Out of date, couldn't follow this with PHPStorm, so using Visual Studio Code instead. – Pocketninja Apr 05 '19 at 18:15
  • The Twig plugin is causing my WebStorm to crash after some recent updates. Not sure what's going on, if it's just me, or if it's something else entirely. When I uninstall the plugin, then everything works fine. When the plugin is installed, all my files I'm editing will randomly close out and the entire project will close. – Trevor Nestman Jan 02 '20 at 15:32
8

To follow up on Ilia luk's answer, PHP Storm now has Twig support built in—just enable the plug-in if it isn't already.

Community
  • 1
  • 1
Chris Bauer
  • 181
  • 1
  • 3
7

Adding to the styles for Shopify, since it adds JSON for settings. Enable JSON wrapping between schema tags in

Settings > Editor > Language Injections

Click add/plus button. Then add settings

Language ID = JSON

Places Patterns = + twigCustomStatement("schema")

Community
  • 1
  • 1
JoeyPi
  • 251
  • 3
  • 7
0

Adding another answer here: RubyMine by JetBrains have Liquid syntax included with the IDE. There is a Liquid plugin that says IntelliJ Ultimate is compatible, but I couldn't get it to work: https://plugins.jetbrains.com/plugin/14388-liquid

JoeyPi
  • 251
  • 3
  • 7
0

JetBrains PHPStorm now has a Liquid Plugin available. You have to have PHPStorm version 2020.2 or higher (that took me a while to figure out, I was on 2020.1).

Mageician
  • 2,918
  • 9
  • 43
  • 69