v4.0.1

v4.0.1 ~ vscode-liquid

This version ships bug fixes following the v4.0.0 release.

• Prevent parse occurrences when no document links have URI references.
• Fixes #176.
• Patches 11ty environment issues
• Fixes Liquid in CSS injection Syntax grammars

Æsthetic Patches

This version ships with improved handling for Æsthetic.

• Fixes comment issues
• Fixes indentation bugs

---

PR #174

v4.0.0

v4.0.0 ~ vscode-liquid

This version ships with breaking changes and requires that you to align with new configuration. This is an important update as it will be the last major version release wherein users will need to undertake and apply changes to core configurations in preparation for the Liquify supersede. The next major release of the extension will be Liquify which means all future features will up-streamed to that project.

See this gist for the quick-fix upgrade guide.

Breaking Changes

Workspace and .liquidrc file settings now use a new definition structure for formatting configuration. There is no backwards compatibility, so you can either update to 4.0.0 or continue using 3.2.2. Below is the breaking changes that ship in this release.

TLDR

No problems fam, see this gist.

Changed Rule Definitions

The new configurations are expressed using different structures. Depending on how you define settings, be it within a .liquidrc file or from within a .vscode/settings.json file the way to provide beautification rules has changed. See the below examples of the new configuration structures:

Updating a .liquidrc File

For developers who leverage a .liquidrc file for beautification rules, the new structure requires you to nest rules under a format key property.

OLD CONFIGURATION	NEW CONFIGURATION
{ // "liquid.format.wrap": 0, // "liquid.format.crlf": false, // "liquid.format.endNewLine": false, // "liquid.format.indentSize": 2, // "liquid.format.preserveLine": 3, // "liquid.format.commentIndent": false, // "liquid.format.preserveComment": false, // "liquid.format.markup": {}, // "liquid.format.script": {}, // "liquid.format.style": {}, // "liquid.format.json": {}, }	{ "format": { "ignore": [], "wrap": 0, "wrapFraction": 0, "crlf": false, "endNewline": false, "indentSize": 2, "preserveLine": 3, "liquid": {}, // New! Liquid specific format rules "markup": {}, "json": {}, "style": {}, "script": {} } }

Updating Workspace Settings

For developers who use workspace settings (.vscode/settings.json) for defining beautification options. You will need to move configuration to the liquid.format.rules object.

OLD CONFIGURATION	NEW CONFIGURATION
{ // "liquid.format.wrap": 0, // "liquid.format.crlf": false, // "liquid.format.endNewLine": false, // "liquid.format.indentSize": 2, // "liquid.format.preserveLine": 3, // "liquid.format.commentIndent": false, // "liquid.format.preserveComment": false, // "liquid.format.markup": {}, // "liquid.format.script": {}, // "liquid.format.style": {}, // "liquid.format.json": {}, }	{ "liquid.format.rules": { "ignore": [], "wrap": 0, "wrapFraction": 0, "crlf": false, "endNewline": false, "indentSize": 2, "preserveLine": 3, "liquid": {}, "markup": {}, "json": {}, "style": {}, "script": {} } }

Deprecated the liquid.settings.target workspace option

The liquid.settings.target option is deprecated and no longer supported. Editor settings will default to the workspace .vscode/settings.json file and if one is not present in the project then the global (User Settings JSON) file will be used.

Deprecated the package.json prettify config option

In version v3.0.0 an additional configuration method was made available which allowed you to define formatting rules in a package.json file using a prettify property. As of version 4.0.0 this is no longer supported (nor is Prettify, see Æsthetic replaced Prettify).

Option definitions using package.json files will return in Liquify, but under a different field value.

Deprecated the liquid.format.enable workspace option

As per #132 the liquid.format.enable setting is no longer supported. To enable formatting on save within Liquid files, you will need provide Language Specific settings in either your user or workspace settings. Below is the how you enable formatting in v4.0.0:

{
  "[liquid]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "sissel.shopify-liquid"
  }
}

New! File Associated Completions

Users have even more essential features available when choosing this extension for Shopify theme development or projects using Liquid. Support for file associated completions are now available. The files option is available to both the .liquidrc or workspace .vscode/settings.json settings. The option can used to provide file path references to project associated files. When you provide references then completion support is made available for the definition applied.

Using a .liquidrc file	Using workspace .vscode/settings.json file
{ "engine": "shopify", // set engine to shopify "files": { "locales": "", // eg: ./path/en.default.json "settings": "", // eg: ./path//settings_data.json "snippets": [], // eg: ["./snippets/*"] "sections": [], // eg: ["./sections/*"] } }	{ "liquid.engine": "shopify", // set engine to shopify "liquid.files.locales": "", "liquid.files.settings": "", "liquid.files.snippets": [], "liquid.files.sections": [], }

Locale Completion Support

This release provides locale completion support. This is achieved by providing a project relative path to the default locale file used by your theme. When defined, the extension will provide locale completions in translation object token expressions. Locale completions will be triggered in when a quotation character is detected following output token delimiters, eg: {{ ' }} or {{ " }}. In addition, the | t filter will be inserted automatically when none is detected.

Settings Completion Support

This release provides settings_schema.json completion support. This is achieved by providing a project relative path to the location of your settings_data.json file used by your theme. When defined, the extension will provide completions on the settings.* object in Liquid tag and output tokens.

Snippet Completion Support

This release provides snippet file completion support. This is achieved by defining project relative path/s to directories that contain snippets or alternatively you can provide globs matches. Snippets will be shown for in {% render '' %} tag and will also allow you to quick open files.

Æsthetic replaced Prettify

The Prettify project is now shipped under under the module name Æsthetic. Æsthetic replaces Prettify as the core beautification tool used by the extension. Æsthetic is now under an RC version release along with exhausting tests and new features. Test cases against 100+ different code sample structures has brought Æsthetic to a far safer and more controlled level wherein code output respects input intent and changes will take the least most augmentative approach possible to prevent formats happening in unpredictable ways.

Æsthetic provides new beautification rules that expose more fine grained control over how your code is to be beautified. Your .liquidrc file will complain about now deprecated or changed rules. You should consult the Æsthetic Documentation to familiarize yourself with the tool and better understand how each rule will effect code output.

Below are some key features of Æsthetic and what is being shipped in 4.0.0.

New! Language Specifics

Æsthetic has made previous global level rules available on a per-language basis. This means that you are able to use these rules in all supported lexer (liquid, markup, style and script) modes.

• commentIndent
• commentNewline
• preserveComment

New! Liquid Specific Lexer

Liquid beautification rules are no longer coupled together with markup and instead can now be defined via a liquid property. This new structure decouples and separates Liquid from markup allowing for more concise control for Liquid specific beautification. There are also several new highly refined formatting options available for Liquid specific beautification.

SEE CHANGES

OLD CONFIGURATION

NEW CONFIGURATION

// markup configuration no longer includes liquid // specific formatting rules. Instead you define those // rules on a { "liquid": {} } property { "markup": { // "delimiterTrims": "preserve", // "normalizeSpacing": true, // "lineBreakSeparator": "before", // "valueForce": "intent" "attributeCasing": "preserve", "attributeSort": false, "attributeSortList": [], "correct": false, "commentIndent": false, "commentNewline": false, "forceAttribute": true, "f...

v3.2.2

v3.2.2 ~ vscode-liquid

Some additional refinements following 3.2.0 minor version release and the subsequent patch 3.2.1. This version fixes #135.

Changes

Despite being a patch version release, it is important to note that Tag snippets no longer provide trim conditionals, you should instead rely on the formatting rule delimiterTrims for controlling this aspect. Some additional tags snippets were provided as an added bonus.

Improvements

Schema tag blocks now support for locale based IETF completions for the specified properties such as labels, info etc. It is important to note that not all locale IEFT names are supported, only a few (for now) but this will be improved in later versions.

v3.2.1

v3.2.1 ~ vscode-liquid

Couple of minor patches following 3.2.0 release.

Patches

• Patched issue pertaining to Prettify beautification in CSS
• Disabled normalizedSpacing from occurring on {%- liquid -%} tokens.

v3.2.0

v3.2.0 ~ vscode-liquid

Welcome to version 3.2.0 of the vscode liquid extension. This release ships various patches and brings supports for multiple development essentials, specifically those working with the Shopify Liquid variation (ie: Shopify Themes). Bug fixes and several Prettify improvements.

Completions

In 3.1.x completions were made available but in order to keep daily users from overwhelm, they were only being be made available on certain trigger characters. As of 3.2.0, completions are now made available at various points with persisted item listings that adheres to the general structure of Liquid tokens

Completion Triggers

As 3.2.0 object, tag and filter completions are now invoked both on existing triggers but also in accordance to cursor positions and surrounding characters and words. This means you'll have all Shopify objects at your fingertips at the appropriate places.

  Video Example

Screen.Recording.2022-11-24.at.04.17.47.mov

Operator Completions

Liquid logical operator completions are now supported. Though frivolous in the grand scale of things, the feature is part of the Liquify supersede and has been made available as the Liquify release approaches. Operators help speed up the development process for you.

  Video Example

Screen.Recording.2022-11-24.at.04.08.09.mov

Schema Completions

Shopify theme developers now have completions provided in accordance with data contained within section file {% schema %} JSON tags. This new capability will use the info defined values as descriptions and respects block.type scopes with support for both control flow tags.

  Video Example

Screen.Recording.2022-11-24.at.04.09.58.mov

  Code Example

{% for block in section.blocks %}

  {% if block.type == 'some_block_type' %}

    {% # only completions for the block type "some_block_type'"  will be made available %}

    {{  block.settings.  }}

  {% elsif block.type == 'another_block_type' %}

     {% # only completions for the block type "another_block_type'"  will be made available %}

    {{  block.settings.  }}

  {% endif %}

{% endfor %}

Formatting

Version 3.2.0 ships a considerable amount of improvements for Prettify and exposes some additional beautification rules for more refined output. In previous versions of the extension, Prettify had some edge cases situations that needed ironing. Since the release of v3 and thanks to users taking time to report the defects, Prettify and beautification capabilities have improved, making it more stable and customisable.

Prettify v0.4.4-beta

Major improvements in Prettify across the spectrum.

New Markup Rules

Prettify provides 6 (new) additional formatting rules. These rules allow you to take control of your Liquid + Markup code styles.

• delimiterTrims
• lineBreakSeparator
• normalizeSpacing
• valueForce
• ignoreScripts
• ignoreStyles

v3.1.1

v3.1.1 ~ vscode-liquid

This release irons out a lots bugs in the initial v3.0.0 release and includes some addition features.

Fixed various formatting defects

Various defects were fixed that were apparent in v3.0.0 - Things should be a lot less aggressive now. There is still a lot more work to be done on this front but things are getting more stable. The goal before next minor is to iron out and refine configuration IntelliSense. This is a lot of work, so stay tuned.

Improved Syntax Highlighting

The Liquid grammars have been improved and refined. As per #105 the new syntax highlighting supports type scopes and will apply colouring to objects and object properties which reflect the referenced type, for example:

Big thanks to @muchisx who spent a considerable amount of time to report of inform on the various scopes and issues. Great stuff.

Added 14 more completions

This release includes some additional Shopify object completions. Completions is a new capability to this extension and is something that will be refined as it reaches closer to the official Liquify supersede. I will soon open source the Liquid Language Specification package which is responsible from making the completions possible and will be hoping keen contributors will assist in ensuring the Shopify specs include the most recent API for Liquid.

• selling_plan_allocation
• selling_plan_allocation_price_adjustment
• selling_plan_checkout_charge
• selling_plan_group
• selling_plan_group_option
• selling_plan_option
• selling_plan_price_adjustment
• settings
• sort_option
• tablerowloop
• transaction_payment_details
• unit_price_measurement
• video
• video_source

Fixes

Fixes

Below is the list of issues that have been resolved in this update. Thanks to all developers who submitted issues and I apologize it took this long to apply an update.

Issue	Title	Submitted
#102	Comments only being added with opening tags	@davidwarrington
#105	3.0 update syntax highlighting not as good as before	@muchisx
#111	Adding an extra "}" on format	@jamiegalbreath
#113	forloop.index0	@davidwarrington
#115	Liquid formatting issues	@t3pfaffe
#117	Emmet shortcuts not working in HTML	@davidwarrington
#118	Schema Snippets not working	@jzelaya-manduka
#119	Incorrect comment blocks in Liquid files with this extension enabled	@t3pfaffe

v3.0.0

v3.0.0^ ~ vscode-liquid

This is a well overdue update. While most issues were planned to be addressed in Liquify, it was apparent that v2.3.0 was in dire need of an update. This version aims to fix the outstanding issues (most of which) pertained to formatting and have persisted for too long.

After you have addressed the breaking changes, take a look at the readme in the project.

BREAKING CHANGES

This version ships breaking changes and users will need to update and align in order to continue using the extension. The changes require you to replace workspace/user settings and/or configuration defined in the .liquidrc file (if you are using a .liquidrc file). Upgrading to the new version for the vast majority of users is a matter of copy and paste.

CHANGES YOU NEED TO MAKE:

• The new .liquidrc file configuration
• The new Workspace/User Settings

CHANGES TO BE AWARE OF:

• The ignore tags option is no longer supported
• Theassociate tags option is no longer supported
• Removed Liquid syntax highlighting in TS, JSX and TSX
• Liquid in JS, CSS and SCSS files now require .liquid suffixed filenames
• The formatting key-binding was removed

The new .liquidrc file configuration

As of version 3.0.0 the old schema used in .liquidrc files is no longer supported. If you are using a .liquidrc file you will need to update the file and align it with the new formatting rules.

Below is the new defaults for the .liquidrc file:

{
  "ignore": [],
  "crlf": false,
  "commentIndent": true,
  "endNewline": false,
  "indentChar": " ",
  "indentSize": 2,
  "preserveComment": false,
  "preserveLine": 2,
  "wrap": 0,
  "markup": {
    "correct": false,
    "commentNewline": false,
    "attributeCasing": "preserve",
    "attributeValues": "preserve",
    "attributeSort": false,
    "attributeSortList": [],
    "forceAttribute": false,
    "forceLeadAttribute": false,
    "forceIndent": false,
    "preserveText": false,
    "preserveAttributes": false,
    "selfCloseSpace": false,
    "quoteConvert": "none"
  },
  "style": {
    "correct": false,
    "classPadding": false,
    "noLeadZero": false,
    "sortSelectors": false,
    "sortProperties": false
  },
  "script": {
    "correct": false,
    "braceNewline": false,
    "bracePadding": false,
    "braceStyle": "none",
    "braceAllman": false,
    "caseSpace": false,
    "inlineReturn": true,
    "elseNewline": false,
    "endComma": "never",
    "arrayFormat": "default",
    "objectIndent": "default",
    "functionNameSpace": false,
    "functionSpace": false,
    "styleGuide": "none",
    "ternaryLine": false,
    "methodChain": 4,
    "neverFlatten": false,
    "noCaseIndent": false,
    "noSemicolon": false,
    "quoteConvert": "none"
  },
  "json": {
    "arrayFormat": "default",
    "braceAllman": false,
    "bracePadding": false,
    "objectIndent": "default"
  }
}

The new workspace/user settings

The v2.3.0 workspace/user settings will not work and users need to align configuration to the new v3.0.0 settings. The liquid.rules option is completely deprecated and the liquid.format option no longer accepts a boolean type.

The v3.0.0 settings are as follows:

{
  // Deprecated v2.3.0 Settings
  // "liquid.format": true,
  // "liquid.rules": {},

  // New v3.0.0 Settings
  //
  "liquid.engine": "shopify",
  "liquid.config.baseUrl": ".",
  "liquid.settings.target": "workspace",
  "liquid.completion.tags": true,
  "liquid.completion.objects": true,
  "liquid.completion.filters": true,
  "liquid.format.enable": true,  //  instead of "liquid.format": true,
  "liquid.format.ignore": [],
  "liquid.format.wrap": 0,
  "liquid.format.indentSize": 2,
  "liquid.format.endNewLine": false,
  "liquid.format.commentIndent": false,
  "liquid.format.preserveLine": 3,
  "liquid.format.preserveComment": false,
  "liquid.format.crlf": false,
  "liquid.format.markup": {},
  "liquid.format.script": {},
  "liquid.format.style": {},
  "liquid.format.json": {},
  }
}

The ignore tags option is no longer supported

In version 2.3.0 the extension provided an ignore[] option which could be used to define a set of either Liquid or HTML tags to have excluded (ignored) from formatting. In version 3.0.0 the ignore[] option is not used to ignore tags from formatting but instead the option is used to ignore files and directories.

A string list of relative glob patterns is the new expected type:

.liquidrc rule file	workspace/user settings
{ // New v3.0.0 // // Option is used to ignore files/directories // "ignore": [ "./dir/file-to-ignore.liquid", "./example/*" ] // Deprecated v2.3.0 // // "ignore": [ // { // "type": "liquid", // "begin": "comment", // "end": "endcomment" // } // ] }	{ // New v3.0.0 // // Option is used to ignore files/directories // "liquid.format.ignore": [ "./dir/file-to-ignore.liquid", "./example/*" ] // Deprecated v2.3.0 // // "liquid.rules.ignore": [ // { // "type": "liquid", // "begin": "comment", // "end": "endcomment" // } // ] }

Note
When you wish to exclude/ignore tags from beautification you can do this using Prettify Inline Control comments.

Removed Liquid in HTML grammar injections

This release has removed grammar injections from HTML. This means that users no longer use HTML as the language identifier for Liquid files. HTML intellisense features like hovers and completions are preserved. After upgrading to v3.0.0 all .liquid extension files will be associated to the Liquid language identifier.

Note
Users leveraging the Shopify Liquid extension may need to make a decision on whether to continue using that alongside this extension.

Theassociate tags option is no longer supported

The associated formatting option is deprecated and no longer supported. The new formatting capabilities provided by Prettify negate the need for such a feature and users who relied on this capability will need to wait until documentation is written for the grammars option provided by Prettify.

Removed Liquid syntax highlighting in TS, JSX and TSX

Liquid syntax highlighting within .ts, .jsx and .tsx files is no longer supported. This capability was experimental at the time it was appropriated. This feature also caused problems for many users who were not working exclusively with Liquid projects so it is both an appropriate and sensible decision to remove.

Liquid in JS, CSS and SCSS files now require .liquid suffixed filenames

Syntax highlighting Liquid in JavaScript, CSS and SCSS now requires filenames to be suffixed with a .liquid extension in order for highlighting to be enabled. In version 2.3.0 syntax highlighting for Liquid in these languages was applied using injection grammars but it was not an ideal approach. Users who depend upon this feature will need to suffix the file names to apply highlighting.

• .css → .css.liquid
• .scss → .scss.liquid
• .js → .js.liquid

This change also impacts intellisense capabilities. In 2.3.0 intellisense capabilities were preserved in these languages along side Liquid but in this version 3.0.0 intellisense is not supported.

Note
In Liquify intellisense will work as expected but in this version and future versions until Liquify supersedes.

The formatting key-binding was removed #75

The key-binding used in v2.3.0 would overwrite the default key bindings of vscode and was very problematic. Invoking beautification using a key-binding now adhere to the default vscode formatting key map:

⇧ ⌥ F

shift + alt + F

This requires the editor.defaultFormatter be set sissel.shopify-liquid on a per-language basis. See the readme section on setting a default formatter.

Completions

This version also ships a pre-release (Liquify) feature. Completions for Liquid Standard and Liquid Shopify are available and you can enable/disable these features using the following workspace/user settings:

{
   "liquid.completions.tags": true,
   "liquid.completions.filters": true,
   "liquid.completions.objects": true
}

Tag Completions

Screen.Recording.2022-09-27.at.15.28.29.mov

Object Completions

Screen.Recording.2022-09-27.at.18.52.06.mov

Filter Completions

Screen.Recording.2022-09-27.at.15.36.20.mov

JSON Template Completions

In Shopify themes, JSON templates and settings_schema files provide intellisense capabilities such as code completions, validations and hover descriptions.

Screen.Recording.2022-09-27.at.15.41.41.mov

Additional new Features

...