Mechanic Liquid Support for VS Code

This Visual Studio Code extension provides unofficial support for syntax highlighting and code snippets for the Mechanic app on the Shopify platform. The extension is currently a pre-release preview, so bugs should be expected.

Mechanic-flavored Liquid is implemented as its own language, “Mechanic Liquid,” and so it should play nice with other liquid extensions out there, including [Liquid by Νίκος], [Liquid Languages Support by Neil Ding], and [Shopify Liquid Template Snippets by Franky Lau].

Enabling Mechanic-Liquid Language Support

To enable syntax highlighting and snippet support, simply change the language of your document to Mechanic Liquid. This can be done by clicking on the language name at the bottom of the VSCode window, or by typing the key chord Cmd \ Ctrl + K, M. This extension will automatically enable itself on filenames ending with .mechanic.liquid.

Snippets

To use a snippet, type part of a snippet, press enter or tab, and the snippet will unfold. For complex snippets with multiple parameters, you can move through each input point using the tab key.

Color Theming

The extension creates background highlighting for several types of objects, including action tags, shopify filter queries, comments, log tags, and error tags. You can customize these colors by adding the following to your settings.json file, and changing the colors to match your preferences:

"workbench.colorCustomizations":{
  // wrapping your color specifications in an object with a theme name will limit these color overrides to that particular theme:
  "[Material Theme Lighter High Contrast]": {
    "mechanicLiquid.actionBackground": "#62ff0038",
    "mechanicLiquid.queryBackground": "#7700ff22",
    "mechanicLiquid.commentBackground": "#ffff004a",
    "mechanicLiquid.statusBackground": "#005eff1d",
    "mechanicLiquid.errorBackground": "#ff000022"
  }
}

The colors must be in 8-digit hex format (#ffffffff) with a low transparency, so that other VS Code highlighting can function correctly.

Supporting the Extension

This extension is in active development inside my free time. I decided to write it to make life easier when coding my own Mechanic tasks. If you feel you’ve benefitted from using this extension, how about buying me a coffee? 😄☕️🙏

Bug Reports / Issues / Contributing

Bug reports and issues can be reported on the extension’s GitHub Issue Page. You're also welcome to make suggestions for improvements to the extension.

In the meantime, check out the amazing Mechanic app and the ever-welcoming Mechanic Slack community!

Installation

Published to the Visual Studio Code Marketplace.

Published simultaneously to the Open VSX Directory for use with Theia IDE.