PhpStorm 2020.2ヘルプ

Emmet

WindowsおよびLinux用のファイル | 設定 | エディター | Emmet

macOS Ctrl+Alt+S the Settings/Preferences iconPhpStorm | 環境設定 | エディター | Emmet

このページで、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 png
  • このチェックボックスが選択されているときに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 png
テンプレートの最後に編集ポイントを追加する

このチェックボックスが選択されている場合、編集位置は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

不明なプロパティの展開を使用可能にする ('不明'から '不明:')
  • このチェックボックスをオンにすると、入力された単語は同じ単語に展開され、コロンとセミコロンが続きます。undefined

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

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

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

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

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

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

Emmet.JSX

項目説明
JSX Emmet を使用可能にする環境設定ダイアログのJavaScriptページでJSX言語レベルを選択した場合、JSXハーモニー(英語)コンテキストのXMLフラグメント内でEmmetを使用するには、このチェックボックスを選択します。
最終更新日: 2020年7月08日