PhpStorm 2019.3ヘルプ

Emmetのサポート

Emmet(英語)およびEmmetバージョン1.1(英語)は、HTML、CSS、またはJSXコードの開発を高速化するツールキットです。PhpStormを移動せずにEmmetコードテンプレートを使用できます。テンプレートをマークアップに展開するには、その略語(英語)を入力して展開キーまたはショートカットを押します。デフォルトでは、略語は Tabで展開されますが、短縮形拡張キーの設定に従って別のキーを選択できます。

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

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

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

Emmetの有効化と設定

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

PhpStormでネイティブEmmetを有効にして設定する

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

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

  3. さまざまな言語のコンテキストでEmmetを有効にして設定するには、Emmetページ(エディター | Emmet)の対応する設定を使用します。

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

ネイティブEmmet略語の拡張キーを設定するには

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

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

Emmetライブテンプレートの拡張キーを設定するには

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

  2. ライブ・テンプレートページが開いたら、Zen HTMLZen 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 編集ポイントを選択するか、Shift+Alt+[を押します。

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

最終更新日: 2019年12月13日

関連ページ:

Emmet

WindowsとLinux用のmacOS用このページでは、HTML、XML、JavaScript(JSX Harmony)ファイルおよびスタイルシートのEmmet設定を構成します。PhpStormは、出力が15 KBを超えない場合にのみ略語を展開します。略語を次で展開このリストから、Emmetセレク...

ライブ・テンプレート

WindowsとLinux用のmacOS用このページを使用して、ライブテンプレートを作成、管理、および編集します。メイン設定:デフォルトで展開すべてのテンプレートのデフォルトの呼び出しキーを指定します。特定のテンプレート用の個々の拡張キーは編集領域で定義されています。標準の拡張キー( , または

JSON

JSONフォーマットは、データの保存や設定ファイルの保存に一般的に使用されます。PhpStormはJSONファイルの操作に役立ちます。JSONファイルは構文と書式をチェックします。一般的なタイプの設定ファイルでは、PhpStormはコード補完を提供します。JSON スキーマは、そのようなファイルの構...

HTML

PhpStormは、構文やエラーの強調表示、コードスタイル、構造の検証、コード補完、デバッグセッション中のオンザフライプレビュー(ライブ編集)などを含むHTMLの強力なサポートを提供します。HTML仕様は、PhpStorm設定 のページのデフォルトHTML言語レベル設定で構成可能です。デフォルトでは...