Emmet ¶

VS Code は入力支援機能の一つとして Emmet に対応している。Emmet 機能が既定で有効化されている言語モードは html, xml, xsl, css, scss, sass などか、または php など上記のいずれかを継承しているものだ。

Attention

Visual Studio Code 利用ノート冒頭の前提条件に留意すること。

概念 ¶

ウェブ開発者でないと Emmet には馴染みがないと思う。次の文書をなるべく熟読する：

オプション設定 ¶

VS Code の設定ファイル settings.json で制御できる Emmet オプションを記す。項目を重要度順に配列したいところだが、執筆時点で重要度を判定しかねるのでアルファベット順にしておく。

`emmet.excludeLanguages`¶

Emmet 展開をなるべくさせない言語モード ID 文字列からなる配列を指定する。既定値に Markdown が含まれていることに注意。

"emmet.excludeLanguages": ["markdown"]

`emmet.extensionsPath`¶

Emmet カスタマイズ設定ファイルである syntaxProfiles.json や snippets.json を納めるディレクトリーパスからなる配列を指定する。項目定義の衝突が発生した場合、後ろにあるものほど優先される。

`emmet.includeLanguages`¶

既定で対応されていない言語モードで Emmet を有効にする場合、この設定項目を使って指定する。オブジェクトのキーが現在未対応の言語モード、値が適用したい Emmet 展開の類型名。

利用者ノート

おそらく変更しないか、Markdown の指定をするかになると思われる。

`emmet.optimizeStylesheetParsing`¶

値を false に設定すると、現在のキャレット位置が Emmet 略語の展開に有効かどうかをファイル全体を解析することで決定する。

値を true に設定すると（これが既定値）、スタイルシート系言語モードにおいて、エディター内の現在のキャレット近傍の内容しか解析しない。

`emmet.preferences`¶

Emmet 設定ファイル preferences.json に記載するような内容をこのオブジェクトに記す。ただし、どの設定項目も VS Code が対応しているわけではない。

`emmet.showAbbreviationSuggestions`¶

Emmet 略語の候補一覧をポップアップ表示するかどうか。既定値は true. 次の場合は値が true であっても適用されない：

言語モードがスタイルシートである
項目 emmet.showExpandedAbbreviation の値が never に設定されている

利用者ノート

Emmet を習得しようという入門者でない限りは false としておくようなオプションだろう。

`emmet.showExpandedAbbreviation`¶

Emmet 略語を IntelliSense で全く表示したくない場合は never とする。その場合は次の方法により手動で Emmet 展開することになる。

コマンド Emmet: Expand Abbreviation を直接実行する
コマンド editor.emmet.action.expandAbbreviation にキーバインドを割り当ててからキーボード操作によりこれを実行する

never

Emmet 略語補完候補をまったく表示させない。エディターの言語モードにも依存しない。

inMarkupAndStylesheetFilesOnly

マークアップとスタイルシートベースの言語に対してのみ Emmet 補完候補を表示させる。

always

Emmet が対応するすべての言語モードおよび設定項目 emmet.includeLanguages に指定がある言語モードで Emmet 補完候補を表示する。

このとき、新しい Emmet の実装は編集しているコードのコンテキストを考慮しない。VS Code の説明文で挙げられている例は、React ファイルを編集している場合、マークアップ編集時だけでなく、JavaScript 編集時にも Emmet 補完候補が現れることを指摘している。

`emmet.showSuggestionsAsSnippets`¶

Emmet 由来の補完候補をポップアップのコード片候補に混ぜて表示させるための項目だ。値を true に設定すると、Emmet 由来の補完候補群がその他のものとまとめられ、 editor.snippetSuggestions 設定に従ってソート可能となる。例えば editor.snippetSuggestions を top のときは Emmet 補完候補はその他の候補に優先して表示される。

利用者ノート

Snippets を Emmet 由来のものとそうでないものに分類することを意識する。

`emmet.syntaxProfiles`¶

Emmet 設定ファイル syntaxProfiles.json で定義することをこのプロパティーの値とする。 syntaxProfiles.json を参照。

`emmet.triggerExpansionOnTab`¶

これは Emmet が無効である言語モードでも Tab を押せば Emmet 展開させるかどうかを指定するフラグだ。適当な英単語を押して Tab を押すと勝手に HTML タグに展開されるのが気にならなければ true にする。

`emmet.useInlineCompletions`¶

値が true の場合、Emmet はインライン補完を使用して、展開候補を出す。このとき、ノンインライン補完項目ポップアップが頻繁に表示されないようにするには、設定項目 editor.quickSuggestions の other を inline または off に変更する。

`emmet.variables`¶

Emmet が利用する変数の値を指定する設定項目だ。VS Code ではなく、Emmet のほうの snippets.json 内の variables オブジェクトのプロパティーの形式で定義されるものだろう。

フィルター ¶

Emmet のパイプ記号を伴う指示を後置する文字列をタイプするのが基本的な入力技法だ。

コメントフィルター |c は重要タグの末尾にコメントを挿入しながら展開するアクションだ。VS Code では設定項目 emmet.preferences で次の値を指定可能だ：

filter.commentTrigger
filter.commentBefore
filter.commentAfter

トリムフィルター |t はコマンド Emmet: Wrap with Abbreviations に略語を与える場合にしか適用されない。タグのペアで包まれたコード片から「マーカー」を削除する。

BEM フィルターもカスタマイズ可能だ。emmet.preferences で次の項目をいじれる：

bem.elementSeparator
bem.modifierSeparator

Emmet 用 `snippets.json`¶

前述のように、カスタム Emmet コード片は snippets.json で定義する。ただし、そのファイルは emmet.extensionsPath で設定したディレクトリーに置く必要がある。

HTML Emmet コード片は、haml や pug など、他のすべての HTML 風マークアップに適用可能。値が実際の HTML ではなく省略形である場合、言語モードに応じて適切に変換される。

例えばコード片が ul>li であれば html, haml, pug, slim で同じ略語を使用できるが、<ul><li></li></ul> であれば html モードでしか機能しない。
プレーンテキスト用のコード片が欲しい場合はテキストを {} で囲む。
CSS Emmet コード片は、プロパティー名と値のペアを完全指定する必要がある。
- これらは scss, less, sass などのスタイルシート風モードで適用可能。そのため、コード片定義の末尾をセミコロン ; にしてはいけない（必要に応じて Emmet がふさわしい記号を補完する）。
コード片名称にコロン : を含めてはいけない。
通常のコード片定義と同様に $1, $2, … をコード片に含めることができる。 ${1:PLACEHOLDER} のようなプレースホルダーも利用可能だ。