Visual Studio CodeでのEmmet 2.0
2017年8月7日 Ramya Rao, @ramyanexus
Visual Studio Codeの2017年7月リリース (バージョン1.15) では、過去2リリースでプレビュー版として提供されてきた、より良いEmmetエクスペリエンスを出荷します。
その機能には以下が含まれます。
- 入力候補/オートコンプリートリストでのEmmet省略形の展開。
- ほとんどのEmmetアクションに対するマルチカーソルサポート。
- カスタムEmmetスニペットに対する更新されたサポート。
このアップデートの一環として、@emmetioの新しいnpmモジュールを使用して、すべてのEmmetアクションを書き直しました。
重要な変更点として、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省略形の展開を提供すること。
- ほとんどのEmmetアクションに対するマルチカーソルサポートを提供すること。
- 解析されたファイルが必要なEmmetアクションに対して、VS Code固有のAPIを使用してより効率的なドキュメント解析を提供すること。
- Emmet統合をVS Codeのコアから拡張機能として切り出すこと。
TabキーがEmmetのデフォルト展開キーではなくなりました
TabキーをEmmet展開のキーボードショートカットとして使用することには、2つの問題がありました。
- ユーザーがTabキーを使用してソースコードをインデントしたいときに、Emmet展開が行われてしまう。
- ユーザーがEmmet省略形を展開したいときに、入力候補リストの項目が挿入されてしまう。
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を有効にするには、
emmet.syntaxProfiles
設定の代わりにemmet.includeLanguages
設定を使用します(Emmet省略形を他のファイルタイプで有効にする)。 - Emmetでのカスタムスニペットの書き方に関する変更
- 利用可能なEmmet設定に関する変更
- 単一の選択範囲内の個々の行を別々のタグでラップするには、Emmet: Wrap with Abbreviationの代わりにEmmet: Wrap Individual Lines with Abbreviationコマンドを使用します。
- 2017年8月に対応中のEmmet 2.0の既知の問題
Emmet 2.0の実現に貢献した人々
Sergey Chikuyonok氏がEmmetをモジュール化し、VS Codeにこれらの改善をもたらす手助けをしてくれた素晴らしい仕事に感謝いたします。
また、プレビュー中にVS Codeで新しいEmmetを使用し、GitHub Issuesを通じて素晴らしいフィードバックを提供してくださったすべての方々に感謝いたします。GitHub Issuesでの議論は、現在のユーザーエクスペリエンスにたどり着く上で非常に役立ちました。
Steve Lombardi、Jens Hausdorf、Vladimir Sizikov、Niichie、Thomas Klepzig、そして私のバグ修正や機能追加をテストするためにVS Code Insidersビルドを使用してくださった多くの皆さんに、特に感謝いたします。
新しいEmmetに関するご意見をお聞かせください
以前のEmmetの機能が恋しいですか?新しいEmmetの使用に問題がありますか?お気軽にGitHubのIssueを作成してください。私たちは最大限のサポートをいたします。
EmmetはVS Codeの拡張機能になったため、これまで以上に貢献しやすくなりました。VS CodeのGitHubリポジトリにあるemmetフォルダには、開始に必要なすべてのソースコードが含まれています。
ハッピーコーディング!
Ramya Rao, VS Codeチームメンバー @ramyanexus