在 visual studio 代码中格式化 liquid(Shopify) 代码

Question

如何格式化 Visual Studio 中的 .liquid (Shopify liquid) 代码。通过将语言设置为 HTML 我可以做到，但与此同时，我无法使用 Shopify 自动完成功能。当我切换到 liquid.html 时，我可以使用自动完成功能，但我无法格式化代码。有什么办法可以在 visual studio 中使用另一种语言和格式代码作为另一种语言？

Answer 1

VSCode Liquid 扩展提供格式化和语法高亮显示。还具有智能感知和大量其他功能。

Answer 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 %}

在 visual studio 代码中格式化 liquid(Shopify) 代码

Format liquid(Shopify) code in visual studio code

code-formatting

liquid

visual-studio

shopify