WebStorm 2026.1 Help

ライブテンプレート

ライブテンプレートを使用して、ループ、条件、宣言、print ステートメントなどの一般的な構造をコードに挿入します。

コードスニペットを展開するには、対応するテンプレートの省略形を入力して Tab を押します。 Tab を押し続けると、テンプレート内の 変数 から次の変数にジャンプします。 Shift+Tab を押して、前の変数に移動します。

Live template for a React component

ライブテンプレートの種類

次のタイプのライブテンプレートが区別されます:

  • シンプルなテンプレートは固定のプレーンテキストのみを含みます。 単純なテンプレートを展開すると、そのテキストがソースコードに自動的に挿入され、省略形が置き換えられます。 例: flow@flow アノテーションを挿入し、 vbase は Vue シングルファイルコンポーネント用のスタブに展開されます。

    expand simple template
  • パラメーター化されたテンプレートには、ユーザー入力を可能にする 変数が含まれています。 パラメーター化されたテンプレートを展開すると、変数はユーザーが手動で指定する入力フィールドに置き換えられるか、WebStorm によって自動的に計算されます。 例: importitemsimport ステートメントに展開され、最初にパスを指定してから、インポートされたメンバーをパラメーターとして指定できます。

    Expanding an importitems template and specifying the path and the member
  • 囲みテンプレートは、選択したコードのブロックをユーザーが指定したテキストで囲みます。 例: T は、名前を指定できるタグのペアに展開されます。 また、コードブロックを選択し、 Ctrl+Alt+J を押して テンプレートの選択 ポップアップを開き、 T テンプレートを選択して、選択肢をタグのペアでラップすることもできます。

JavaScript 後置テンプレート はライブテンプレートですが、既存のコードの構造を作成します。 例: 式の後に .if を入力して、対応するポストフィックスの補完を呼び出し、式を if ステートメントでラップすることができます。

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

ライブテンプレートを設定するには、 エディター | ライブテンプレート 設定ページ(Ctrl+Alt+S )を開きます。 ライブテンプレート ページでは、利用可能なすべてのライブテンプレートを確認したり、チェックボックスを使用して有効化または無効化したり、既存のテンプレートを編集したり、 新しいテンプレートを作成したりできます。

ライブテンプレートの設定

テンプレートの検索と編集を簡単にするために、テンプレートはグループに分割されています。 テンプレートを別のグループに移動するには、テンプレートを右クリックして 移動し を選択し、必要なグループ名を選択します。

各ライブテンプレートは、英数字、ドット、ハイフンを含む省略形で定義されます。 略語はグループ内で一意である必要がありますが、同じ略語が異なるグループで使用され、対応するライブテンプレートのコンテキストに従って異なる構成に拡張される場合があります。 変更されたデフォルトのテンプレートの略語は、リストに青色のフォントで表示されます。

変更したテンプレートをデフォルト設定に復元する

  • ライブテンプレート ページの 設定 ダイアログで、復元したいテンプレートを右クリックし、 デフォルトの復元 をクリックします。

2026 年 6 月 8 日