Skip to main content

O2VEND Liquid VS Code Extension

The O2VEND Liquid extension provides comprehensive language support for O2VEND Liquid templates in VS Code and Cursor. It includes syntax highlighting, IntelliSense, code snippets, and JSON schema validation.

Installation​

From VS Code Marketplace​

  1. Open VS Code or Cursor
  2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
  3. Search for "O2VEND Liquid"
  4. Click Install

Manual Installation​

If you have a .vsix file:

code --install-extension o2vend-liquid-1.0.0.vsix

Or in VS Code:

  1. Go to Extensions
  2. Click the "..." menu
  3. Select "Install from VSIX..."
  4. Choose the .vsix file

Features​

Syntax Highlighting​

Full syntax highlighting for:

  • Liquid template tags ({% %})
  • Liquid output tags ({{ }})
  • O2VEND-specific tags ({% section %}, {% widget %})
  • HTML, CSS, and JavaScript within Liquid files
  • Liquid filters and variables

IntelliSense and Auto-completion​

Intelligent code completion for:

  • Liquid Tags: assign, capture, case, comment, cycle, for, if, include, unless, etc.
  • O2VEND Tags: section, widget, schema, render_widget
  • Liquid Filters: abs, capitalize, date, default, money, product_url, etc.
  • O2VEND Filters: money, money_with_currency, product_url, collection_url, img_url, asset_url, render_widget, etc.

Code Snippets​

Pre-built snippets for common patterns:

Liquid Snippets:

  • if - Conditional block
  • for - Loop block
  • assign - Variable assignment
  • include - Include snippet
  • case - Switch statement

O2VEND Snippets:

  • section - Include section
  • widget - Render widget
  • schema - Section schema
  • render_widget - Widget rendering

JSON Schema Validation​

Automatic validation for:

  • config/settings_schema.json - Theme settings schema
  • config/settings_data.json - Theme settings data
  • config/theme.json - Theme manifest

The extension provides:

  • Real-time validation
  • Error highlighting
  • Auto-completion for schema properties
  • Hover documentation

Hover Documentation​

Hover over Liquid tags and filters to see:

  • Description of the tag/filter
  • Usage examples
  • Parameter information
  • O2VEND-specific documentation

Language Configuration​

Optimized editor settings for Liquid files:

  • Auto-closing tags
  • Bracket matching
  • Indentation rules
  • Comment toggling

Usage​

Opening Liquid Files​

The extension automatically activates when you open .liquid files. You'll see:

  • Syntax highlighting applied
  • IntelliSense available
  • Snippets accessible via Tab completion

Using IntelliSense​

  1. Type {% to see available Liquid tags
  2. Type {{ to see available variables and filters
  3. Type | after a variable to see available filters
  4. Press Ctrl+Space (or Cmd+Space on Mac) to trigger completions

Using Snippets​

  1. Type the snippet prefix (e.g., if, for, section)
  2. Press Tab to expand the snippet
  3. Fill in the placeholders
  4. Press Tab to move to the next placeholder

Example: Creating a Section​

  1. Type section and press Tab
  2. The snippet expands to: 
    {% section 'section-name' %}
  3. Replace section-name with your section name

Example: Using Filters​

  1. Type {{ product.price | and press Ctrl+Space
  2. See available filters including:
    • money - Format as currency
    • money_with_currency - Format with currency symbol
    • default - Provide default value
  3. Select a filter and continue typing

Configuration​

Extension Settings​

Configure the extension in VS Code settings:

{
  "o2vend-liquid.format.enable": true,
  "o2vend-liquid.lint.enable": true,
  "o2vend-liquid.autoCloseTags": true
}

Settings:

  • o2vend-liquid.format.enable - Enable formatting for Liquid files (default: true)
  • o2vend-liquid.lint.enable - Enable linting for Liquid files (default: true)
  • o2vend-liquid.autoCloseTags - Automatically close Liquid tags (default: true)

File Associations​

The extension automatically associates with .liquid files. If needed, you can manually configure:

{
  "files.associations": {
    "*.liquid": "liquid"
  }
}

Supported Language Features​

Liquid Tags​

All standard Liquid tags are supported:

  • Control flow: if, unless, case, for, tablerow
  • Variables: assign, capture, increment, decrement
  • Includes: include, render
  • Comments: comment, raw
  • Other: cycle, liquid

O2VEND-Specific Tags​

  • {% section 'name' %} - Include a section template
  • {% widget widget_data %} - Render a widget
  • {% schema %} - Define section schema
  • {{ widget | render_widget }} - Render widget filter

Liquid Filters​

Standard Liquid filters:

  • String: capitalize, downcase, upcase, strip, lstrip, rstrip
  • Array: first, last, join, sort, reverse, map, where
  • Math: abs, ceil, floor, round, plus, minus, times, divided_by
  • Date: date
  • Other: default, size, escape, url_encode, url_decode

O2VEND-Specific Filters​

  • money - Format price with currency
  • money_with_currency - Format price with currency symbol
  • money_with_settings - Format price with custom settings
  • product_url - Generate product URL
  • collection_url - Generate collection URL
  • page_url - Generate page URL
  • img_url - Generate image URL with size options
  • asset_url - Generate asset URL
  • handleize - Convert to URL-friendly handle
  • pluralize - Pluralize words
  • highlight - Highlight search terms
  • render_widget - Render widget from data

JSON Schema Support​

Settings Schema​

The extension validates config/settings_schema.json:

{
  "sections": [
    {
      "name": "Colors",
      "settings": [
        {
          "type": "color",
          "id": "primary_color",
          "label": "Primary Color",
          "default": "#000000"
        }
      ]
    }
  ]
}

Settings Data​

The extension validates config/settings_data.json:

{
  "current": {
    "primary_color": "#FF0000"
  }
}

Theme Manifest​

The extension validates config/theme.json:

{
  "id": "my-theme",
  "name": "My Theme",
  "version": "1.0.0",
  "author": "Your Name",
  "description": "Theme description"
}

Best Practices​

1. Use IntelliSense​

Let the extension help you:

  • Use Ctrl+Space to see available options
  • Read hover documentation for tags and filters
  • Use snippets for common patterns

2. Validate JSON Files​

The extension automatically validates JSON configuration files:

  • Fix errors before saving
  • Use auto-completion for schema properties
  • Check hover hints for required fields

3. Use Snippets​

Speed up development with snippets:

  • Learn snippet prefixes
  • Customize snippets if needed
  • Use Tab to expand and navigate

4. Enable Formatting​

Keep code clean:

  • Enable format on save
  • Use the formatter for consistent style
  • Configure formatting rules

Troubleshooting​

Extension Not Activating​

  1. Check that .liquid files are recognized
  2. Verify extension is installed and enabled
  3. Reload VS Code window (Ctrl+Shift+P > "Reload Window")

IntelliSense Not Working​

  1. Check that file is recognized as Liquid (see status bar)
  2. Try Ctrl+Space to manually trigger completions
  3. Verify extension is enabled in workspace settings

Snippets Not Appearing​

  1. Type the snippet prefix and press Tab
  2. Check that snippets are enabled in settings
  3. Verify file is recognized as Liquid

JSON Validation Not Working​

  1. Ensure JSON files are in config/ directory
  2. Check file names match expected patterns
  3. Verify JSON syntax is valid

Support​

License​

MIT License