1. Emmetとは
2. Emmetの「展開キー」をCommand＋eに変更・設定する方法
3. 手順1.メニューからEmmetのキーを設定を記述するファイルを開きます
4. 手順2.Command＋eの設定を記述します。
5. 手順3.動作確認

Emmetとは

Emmetは主にHTMLやCSSのコーディングを行う時に使用するマークアップを高速に行うための補助的なツール。
（以前はZen-Codingと呼ばれていました。）
HTMLやCSSを入力する場合、何もツールを使わない場合はすべて「手打ち」でマークアップを行いますが、このプラグインを導入すると「省略記法」でコードを書いて「TABキー」を押すだけで、指定されたHTMLタグが補完（展開）される仕組みです。

例えば、

div>a{入力テスト}

とコードを書いて、キーボードのTABキーを押すと、このように展開されます。

<div><a href="">入力テスト</a></div>

あとは aタグにリンク先を指定すればok。タグをすべて打たなくてもいいので、とてもラクですね!
省略記法では、idやclass名の指定もできます。
私はSublimeText3にEmmetをインストールして使用していますが、コーディングがとても快適で手放せませんよ!

Emmetは、Adobe Dreamweaverをはじめ、Atom、SublimeText、Brackets、Codaなど様々なエディタに対応していて、プラグインをインストールすればすぐ始められます。
興味が湧いてきたかたは「Emmetの公式サイト」に実際にコードを展開する動画が掲載されていますので、是非見てみてください。

引用元：https://emmet.io/

Emmet公式サイト
Emmet ドキュメントサイト

Emmetの「展開キー」をCommand＋eに変更・設定する方法

私はMac版のSublimeText3をライセンス購入して使っているのですが、TABキーより、Command（コマンドキー）＋eで展開したほうがしっくりくるので、展開キーを変更しています。
今回はEmmetの展開キーをcommand＋eに変更・設定する方法をご紹介します。

使用環境

設定は以下の環境で検証しました。
Sublime Text2では検証していませんのでご了承ください。

• パソコン：MacOS Catalina Version 10.15.6
• テキストエディタ：Sublime Text3 Version 3.2.2,Build 3211
• プラグイン：Emmet Version2.1.13

手順1.メニューからEmmetのキーを設定を記述するファイルを開きます

Sublime Text3 画面上部にあるメニューバーから 「 Sublime Text 」→「 Preferences 」→「 Package Settings 」→「 Emmet 」→「 Key Bindings 」の順で開きます。

手順2.Command＋eの設定を記述します。

設定ファイルDefault (OSX).sublime-keymapがエディタ内に表示されます。この中に以下の設定項目を貼り付けて保存します。

[
{
"keys": ["super+e"],
"command": "emmet_expand_abbreviation"
},
]

このファィルは以下の場所にファイルが保存されます。

手順3.動作確認

設定を保存したら、新規ウィンドウを開いて実際に動作確認をしてみます。
SublimeText3に div と入力して「 Command+e 」キーで <div></div> にdivタグが展開されたら完了です。

SublimeTextのキー設定方法については、Sublime Text公式サイトのドキュメントにも掲載されていますので参考にしてみてください。
Sublime Text 公式サイト ドキュメント・キーバインディング(ドキュメントは英語です)

SublimeText関連記事

• 【2020年版】Sublime Text3 ＆ Emmetで使うhtmlタグの属性をカスタマイズ（スニペットに登録）