PhpStorm 2019.3ヘルプ

Emmet

WindowsとLinux用のファイル | 設定 | エディター | Emmet
macOS用 PhpStorm | 環境設定 | エディター | Emmet
Ctrl+Alt+S the Settings/Preferences icon


このページでは、HTML、XML、JavaScript(JSX Harmony)ファイルおよびスタイルシートのEmmet設定を構成します。

項目

説明

略語を次で展開

このリストから、Emmetセレクターを展開するデフォルトのキーを選択します。このキーはデフォルトでEmmetライブテンプレート(英語)も展開します。

Emmet.HTML

項目

説明

XML/HTML Emmet を使用可能にする

XMLとHTMLのEmmetサポートを有効にするには、このチェックボックスをオンにします。このチェックボックスが選択されていない場合、div.class>ul#list>.item$) などの複雑な略語はエディターでは機能しません。

略語プレビューを使用可能にする

このチェックボックスを選択すると、PhpStormは実際に展開する前に、入力された略語のプレビューを表示するポップアップを表示します。

Abbreviation preview

<a> タグでテキスト折り返し中の自動 URL 認識を使用可能にする

  • このチェックボックスを<a>オフに</a>して、URLアドレスを<a>タグで</a>ラップしようとすると<a>、PhpStormはURLアドレスを <a href=""></a> で囲み、href 属性の二重引用符の内側にカーソルを置きます。例: http://www.jetbrains.com をラップすると、<a href="|">http://www.jetbrains.com</a>となります。</a>

    emmet recognize url off

  • このチェックボックスが選択されているときにURLアドレスを<a>タグで</a>ラップしようとすると<a>、PhpStormはURLアドレスを href 属性の値として二重引用符で囲み、<a href="<wrapped URL>"></a>で囲みます。例: http://www.jetbrains.com をラップすると <a href="http://www.jetbrains.com">http://www.jetbrains.com</a>になります。さらに、PhpStormはラップされたURLを認識されたURLとして緑色で強調表示します。</a>

    emmet recognize url

テンプレートの最後に編集ポイントを追加する

このチェックボックスを選択すると、編集位置がHTMLテンプレートの末尾に追加されます($END$)。
このチェックボックスが選択されていない場合、新しい編集ポイントは追加されません。

以下を比較してください:

Edit point at the end of template

BEM

この領域では、クラス名、修飾子、および短い要素のBEMセパレータを指定します。詳細は、Emmetのドキュメント(英語)を参照してください。

デフォルトで有効になっているフィルター

このエリアでは、エディターに表示される前に拡張された省略形に適用するEmmetフィルターを指定します。http://docs.emmet.io/filters/(英語)のフィルターについての詳細を参照してください。デフォルトでフィルタが常に適用されるようにするには、その横にあるチェックボックスをオンにします。使用可能なオプションは次のとおりです。

Emmet.CSS

項目

説明

CSS Emmet を使用可能にする

このチェックボックスを選択して、スタイルシートに対するEmmetサポートを有効にします。このチェックボックスが選択されていない場合、bdci:nborder-corner-image: none;に展開するような複雑な略語はエディターでは機能しません。

CSS 省略記法でファジー検索を使用可能にする

このチェックボックスをオンにすると、未知のすべての省略形が使用可能なテンプレート名に対して採点されます。最高のスコアとの一致がテンプレートの解決に使用されます。例:このオプションを有効にすると、次の略語は次のようになります。
  • ov:h
  • ov-h
  • o-h
  • oh

不明なプロパティの展開を使用可能にする ('不明'から '不明:')

  • このチェックボックスをオンにすると、入力された単語は同じ単語に展開され、コロンとセミコロンが続きます。

  • このチェックボックスをオフにすると、既知のプロパティ( colorなど)のみがこのように拡張されます。color:;

css ベンダー・プレフィックスを自動挿入する

このチェックボックスをオンにすると、下表に示すCSSプロパティが、ベンダープレフィックスを含む構成体に展開されます。ベンダープレフィックス(英語)でさらに学びましょう。

このチェックボックスをオフにすると、プロパティのテーブル全体が無効になります。

プロパティとベンダープレフィックス

この表には、さまざまなブラウザに対応するCSSプロパティとベンダープレフィックスのリストが含まれています。
  • ブラウザでプロパティを有効または無効にするには、ブラウザの列のチェックボックスをオンまたはオフにします。

  • 新しいプロパティをリストに追加するには、追加ボタン icons general add をクリックするか、Alt+Insertを押します。次に、開いたダイアログボックスにプロパティの名前を入力し、関連するブラウザで有効にします。

  • リストから1つ以上のプロパティを削除するには、選択して除去 icons general remove を押すか、Alt+Deleteを押します。

Emmet.JSX

項目

説明

JSX Emmet を使用可能にする

設定ダイアログのJavaScriptページでJSX言語レベルを選択した場合、JSXハーモニー(英語)コンテキストのXMLフラグメント内でEmmetを使用するには、このチェックボックスを選択します。

最終更新日: 2020年1月15日