Liquid
Required plugin: Liquid
WebStorm 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
Commenting/uncommenting lines and blocks of code with Ctrl0/ / CtrlShift0/
Live templates (code snippets)
Before working with the Liquid template language in WebStorm, make sure that the Liquid plugin is installed and enabled.
WebStorm 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
If you want your .html or and .md files to be processed as Liquid files, you can configure file type associations. Note that file type associations apply to all projects in your IDE.
Open an HTML file, press CtrlShift0A, and type Associate with File Type.
In the Register New File Type Association window that opens, select Liquid template.
The file that was open in the editor will be now processed as a Liquid file.
Press CtrlAlt0S to open the IDE settings and then select Editor | File Types.
From the Recognized File Types list, select Liquid template.
In the File name patterns section, enter a pattern, for example
*.html.If the pattern that you entered matches an existing pattern (for example,
*.htmlmatches the HTML file type), you will be prompted to confirm the reassignment.
To create a new Liquid file in WebStorm, follow the steps below:
Open the Project view Alt01 and select the desired directory.
Go to File | New| Liquid File. As an alternative, press AltInsert and select Liquid File in the New list.
tip
Start typing Liquid File in the New list to find that action quickly.
Specify the filename and press Enter.
You can use live templates to insert Liquid code constructs into your code, such as if blocks, assign tags, and so on.
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
ifand press Tab.Specify the required condition and press Tab to move to the next statement.
Type the desired code for the specified condition.
To configure Liquid-specific live templates:
Open Settings CtrlAlt0S.
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.
To customize code style settings for Liquid:
Press CtrlAlt0S to open the IDE settings and then select Editor | Code Style | Liquid.
You can configure Liquid-aware syntax highlighting according to your preferences and habits.
In the Settings dialog (CtrlAlt0S), go to Editor | Color Scheme | Liquid.
Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in Colors and fonts.
Thanks for your feedback!