WebStorm 2026.1 Help

Liquid​

WebStorm は Liquid テンプレート言語をサポートしており、次の機能を利用できます：

Liquid プラグインをインストールして有効にする

WebStorm で Liquid テンプレート言語を使う前に、 Liquid​ プラグインが インストールされ、有効になっていることを確認してください。

サポートされているファイルの種類

WebStorm は、次のファイルタイプの Liquid 構文をサポートしています：

  • *.liquid ファイル（Liquid コードで HTML ファイルとして処理されます）

  • *.html.liquid 、 *.md.liquid 、 *.css.liquid など

.html または .md ファイルを Liquid ファイルとして処理したい場合は、 ファイルタイプの関連付けを構成できます。 ファイルタイプの関連付けは、IDE のすべてのプロジェクトに適用されることに注意してください。

HTML ファイルを Liquid に関連付けます

  1. HTML ファイルを開き、 Ctrl+Shift+A を押して、 ファイルタイプと関連付け と入力します。

  2. 開いた 新しいファイルタイプの関連付けを登録 ウィンドウで、 Liquid テンプレート を選択します。

エディターで開いていたファイルは、Liquid ファイルとして処理されます。

すべての HTML ファイルを Liquid に関連付けます

  1. Ctrl+Alt+S を押して設定を開き、 エディター | ファイルタイプ を選択します。

  2. 認識されたファイルタイプ リストから Liquid テンプレート を選択してください。

  3. ファイル名パターン セクションに、 *.html などのパターンを入力します。

    入力したパターンが既存のパターンと一致する場合（たとえば、 *.html が HTML（エイチティーエムエル） ファイルタイプと一致する場合）、再割り当てを確認するように求められます。

Liquid ファイルを作成する

WebStorm で新しい Liquid ファイルを作成するには、以下の手順に従ってください：

  1. プロジェクトビュー Alt+1 を開き、目的のディレクトリを選択します。

  2. ファイル | 新規 | Liquid ファイル に進みます。 別の方法として、 Alt+Insert を押して、 新規 リストから Liquid ファイル を選択します。

  3. ファイル名を指定して、 Enter を押します。

ライブテンプレート

ライブテンプレートを使用して、 if ブロック、 assign タグなどの Liquid コード構成をコードに挿入できます。

ライブテンプレートを展開する

ライブテンプレートを展開するには、対応するテンプレートの省略形を入力して Tab を押します。 事前定義された if テンプレートを使用して if ブロックを挿入する方法を見てみましょう。

Insert if block using a template

  1. Liquid ファイルで if と入力し、 Tab を押します。

  2. 必要な条件を指定し、 Tab を押して次のステートメントに移動します。

  3. 指定した条件に必要なコードを入力します。

ライブテンプレートの構成

Liquid 固有のライブテンプレートを設定するには：

  1. 設定 Ctrl+Alt+S を開きます。

  2. エディター | ライブテンプレート ページに移動し、 Liquid​ グループで目的のテンプレートを選択します。 ライブテンプレート からライブテンプレートの構成方法を学べます。

コードスタイルの設定を構成する

Liquid の コードスタイル設定をカスタマイズするには:

  • Ctrl+Alt+S を押して設定を開き、 エディター | コードスタイル | Liquid を選択します。

構文ハイライトを構成する

好みや習慣に応じて、Liquid 対応の構文ハイライトを設定できます。

  1. 設定 ダイアログ（Ctrl+Alt+S ）で エディター | カラースキーム | Liquid に移動します。

  2. カラースキームを選択し、デフォルトから継承されたハイライト設定をそのまま使用するか、 カラースキーム：エディターのフォントと色彩 の説明に従ってカスタマイズしてください。

2026 年 6 月 8 日
言語サービスMarkdown