Visual Studio Code の Emmet 2.0

2017 年 8 月 7 日 Ramya Rao, @ramyanexus

Visual Studio Code の 2017 年 7 月リリース (バージョン 1.15) では、過去 2 回のリリースでプレビュー版として提供されていた Emmet のエクスペリエンスが改善されて出荷されます。

その機能には以下が含まれます。

Emmet in suggestion/auto-completion list

この更新の一環として、すべての Emmet アクションを @emmetio の新しい npm モジュールを使用して書き直しました。

重要な変更点は、Tab キーが Emmet 省略形を展開するためのデフォルトの方法ではなくなったことです。代わりに、Emmet 省略形は提案リストに表示されるようになります。他のスマートな補完と同様に選択でき、選択すると省略形が展開されます。

注: Tab キーを使用して Emmet 省略形とスニペットを展開し続けるには、emmet.triggerExpansionOnTab を true に設定します。

Visual Studio Code での Emmet 2.0 の変更点については、引き続きお読みください。

Emmet への新しいモジュールアプローチ

以前は、Emmet ライブラリは、すべての Emmet アクションに使用される単一のモノリシックなコードベースでした。Emmet の作者である Sergey Chikuyonok は、より小さく再利用可能なモジュールを備えた Emmet 2.0 の新しい世界を構想していました。

現在、Emmet 省略形を展開するために必要なパイプラインの異なる部分について、@emmetio から独立した npm モジュールがあります。これらには、次のような手順が含まれます。

また、残りの Emmet 機能を実装するのに役立つ HTML および CSS ドキュメントを解析するための個別のモジュールもあります。これらのモジュールは、npm の emmetio で見つけることができます。

このモジュールアプローチは、エディタープラグインがエディター固有の API を使用して、エディター機能との Emmet 統合を向上させるために採用されました。たとえば、このアプローチにより、次のことが可能になりました。

Emmet 展開のキーボードショートカットとして Tab キーを使用することには、2 つの問題がありました。

Sergey Chikuyonok は、Emmet を提案リストに入れる方がより快適な体験になると気づきました。それが上記の 2 つの問題を解決するのに役立ったことは、追加のボーナスでした。

Emmet 省略形が提案リストから簡単にアクセスできるようになったため、Tab キーと Emmet: ExpandAbbreviation コマンドのデフォルトの関連付けを削除することができました。Tab キーは、本来の目的であるインデントを実行するために解放されました。

editor.quickSuggestions 設定をオフにしている場合、提案/自動補完リストを手動でトリガーするには、⌃Space (Windows, Linux Ctrl+Space) を押す必要があります。

Emmet が提案/自動補完リストに表示されないようにするには、emmet.showExpandedAbbreviation を never に設定します。

Tab キー以外の任意のキーボードショートカットを editor.emmet.action.expandAbbreviation コマンドにバインドするか、コマンドパレットから Emmet: Expand Abbreviation を使用することもできます。

省略形の展開に Tab キーを使用したい場合は、設定に emmet.triggerExpansionOnTab を追加し、true に設定してください。この設定を使用して、展開する省略形がない場合に適切なフォールバックを提供し、インデントを提供します。

新しい Emmet ページに記載されているその他の変更点がいくつかあります。

emmet.syntaxProfiles 設定の代わりに emmet.includeLanguages を使用して、他のファイルタイプで Emmet を有効にする
Emmet でカスタムスニペットを記述する方法の変更点
利用可能な Emmet 設定の変更点
単一選択の個々の行を別々のタグで囲むには、Emmet: Wrap with Abbreviation の代わりに Emmet: Wrap Individual Lines with Abbreviation コマンドを使用します。
2017 年 8 月に作業中の Emmet 2.0 の既知の問題

Emmet のモジュール化と、これらの改善を VS Code にもたらすのに貢献してくれた Sergey Chikuyonok に感謝します。

また、プレビュー中に VS Code で新しい Emmet を使用し、GitHub の問題を通じて素晴らしいフィードバックを提供してくれたすべての人々に感謝します。GitHub の問題での議論は、現在のユーザーエクスペリエンスに到達する上で非常に役立ちました。

私のバグ修正と機能追加をテストするために VS Code Insiders ビルドを使用した Steve Lombardi、Jens Hausdorf、Vladimir Sizikov、Niichie、Thomas Klepzig、その他多くの人々に特別な感謝を捧げます。

以前の Emmet の機能で不足しているものはありますか？新しい Emmet の使用に問題がありますか？お気軽に GitHub の課題を作成してください。全力でサポートさせていただきます。

Emmet は現在拡張機能であるため、VS Code の Emmet に貢献するのがこれまで以上に簡単になりました。VS Code GitHub リポジトリの emmet フォルダーには、開始するために必要なすべてのソースコードが含まれています。

ハッピーコーディング！

Ramya Rao, VS Code チームメンバー @ramyanexus