VSCode Liquid v4.0.0

readme.md

UPGRADE GUIDE   –   vscode-liquid v4.0.0

Update the relating files to the structures found below, adjust where necessary. This update should not take longer than 1 minute for most users, it is just copy/paste unless you have some custom beautification rules, in that case you will need to re-apply them where required. Refer to the Release Notes for additional information and understanding.

• Liquidrc File
• Workspace Settings

Get support in the Discord Server if you run into any issues, I am here and I am human!

Updating the .liquidrc File

The .liquidrc file uses a new configuration structure. This is a breaking change. The following code snippet uses the recommended beautification rules for formatting code. You can customize them and align accordingly.

NOTE: The file accepts additional rules intelliSense completions and hovers describe everything.

{
  "engine": "shopify",
  "files": {
    "locales": "", // eg: ./path/en.default.json
    "settings": "", // eg: ./path//settings_data.json
    "snippets": [], // eg: ["./snippets/*"]
    "sections": [] // eg: ["./sections/*"]
  },
  "format": {
    "ignore": [],
    "wrap": 0,
    "crlf": false,
    "indentSize": 2,
    "preserveLine": 2,
    "endNewLine": true,
    "liquid": {
      "commentIndent": true,
      "commentNewline": true,
      "delimiterTrims": "preserve",
      "lineBreakSeparator": "before",
      "normalizeSpacing": true,
      "quoteConvert": "single",
      "valueForce": "intent"
    },
    "markup": {
      "commentIndent": true,
      "commentNewline": true,
      "forceAttribute": 2,
      "forceIndent": true,
      "forceLeadAttribute": true,
      "ignoreScripts": false,
      "ignoreStyles": false,
      "selfCloseSpace": true
    },
    "json": {
      "braceAllman": true,
      "arrayFormat": "indent",
      "objectIndent": "indent"
    },
    "style": {
      "correct": true,
      "sortProperties": true,
      "noLeadZero": true,
      "quoteConvert": "single",
      "classPadding": true
    },
    "script": {
      "arrayFormat": "indent",
      "braceAllman": false,
      "bracePadding": true,
      "commentNewline": true,
      "caseSpace": true,
      "endComma": "never",
      "elseNewline": true,
      "functionNameSpace": true,
      "functionSpace": true,
      "methodChain": 3,
      "objectIndent": "indent",
      "quoteConvert": "single",
      "ternaryLine": true
    }
  }
}

Updating workspace settings

Your .vscode workspace settings use new configuration structure. This is a breaking change. The following code snippet contains the recommended settings. You can customise them and align accordingly. Add this to either your projects workspace (.vscode/settings.json) file or if you define rules globally in the User Preference Settings file.

Note: This workspace configuration below is assuming you use a .liquidrc file for definition options.

{

  // Liquid Formatting
  //
  // Leave the "editor.formatOnSave" option set to false.
  // You can enable it by pressing using the 💧 button in the status bar.
  //
  "[liquid]": {
    "editor.defaultFormatter": "sissel.shopify-liquid",
    "editor.formatOnSave": false
  },

  // Liquid Configuration
  //
  // If you are not using a .liquidrc file you can set the
  // "liquid.config.method" setting to "workspace"
  //
  "liquid.config.baseUrl": ".",
  "liquid.config.method": "liquidrc",

  // Liquid Completion Settings
  //
  // These settings will enable/disable completions from showing.
  //
  "liquid.completion.tags": true,
  "liquid.completion.objects": true,
  "liquid.completion.filters": true,
  "liquid.completion.properties": true,
  "liquid.completion.variables": true,
  "liquid.completion.operators": true,
  "liquid.completion.sections": true,
  "liquid.completion.schema": true,

  // Liquid Validations
  //
  // This setting will enable/disable validations in {% schema %} JSON
  //
  "liquid.validate.schema": true,

  // Liquid Hover Descriptions
  //
  // These settings will enable/disable hover descriptions from showing
  //
  "liquid.hover.tags": true,
  "liquid.hover.schema": true,
  "liquid.hover.filters": true,

  // Uncomment if you are not using a .liquidrc file
  //
  //    "liquid.files.shopify": {
  //      "settings": "./config/settings_schema.json",
  //      "locales": "./locales/en.default.json",
  //      "sections": [
  //        "./sections/*.liquid"
  //      ],
  //      "snippets": [
  //        "./snippets/*.liquid"
  //      ]
  //    },

  // Uncomment if you are not using a .liquidrc file
  //
  // "liquid.engine": "shopify",

  //  Uncomment these if you do not use a .liquidrc file
  //
  // "liquid.format.ignore": [],
  // "liquid.format.rules": {}

}