Liquid

IntelliJ IDEA supports the Liquid template language and includes the following capabilities:

Syntax and error highlighting
Auto-closing of the curly brace delimiters
Auto-completion for Liquid tags (including Shopify and Jekyll tags) and filters
Code formatting
Commenting/uncommenting lines and blocks of code with Ctrl+// Ctrl+Shift+/
Code folding
Live templates (code snippets)

Install and enable the Liquid plugin

Before working with the Liquid template language in IntelliJ IDEA, make sure that the Liquid plugin is installed and enabled.

Supported file types

IntelliJ IDEA supports Liquid syntax for the following file types:

*.liquid files (processed as HTML files with Liquid code)
*.html.liquid, *.md.liquid, *.css.liquid, and so on

Create a Liquid file

To create a new Liquid file in IntelliJ IDEA, follow the steps below:

Open the Project view Alt+1 and select the desired directory.
From the main menu, select File | New| Liquid File. As an alternative, press Alt+Insert and select Liquid File in the New list.
Start typing Liquid File in the New list to find that action quickly.
Specify the filename and press Enter.

Live templates

You can use live templates to insert Liquid code constructs into your code, such as if blocks, assign tags, and so on.

Expand a live template

To expand a live template, type the corresponding template abbreviation and press Tab. Let's see how to insert the if block using the predefined if template.

In a Liquid file, type if and press Tab.
Specify the required condition and press Tab to move to the next statement.
Type the desired code for the specified condition.

Configure live templates

To configure Liquid-specific live templates:

Open Settings/Preferences Ctrl+Alt+S.
Go to the Editor | Live Templates page and select the desired template in the Liquid group. You can learn how to configure live templates from Live templates.

Configure code style settings

To customize code style settings for Liquid:

Open the Settings/Preferences Ctrl+Alt+S dialog.
Go to the Editor | Code Style| Liquid page and configure the desired code style settings.

Configure syntax highlighting

You can configure Liquid-aware syntax highlighting according to your preferences and habits.

In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Color Scheme | Liquid.
Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring colors and fonts.

Last modified: 12 March 2021