Format liquid(Shopify) code in visual studio code
Asked Answered
E

2

18

How to format .liquid (Shopify liquid) code in Visual Studio. By settings language as HTML I can do it but at the same time, I can't use Shopify autocomplete. When I switch to liquid.html then I can use the autocomplete but I can't format code. Is there any way I can use another language and format code as another language in visual studio?

Eckert answered 17/5, 2018 at 6:4 Comment(0)
M
6

The VSCode Liquid extension provides formatting and syntax highlighting. Also has intellisense and ton of other features.

Mellar answered 4/7, 2019 at 12:56 Comment(0)
M
-2
<div class="page-width">
  {% if section.settings.title != blank %}
    <header class="section-header">
      <h2 class="section-header__title">
        {{section.settings.title}}
      </h2>
    </header>
  {% endif %}

  <div class="popup-gallery">
    {%- for media in product.media -%}
    {%- liquid
      assign has_video = false
      assign video_type = ''

      case media.media_type
        when 'external_video'
          assign has_video = true
          assign video_type = media.host

          if media.host contains 'youtube'
            assign video_id = media.external_id
          endif
        when 'video'
          assign has_video = true
          assign video_type = 'mp4'
      endcase -%}

      <div
        href="{%- if has_video -%}
          {%- if media.media_type=='video' -%}
            {%- for source in media.sources -%}
              {{- source.url -}}
            {%-endfor-%}
          {%- else -%}
            {%- assign video_url = media | external_video_url -%}                
            {%- if video_url contains "youtube" -%}
              https://www.youtube.com/watch?v={{- media.external_id -}}              
            {%- else -%}
              https://vimeo.com/{{- media.external_id -}}
            {%- endif -%}
          {%- endif -%}
        {%- else -%}
          {{- media | image_url -}}
        {%- endif -%}"
      class="
        {% if has_video %}
          video
        {% else %}
          image
        {% endif %}"
      title="
        {% if has_video %}
          This is a video
        {% else %}
          This is a image
        {% endif %}
      ">
        {%- assign img_url = media.preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        <img
          class="lazyload"
          data-src="{{ img_url }}"
          data-widths="[120, 360, 540, 720]"
          data-aspectratio="{{ media.preview_image.aspect_ratio }}"
          data-sizes="auto"
          alt="GALLERY"
        >
          <noscript>
            <img
              class="lazyloaded"
              src="{{ media | img_url: '400x' }}"
              alt="GALLERY"
            >
          </noscript>
        </div>
      {%- endfor -%}
    </div>
  </div>
    
  {{ 'magnific-popup.min.css' | asset_url | stylesheet_tag }}
    
  <script
    type="text/javascript"
    src="{{ 'jquery.min.js' | asset_url }}"
  ></script>
  <script
    type="text/javascript"
    src="{{ 'magnific-popup.min.js' | asset_url }}"
  ></script>

  <script type="text/javascript">
    $(".popup-gallery").magnificPopup({
      delegate: "div",
      type: "image",
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
      },
      callbacks: {
        elementParse: function (item) {
          console.log(item.el[0].className);
          if (item.el[0].className == "video") {
            (item.type = "iframe"),
            (item.iframe = {
              patterns: {
                youtube: {
                  index: "youtube.com/", // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
                  id: "v=", // String that splits URL in a two parts, second part should be %id%                 // Or null - full URL will be returned                 // Or a function that should return %id%, for example:
                  // id: function(url) { return 'parsed id'; }
                  src: "//www.youtube.com/embed/%id%?autoplay=1" // URL that will be set as a source for iframe.
                  },
                  vimeo: {
                    index: "vimeo.com/",
                    id: "/",
                    src: "//player.vimeo.com/video/%id%?autoplay=1"
                  },
                  gmaps: {
                    index: "//maps.google.",
                    src: "%id%&output=embed"
                  }
                }
              });
            } else {
              (item.type = "image"),
              (item.tLoading = "Loading image #%curr%..."),
              (item.mainClass = "mfp-img-mobile"),
              (item.image = {
                tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
              });
            }
          }
        }
      });
  </script>
  {% schema %}
    {
      "name": "Product gallery",
      "class": "product-gallery-section",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading"
        }
      ]
    }
  {% endschema %}
Multifaceted answered 28/5, 2022 at 1:31 Comment(1)
"Any answer that gets the asker going in the right direction is helpful, but do try to mention any limitations, assumptions or simplifications in your answer. Brevity is acceptable, but fuller explanations are better." - check How do I write a good answer. Please provide some explanations on how do you think this answer's the OP's question so it can help future researchers.Dody

© 2022 - 2024 — McMap. All rights reserved.