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 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" // } // ] }

.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.

The`associate` 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

This release also ships several new features that aim to provide a more integrated experience when working with Liquid in vscode. These new capabilities are optional and mainly geared towards Shopify Theme developers.

Intellisense Supported Configuration

The .liquidrc and configuration provided to user/workspace settings in vscode supports intellisense features. Completions, validations and descriptions which describe each option.

Ignore Files/Directories

You can now exclude files/directories from beautification. The ignore rule accepts a glob match pattern relative to your working root directory of paths that should be excluded from formatting.

Extended Syntax Support

This version also brings support for Liquid contained in JSON and YAML files. JSON support is applied using grammar injection so intellisense capabilities are preserved. YAML support is made available through file extension suffix (eg: .yaml.liquid).

Improved status bar item

You will notice in this release that the status bar item no longer uses the "Liquid" label and instead the 💧 emoji is the primary point of reference.

More informative Output logs

Output logs now include formatting stats and other various informative information about operations taking place by the extension. This will help users better understand what is happening behind the scenes.

Snippets character choices

Snippets now employ a more refined approach when it comes to applying whitespace dashes - - In previous versions 2 identical snippets would be made available (one for whitespace and one without) but now you can determine this in the tab assertion, so a single snippet entry (much cleaner). Liquid filter snippets similar dashes will infer pipe characters using choice completions.

Informative Output Logs

The output log prints informative information about actions that have taken place

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
#33	Formatting issues	@davidpanzarella
#35	Comments	@entozoon
#37	Markdown horizontal rule gets highlighted as if it were frontmatter	@paulozoom
#38	Inline JSON gets messed up	@lmartins
#39	Comments with Quotes Cause Strange HTML Injection	@entozoon
#49	Respect editor settings or allow using tabs	@passcod
#50	Formatting splits td tags	@MiBuena
#52	Extension should only affect liquid tags	@aes421
#57	front matter in scss	@irik77587
#60	Snippet for checkbox setting has invalid default value	@larsschellhas
#62	Highlighting does not work	@jarkin13
#64	Formatter changes single quotation to double quotation	@renestalder
#71	Closing braces of a liquid object	@endepointe
#73	Formatter isn't handling style well	@james0r
#75	Format key binding conflicts with default key binding on Mac	@ktnyt
#79	Formatting breaks json-ld script blocks	@DPangerl
#83	assign variables breaks into new lines	@mau2099
#84	Syntax highlighting in yaml files	@benjaminbosko
#86	Weird schema formatting	@weird schema formatting
#89	Force-attribute for 2+ attributes for HTML in .liquidrc	@james0r
#96	vscode liquid format on save adds new tabs	@itszoose

What about Liquify?

Liquify is still in development and in last few days I have had some communication with Shopify relating to the project. As per Liquify and the future of this extension (#56) the project has been a very big undertaking and (currently) the codebase consists of nearly 100k lines spanning across 15 different modules.

Writing parsers and building out lexers is both a challenging and time consuming task and with each advancement you tend to introduce more possibilities and thus more time and deliberation.

In the last few months I got around to shipping a pre-release of Prettify. Prettify is the beautification tool that Liquify will run atop of and it is now used in this version of the extension (so please report defects or issues!). Prettify alone took the better part of 6 months to refine and overhaul as it was adapted from the late Sparser and PrettyDiff projects that were being used in this extension up until v2.3.0. Liquify is still very much alive but albeit a tad cryogenic.

Join the Liquify Discord

@panoply

Patches

Patch releases post v3.0.1 can be found below:

v3.0.1 (#103)
v3.02 (#104) @davidwarrington

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v3.0.0

v3.0.0^ ~ vscode-liquid

BREAKING CHANGES

CHANGES YOU NEED TO MAKE:

CHANGES TO BE AWARE OF:

The new `.liquidrc` file configuration

The new workspace/user settings

The `ignore` tags option is no longer supported

Removed Liquid in HTML grammar injections

The`associate` 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 #75

⇧ ⌥ F

Completions

Tag Completions

Object Completions

Filter Completions

JSON Template Completions

Additional new Features

Intellisense Supported Configuration

Ignore Files/Directories

Extended Syntax Support

Improved status bar item

More informative Output logs

Snippets character choices

Informative Output Logs

Fixes

What about Liquify?

Patches

Contributors

v3.0.0

v3.0.0^ ~ vscode-liquid

BREAKING CHANGES

CHANGES YOU NEED TO MAKE:

CHANGES TO BE AWARE OF:

The new .liquidrc file configuration

The new workspace/user settings

The ignore tags option is no longer supported

Removed Liquid in HTML grammar injections

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 #75

⇧ ⌥ F

Completions

Tag Completions

Object Completions

Filter Completions

JSON Template Completions

Additional new Features

Intellisense Supported Configuration

Ignore Files/Directories

Extended Syntax Support

Improved status bar item

More informative Output logs

Snippets character choices

Informative Output Logs

Fixes

What about Liquify?

Patches

Contributors

The new `.liquidrc` file configuration

The `ignore` tags option is no longer supported

The`associate` tags option is no longer supported

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