Sublime Text 用の公式 Emmet プラグイン。
警告:このプラグインは JavaScript で記述され、実行に PyV8 および Google V8 バイナリを使用するため、一部の OS ではまったく機能しない可能性があります。問題やエディタのクラッシュが発生した場合は、問題を記入してください。
パッケージコントロールを使用すると:
Emmetプラグインを見つけてインストールします。手動で:
警告: プラグインがインストールされると、必要な PyV8 バイナリが自動的にダウンロードされるため、少し待つ必要があります (ステータス バーのPyV8 バイナリのロードメッセージを参照)。自動 PyV8 ローダーで問題が発生した場合は、手動でインストールしてみてください。
数値の増加/減少アクション:
新しいアクションやフィルターを使用して Emmet を簡単に拡張したり、既存のものをカスタマイズしたりできます。 Emmet.sublime-settingsでextensions_path設定を定義すると、Emmet は起動時に指定されたフォルダー内のすべての.jsおよび.jsonファイルを読み込みます。
extensions_pathのデフォルト値は~/emmetで、OS ユーザーのホーム フォルダー内のemmetフォルダーを指します。
また、ユーザーのEmmet.sublime-settingsファイル内に拡張ファイルとして名前が付けられたセクション (例: snippets 、 preferences 、およびsyntaxProfiles ) を作成し、そこにカスタマイズを書き込むこともできます。例については、元の設定ファイルを参照してください。
Sublime Text は、多くの機能とアクションを備えた優れたテキスト エディターです。これらのアクションのほとんどはキーボード ショートカットにバインドされているため、サードパーティのプラグインに便利なプラグイン ショートカットを提供することはほぼ不可能です。
デフォルトのキーマップに満足できない場合は、 Emmet.sublime-settingsファイルのdisabled_keymap_actions設定を使用して、個々のキーボード ショートカットを無効にすることができます。
デフォルトのキーボード ショートカットを無効にするアクション名のカンマ区切りのリストを使用します。たとえば、 Ctrl+E (「省略形の展開」) およびCtrl+U (「画像サイズの更新」) のショートカットを解放したい場合は、次の値を設定する必要があります。
"disabled_keymap_actions": "expand_abbreviation, update_image_size"
アクション ID を取得するには、 Default (Your-OS-Name).sublime-keymapファイルを参照する必要があります ( args/actionキーを探します)。
すべてのデフォルトのショートカットを無効にするには、値をallに設定します。
"disabled_keymap_actions": "all"
このようにアクションを無効にし、独自のキーボード ショートカットを作成する場合は、 emmet_action_enabled.ACTION_NAMEコンテキストを使用しないでください。これはアクションを無効にするキーであるためです。
Emmet は、HTML、CSS、LESS、SCSS、Stylus、PostCSS などの限られた構文でのみ略語を展開します。 Tab ハンドラーを限定された構文リストに制限する理由は、ネイティブの Sublime Text スニペットが壊れてしまうためです。
他の構文 (JSX、HAML など) で Tab を使用して省略したい場合は、キーボードのショートカット設定を調整する必要があります。必要な構文スコープ セレクターのtabキーにexpand_abbreviation_by_tabコマンドを追加します。現在の構文スコープ セレクターを取得するには、 ⇧⌃P (OSX) またはCtrl+Alt+Shift+Pを押すと、エディターのステータス バーに表示されます。
Preferences > Key Bindings — Userに移動し、 SCOPE_SELECTORトークンの代わりに適切に構成されたスコープ セレクターを含む次の JSON スニペットを挿入します。
{
"keys" : [ "tab" ] ,
"command" : "expand_abbreviation_by_tab" ,
// put comma-separated syntax selectors for which
// you want to expandEmmet abbreviations into "operand" key
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context" : [
{
"operand" : "SCOPE_SELECTOR" ,
"operator" : "equal" ,
"match_all" : true ,
"key" : "selector"
} ,
// run only if there's no selected text
{
"match_all" : true ,
"key" : "selection_empty"
} ,
// don't work if there are active tabstops
{
"operator" : "equal" ,
"operand" : false ,
"match_all" : true ,
"key" : "has_next_field"
} ,
// don't work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible --
// remove this section
{
"operand" : false ,
"operator" : "equal" ,
"match_all" : true ,
"key" : "auto_complete_visible"
} ,
{
"match_all" : true ,
"key" : "is_abbreviation"
}
]
}Emmet プラグインを使用すると、通常のスニペットと同様に、 Tabキーを使用して略語を展開できます。一方、動的な性質と広範な構文により、予期しない結果が得られる場合があります。このセクションでは、タブ ハンドラーがどのように動作するか、およびタブ ハンドラーを微調整する方法について説明します。
デフォルトでは、Tab ハンドラーは限られた構文範囲(HTML、XML、HAML、CSS、SASS/SCSS、LESS、PostCSS、およびプログラミング言語 (JavaScript、Python、Ruby など) の文字列) で動作します。それは次のことを意味します:
lineという名前の特別な出力プロファイルを使用して出力が生成されます。 Tab キー ハンドラーを微調整するには、ユーザーのEmmet.sublime-settingsファイルで次の設定を使用できます。
disable_tab_abbreviations_for_scopes — Tab キー ハンドラーを無効にする構文スコープのカンマ区切りのリスト。たとえば、プログラミング言語と HAML 構文の文字列内のハンドラーを無効にする場合、設定は次のようになります。 "disable_tab_abbreviations_for_scopes" : " text.haml, string "disabled_single_snippet_for_scopes — 単一の略語を展開するときにタブ ハンドラーを無効にする必要がある構文スコープのカンマ区切りのリスト。現在、ST はネイティブ スニペットのリストを取得するための API を提供していません。したがって、たとえば、 php略語を展開しようとすると、ネイティブ ST スニペットで定義されている PHP ブロックではなく、 disabled_single_snippet_for_scopes設定で定義されたスコープ内で単一の略語を展開しようとしている場合、Emmet は最初に独自のスニペット カタログ内でその名前を検索し、次にknown_html_tags設定内でその名前を検索します。見つからない場合は、ST がそれを処理できるようにします。一致する場合、ネイティブの略語を展開します。known_html_tags — 前述の検索に使用されるすべての既知の HTML タグのスペース区切りのリスト。 Emmet タブ ハンドラーの動作に満足できない場合は、これを無効にすることができます。ユーザーのPreferences.sublime-settingsファイルに"disable_tab_abbreviations": trueを追加するだけです。
ワークフローに CSS ベンダー プレフィックスの自動タスク (Autoprefixer など) がすでに含まれている場合は、このオプションをユーザーのEmmet.sublime-settingsファイルに追加して、Emmet の自動ベンダー プレフィックス挿入を無効にすることができます。
{
"preferences" : {
"css.autoInsertVendorPrefixes" : false
}
}
