If you're using the Liquid Language Support and/or the Shopify Liquid Template Snippets extension then it's recommended that you either uninstall or disable both these extensions before using this.

Liquid (vs code)

A visual studio code extension for the Liquid template language. Includes syntax highlighting, formatting + beautification, snippet auto-completion and HTML Intellisense.

Features

• Syntax highlighting support for all Liquid variations
• Auto formatting and beautification
• Snippet auto-completion
• HTML IntelliSense
• Jekyll Front Matter yaml syntax support
• Shopify Section tags syntax support + formatting

Showcase

Snippets

Liquid snippets are supported in this extension. The snippets which have been included were forked from vscode-liquid-snippets. The reason for forking this extension is to avoid conflicts due to the extension dependency it relies on.

If you have vscode-liquid-snippets installed, you can safely uninstall this extension and it's dependency.

Key binding

You can use the Liquid formatter by using the below key binding.

cmd + shift + L -> Format Document

Use ctrl for windows

Custom keybindings
If you don't like the defaults then rebind editor.action.formatDocument in the keyboard shortcuts menu of vscode.

Workspace Settings

{
  "liquid.format": true,
  "liquid.formatIgnore": ["case"],
  "liquid.beautify": {
    "html": {
      "indent_size": 2,
      "force_attribute": false,
      "preserve": 2
    },
    "javascript": {
      "indent_size": 2,
      "preserve": 1,
      "method_chain": 0,
      "quote_convert": "none",
      "format_array": "indent",
      "format_object": "indent"
    },
    "stylesheet": {
      "indent_size": 2,
      "css_insert_lines": true,
      "preserve": 2
    },
    "schema": {
      "indent_size": 2,
      "format_array": "indent"
    }
  }
}