Emmet

Emmet(英語) ツールキットは、HTML、CSS、JSX によるコーディングを強化します。 WebStorm から離れることなく Emmet コードテンプレートを使用できます。テンプレートを正しいマークアップに展開するには、その略語(英語)を入力して Tab を押します。 Tab を別のキーに置き換えるには、「略語拡張キーを構成する」を参照してください。

例: HTML ファイルで table>tr*3>td*2 と入力し、 Tab を押して 3 × 2 テーブルのスタブを取得します。

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
    
 

より複雑な例として、 table#myid>tr.row$*3>td*2 と入力して Tab を押して同じテーブルを取得しますが、 id 属性と各テーブル行のカスタムクラスを使用します。

        
<table id="myid">
    <tr class="row1">
        <td></td>
        <td></td>
    </tr>
    <tr class="row2">
        <td></td>
        <td></td>
    </tr>
    <tr class="row3">
        <td></td>
        <td></td>
    </tr>
</table>
    
 

詳細は、 Emmet チートシート(英語)を参照してください。

WebStorm は、RGBA カラーの新しい記述構文、暗黙的・デフォルト・ブール属性、タグの更新アクションなどの機能をサポートしています。

Emmet を有効にして構成する

WebStorm では、ネイティブの Emmet テンプレートに加え、エディター | ライブテンプレート設定ページ  Ctrl+Alt+S の Zen CSS、 Zen HTML、 Zen XSL ノードにリストされている 200 以上の追加 HTML、CSS、XSL ライブテンプレートが利用できます。

Ctrl+Alt+S を押して設定を開き、エディター | Emmet を選択します。
開いた Emmet ページで、Emmet の省略形を展開するキーを選択します。デフォルトでは、 Tab が選択されています。
特定の言語（HTML、CSS、JSX）で Emmet を有効または無効にするには、エディター | Emmet | <Language> に移動し、 <言語> Emmet を有効にするチェックボックスを切り替えます。 Emmet ページのコントロールを利用して、さまざまな言語コンテキストで Emmet を構成できます。

WebStorm では Emmet ライブテンプレートを利用・カスタマイズしたり、独自のテンプレートを追加したりできます。次のテンプレートテキストを含むテンプレートエントリとします。

エントリのリストを生成するには、 “entry-list<entry[number=$]*5″ を入力して Tab を押すだけです。デフォルトでは、 number 属性は type の前に生成されます。生成される位置をカスタマイズするには、 ATTRS 変数をテンプレートに追加してください。例えば：

ATTRS 変数は、デフォルト値として空の文字列を持つ必要があり、スキップする必要があります。

Emmet でライブテンプレートを使用する

Ctrl+Alt+S を押して設定を開き、エディター | ライブテンプレートを選択します。
開いたライブテンプレートページで、 Zen HTML、 Zen CSS 、または Zen XSL テンプレートグループを展開し、使用するテンプレートの横にあるチェックボックスをオンにします。
リスト内のテンプレートを選択すると、フォーカスはテンプレートテキスト領域に移動し、そこには選択したテンプレートの設定が表示されます。
テンプレートテキストフィールドで、必要なテキストと変数をテンプレート本体に追加します。
変数の編集ボタンをクリックします。開いているテンプレート変数の編集ダイアログで、デフォルト値フィールドにデフォルトの変数値を指定し、必要に応じて定義済みはスキップチェックボックスを選択します。

略語拡張キーを構成する

デフォルトでは、Emmet のネイティブ略語および追加のライブテンプレートは Tab を押すことで展開されます。追加のライブテンプレートについては、WebStorm でデフォルトの展開キーを再定義できます。このカスタム設定はネイティブ Emmet サポートのデフォルト設定をオーバーライドしません。どちらのキーでもテンプレートを展開できるようになります。

ネイティブ Emmet の略語の拡張キーを構成する

Ctrl+Alt+S を押して設定を開き、エディター | Emmet を選択します。
開いた Emmet ページで、略語を展開するキーリストからデフォルトの Tab の代わりに新しい拡張キーを選択します。

Emmet ライブテンプレートの拡張キーを構成する

Ctrl+Alt+S を押して設定を開き、エディター | ライブテンプレートを選択します。
開いたライブテンプレートページで、 Zen HTML、 Zen CSS 、または Zen XSL テンプレートグループを展開し、目的のテンプレートを選択します。フォーカスはテンプレートテキスト領域に移動します。
展開方法リストからテンプレートを展開するキーを選択します。

コードのブロックを Emmet テンプレートで囲む

エディターで、囲むコードブロックを選択して Ctrl+Alt+J を押すか、メインメニューからコード | 囲む | ライブテンプレートを選択します。
テンプレートの選択リストから Emmet を選択します。
使用する Emmet の略語を入力し、 Enter を押します。
右側のリストに注意してください。下矢印をクリックして、最近適用された Emmet ライブテンプレートの履歴を表示します。
また、色の表示に気をつけてください。有効な Emmet 省略形を入力すると、背景は緑色になります。ただし、存在しない省略形を入力すると背景が赤くなります。

編集ポイント間を移動する

HTML と XML では、編集ポイント間、つまり Emmet テンプレートを適用できるコードのポイント間を移動できます。

キャレットを前の編集点に移動するには、移動 | 前の Emmet 編集ポイントを選択するか、 Alt+Shift+[ を押します。
キャレットを次の編集点に移動するには、移動 | 次の Emmet 編集ポイントを選択するか、 Alt+Shift+] を押します。

2026 年 6 月 8 日