Help formating JSON between custom tags

Hi there,

I'm not familiar with Liquid so have no idea what plugins/etc you might be using to have it supported in this IDE. Could you please clarify this moment (and show a screenshot of how such file looks in IDE -- whole IDE window please -- I want to see what file type (file icon) it is associated with etc)

But in general:

1) you most likely will need to go "Settings/Preferences | Languages & Frameworks | Template Data Languages" and tell that the top-most language for the whole file must be treated as JSON instead of what it might have right now (e.g. HTML). That is, of course, if Liquid support is a proper plugin (similarly to how other templating engines are supported -- e.g. Smarty/Twig)

2) >Is there a way to tell phpStorm to format everything between {% schema %} tags as JSON?

Not really (unlikely, as there are no proper support for "treat this part of the file between these custom text sequences as separate language") .. unless the Liquid plugin can do that (can inject JSON between such tags). But even then such fragment might need to be formatted separately from the rest of the file.

Hi,

Thanks for the advice - appreciate it.  I had a look in the template data languages setting, but couldn't get anywhere.

The quick solution I choose was to just give phpstorm a filetype hint by including the json code and referencing .json in the filename extension:-

ie. In file 'myschema.liquid' :-

{%schema%}

{% include 'myschema.json.liquid' %}  <- hinting the .json gives me the formatting.

{%endschema%}

Cheers

Dominic this is just what I was looking for. Great job!

There is better way of doing it now.

Highlight all the json code between `{% schema %}`

Press Alt + Return

Select "Inject Language or reference"

Select JSON

Checkbox everything and click save.

This is old now, but this also helped solve my issue with .json templated w/ Smarty.

Yes, Smarty and Twig plugins now (for quite some time now, actually) allow creating automatic Language Injection rules based on the tag used -- e.g. automatically inject JSON into `{% schema %}` tag etc. The IDE now comes bundled with a few such predefined rules (e.g. for blocks with "css" and "javascript" names -- corresponding languages are injected there).

For Liquid templates -- there is a separate plugin (not bundled and needs to be installed separately though) that supports lots of Liquid stuff (esp useful if you do Shopify themes). Sadly it still does not support language injection rules (e.g. does not support JSON between {% schema %} or custom injections: https://youtrack.jetbrains.com/issue/RUBY-27525; Liquid tickets are hosted under RubyMine project). If you need such injections then perhaps consider not using Liquid specific plugin and associate *.liquid files with Twig instead (similar syntax anyway) -- there will be no help with unknown tags/functions completion but injection rules may be worth that.

@... I tried your way for formatting but I am having no luck. Are there any specific settings that I am missing?

@Nishant Kumar

Works for me in liquid file (with Liquid plugin). I can create an injection -- it works for syntax colors/errors -- no code formatting is available though (see my prev comment).

Please make a short video/screencast showing how you are doing it (ensure to show the file name/icon as well -- it may give hints in some cases).

The code:

{% schema %}
{
    "name": "Slideshow",
    "settings": [
        {
            "id": "title",
            "type": "text",
            "label": "Title",
            "default": "Hello world"
        }
    ],
    "blocks": [
        {
            "type": "team",
            "name": "Team Member",
            "settings": [
                {
                    "id": "name",
                    "type": "text",
                    "label": "Name"
                }
            ]
        }
    ]
}
{% endschema %}

Injecting the language via Alt+Enter menu:

Specifying JSON language:

The result:

Hi @Andriy Bazanov,

Thank you for your quick and detailed reply. I really appreciate your effort, But I am really sorry it didn't work for me. I have created a video of how I am doing. Please check and let me know if I am doing any wrong or I should have to try something else.

https://nwaredev.com/schema_liquid_format_issue.mp4

Thank you!

But I am really sorry it didn't work for me.

What do you mean "it did not work"? You clearly have some language / JSON injected there -- the popup says exactly that.

Try removing comma after between }, { .. or add comma after the last element (before closing } ) -- the IDE should give you an error mark.

What exactly does not work? If it's about code formatting then yes -- check my previous 2 comments -- I've mentioned that and even gave a link to a specific ticket.

I was able to get this working for Smarty embedded in JSON by using Language & Frameworks -> Template Data Languages and setting the language of a specific file to JSON and keeping the document as a smarty template.

Code formatting is a very needed future for Shopify. It's a deal breaker for me.
So annoying to switch to VSCode every time I need to work on section schema...

Andriy Bazanov , what specifically does not work is code blocks folding for JSON blocks inside {% schema %} tags.