Включение подсветки синтаксиса шаблонов Liquid в webStorm/phpStorm

Интересно, удалось ли кому-нибудь включить подсветку синтаксиса движка шаблонов Liquid в WebStorm IDE, я много работаю над Shopify магазины, и мне очень нравится использовать Webstorm для этой цели. Кому-нибудь удалось заставить это работать?

Я нашел некоторые ресурсы по этой проблеме на форуме JetBrain, хотя они меня ни к чему не привели, есть один чувак, который предложил использовать 'tmBundle', и это может сработать, если вы примените какую-нибудь темную магию.

Тема: RUBY-7210 и официальный запрос на плагин: Плагины JetBrain: запрос языка Liquid Templating


shopify webstorm liquid syntax-highlighting textmatebundles
person Ilia luk    schedule 18.03.2015    source источник
comment
Хорошо, я кое-что понял, хотя это не полное решение, и я далеко не доволен им, просто последовал совету из ветки RUBY-7210, в котором предлагается использовать «tmBundle» для включения подсветки .liquid. Для этого вы можете скачать следующий пакет: github.com/Shopify/liquid-tmbundle перейдите в настройки webStorm > Плагины и убедитесь, что у вас включена поддержка пакетов TextMate. затем перейдите в «Настройки»> «Редактор»> «Комплекты TextMate», нажмите «+» и укажите место пакета, который вы скачали с gitHub. откройте файл .liquid и валла, получил подсветку, плохой.   -  person Ilia luk    schedule 30.03.2015
comment
Еще одна вещь: убедитесь, что в настройках > Редактор > Раздел TextMate Bundles вы изменили цветовую схему TextMate на свою текущую схему, нажав на Mac Classic по умолчанию и выбрав что-то еще, это сделает его немного лучше, хотя я буду действительно счастлив, если WebStorm может обрабатывать этот файл как обычный HTML-файл с этой дополнительной подсветкой «tmBundle».   -  person Ilia luk    schedule 30.03.2015

Ответы (5)


arrow_upward
127
arrow_downward

Я обнаружил, что синтаксис Twig очень похож на синтаксис Liquid, позволяя плагину Twig выделять синтаксис Liquid и поддерживать работу функций выделения/автозаполнения/emmet HTML, в отличие от «пакета textMate Liquid».

Перейдите к Settings > Editor > File Types, найдите «Twig» в этом списке и свяжите с ним файлы Liquid, добавив *.liquid в раздел зарегистрированных шаблонов.

Если вы не можете найти Twig, загрузите официальный плагин из «Обзора репозиториев» или в «установить плагин JetBrains». Если вы не можете найти его там, загрузите плагин и установите его вручную, нажав «установить плагин с диска»: https://plugins.jetbrains.com/plugin/7303?pr=

Вы также захотите связать файлы *.scss.liquid с файлами .scss, файлы *.css.liquid с файлами .css и файлы *.js.liquid с файлами .js, чтобы Twig не запускался на файлах такого типа.

Конечный результат работает как шарм! это лучшее решение, пока не выйдет какой-нибудь официальный плагин, надеюсь, он кому-то поможет.

person Ilia luk    schedule 30.03.2015
comment
Я обнаружил, что вам нужно связать *.scss.liquid, *.css.liquid и *.js.liquid ДО того, как вы свяжете *.liquid с Twig. В моем случае, если бы я сначала связал *.liquid с Twig, PHPStorm распознал бы *.scss.liquid, *.js.liquid и *.css.liquid как файл Twig. - person Brian C; 11.03.2017
comment
Twig использует {# #} в качестве стиля комментариев, я хочу изменить его на {% comment %} есть идеи? Было бы неплохо использовать сочетание клавиш по умолчанию - person s0rfi949; 06.12.2018
comment
Устарело, не может следовать этому с PHPStorm, поэтому вместо этого используйте код Visual Studio. - person Pocketninja; 05.04.2019
comment
Плагин Twig вызывает сбой моего WebStorm после некоторых недавних обновлений. Не уверен, что происходит, если это только я, или если это что-то совсем другое. Когда я удаляю плагин, все работает нормально. Когда плагин будет установлен, все мои файлы, которые я редактирую, будут случайным образом закрыты, и весь проект будет закрыт. - person Trevor Nestman; 02.01.2020

arrow_upward
8
arrow_downward

В дополнение к ответу Ильи Лука в PHP Storm теперь встроена поддержка Twig — просто включите подключаемый модуль, если он не уже.

person Chris Bauer    schedule 15.11.2016

arrow_upward
3
arrow_downward

Добавление к стилям для Shopify, так как он добавляет JSON для настроек. Включить перенос JSON между тегами схемы в

Настройки › Редактор › Языковые инъекции

Нажмите кнопку «Добавить/плюс». Затем добавьте настройки

Идентификатор языка = JSON

Places Patterns = + twigCustomStatement (схема)

person JoeyPi    schedule 12.08.2019
comment
Спасибо за эту дополнительную настройку. Очень здорово! - person andershagbard; 03.08.2020
comment
Этот ответ - золото! - person Alex Gilbert; 13.01.2021

arrow_upward
0
arrow_downward

Добавление еще одного ответа здесь: RubyMine от JetBrains имеет синтаксис Liquid, включенный в IDE. Существует подключаемый модуль Liquid, в котором говорится, что IntelliJ Ultimate совместим, но я не смог заставить его работать: https://plugins.jetbrains.com/plugin/14388-liquid

person JoeyPi    schedule 30.08.2020

arrow_upward
0
arrow_downward

JetBrains PHPStorm теперь имеет доступный Liquid Plugin. У вас должен быть PHPStorm версии 2020.2 или выше (мне потребовалось некоторое время, чтобы понять это, я был на 2020.1).

person BrianVPS    schedule 07.01.2021