IntelliJ IDEA 2020.3 ヘルプ

Emmet

Emmet(英語) ツールキットは、HTML、CSS、JSX によるコーディングを強化します。IntelliJ IDEA を移動せずに Emmet コードテンプレートを使用できます。テンプレートを正しいマークアップに展開するには、その略語(英語)を入力して Tab を押します。ショートカットの変更については、略語拡張キーを構成するを参照してください。

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

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

IntelliJ IDEA は、RGBA カラー、暗黙、デフォルト、ブール属性を書き込むための新しい構文、タグの更新アクションなどの機能をサポートしています。

Emmet を有効にして構成する

IntelliJ IDEA を使用すると、ネイティブ Emmet テンプレートに加えて、設定 / 環境設定 Ctrl+Alt+S のエディター | ライブテンプレートページの Zen CSS、Zen HTML、Zen XSL ノードにリストされている 200 を超える追加の HTML、CSS、XSL ライブテンプレートを使用できます。

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、エディター | Emmet に移動します。

  2. 開いた Emmet ページで、Emmet の省略形を展開するキーを選択します。デフォルトでは、Tab が選択されています。

  3. 特定の言語（HTML、CSS、または JSX）で Emmet を有効または無効にするには、エディター | Emmet | <言語> に移動し、<言語> Emmet を有効にするチェックボックスを切り替えます。Emmet ページのコントロールを使用して、さまざまな言語コンテキストで Emmet を構成します。

IntelliJ IDEA を使用すると、Emmet ライブテンプレートを使用およびカスタマイズしたり、カスタムテンプレートを追加したりできます。次のテンプレートテキストを含むテンプレートエントリがあるとします。

<entry type="$TYPES$">$END$ <entry>

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

<entry type="$TYPES$" $ATTRS$>$END$ <entry>

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

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、エディター | ライブテンプレートに移動します。

  2. Emmet ページで、使用したいテンプレートの横にあるチェックボックスを選択します。

  3. リスト内のテンプレートを選択すると、フォーカスはテンプレートテキスト領域に移動し、そこには選択したテンプレートの設定が表示されます。

  4. テンプレートテキストフィールドで、必要なテキストと変数をテンプレート本体に追加します。

  5. 変数の編集ボタンをクリックします。開いているテンプレート変数の編集ダイアログで、デフォルト値フィールドにデフォルトの変数値を指定し、必要に応じて定義済みはスキップチェックボックスを選択します。

略語拡張キーを構成する

デフォルトでは、Tab を押すと、Emmet ネイティブの略語と追加のライブテンプレートが展開されます。追加のライブテンプレートについては、IntelliJ IDEA を使用してデフォルトの拡張キーを再定義できます。このカスタム設定は、ネイティブ Emmet サポートのデフォルト設定を上書きしないことに注意してください。どちらかのキーを使ってテンプレートを拡張することができます。

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、エディター | Emmet に移動します。

  2. 開いた Emmet ページで、略語を展開するキーリストからデフォルトの Tab の代わりに新しい拡張キーを選択します。

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、エディター | ライブテンプレートに移動します。

  2. ライブテンプレートページが開いたら、Zen HTML、Zen CSS、または Zen XSL テンプレートグループを展開し、目的のテンプレートを選択します。フォーカスはテンプレートテキストエリアに移動します。

  3. 展開リストからテンプレートを展開するキーを選択します。

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

  1. エディターで、囲むコードのブロックを選択して Ctrl+Alt+J を押すか、メインメニューからコード | 囲む | ライブテンプレートを選択します。

  2. テンプレートの選択リストから Emmet を選択します。

    Select Template context menu

  3. 使用する Emmet の略語を入力し、Enter を押します。

    右側のリストに注意してください。下矢印をクリックして、最近適用された Emmet ライブテンプレートの履歴を表示します。

    History of recently applied Emmet live templates

    また、色の表示に気をつけてください。有効な Emmet 省略形を入力すると、背景は緑色になります。ただし、存在しない省略形を入力すると背景が赤くなります。

    The abbreviation you entered does not exist, the background turns red

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

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

  • カーソルを前の編集ポイントに移動するには、移動 | 前の Emmet 編集ポイントを選択するか、Alt+Shift+[ を押します。

  • カーソルを次の編集ポイントに移動するには、移動 | 次の Emmet 編集ポイントを選択するか、Alt+Shift+] を押します。

ライブテンプレートを共有する ファイル、フォルダー、テキストソースを比較する

関連ページ：

Emmet

このページで、HTML、XML、JavaScript（JSX Harmony）ファイルおよびスタイルシートの Emmet 設定を構成します。IntelliJ IDEA は、出力が 15 KB を超えない場合にのみ略語を展開します。略語を展開するキーこのリストから、Emmet セレクターを展開するデフォルトのキーを選択します。このキーはデフォルトで Emmet ライブテンプレートも展開します。Emmet.HTML：XML/HTML Emmet を有効にする XML と HTML の Emmet サポー...

ライブテンプレートを共有する

IntelliJ IDEA はカスタムライブテンプレートグループの定義と事前定義済みテンプレートグループに追加されたテンプレートを自動的に生成された XML 設定ファイルに保存します。カスタムグループの場合、ファイルには、グループに含まれるすべてのテンプレートの定義が含まれます。変更済みの定義済みグループの場合、ファイルには追加（または変更）されたライブテンプレートの定義のみが含まれます。ライブテンプレートグループ設定ファイルは、IDE 構成ディレクトリの templates ディレクトリに格納され...

ファイル、フォルダー、テキストソースを比較する

IntelliJ IDEA を使用すると、ファイル、フォルダー、テキストソース、またはデータベースオブジェクト間の違い、およびローカルファイルとそれらのリポジトリバージョン間の違いを確認できます。ファイルの比較：IntelliJ IDEA はファイルの差分ビューアーに差分を表示します: 変更を適用するには、シェブロンボタンおよびを使用します。変更を追加するには、を押します。ボタンはに変わります。