【超絶便利】Sublime Text3で「Emmet」の「wrap with abbreviation」を使いこなす（2020年版）

htmlやcss等のコーディングを爆速にしてくれるプラグイン「Emmet」。

Emmet自体はエディタに依存していないサービスで、AtomやVS Codeなど、有名なエディタであれば基本的に使えます。

今回は、Emmetの中にある「wrap with abbreviation」というマニアックなコマンドについて紹介します。

まず・・・Sublime Text3で「wrap with abbreviation」が使えない問題

今まで何の問題も無く「“選択範囲を任意のタグで囲む”が使えてたのに急に使えなくなった」という方、以下の手順を試してみてください。

ツールバーから、

と進み、開かれたファイルに以下のコマンドを追加する。

{ "keys": ["ctrl+shift+d"], "command": "emmet_wrap_with_abbreviation" },

※「ctrl+shift+d」の部分は任意です。

既にEmmetがインストールされているのであれば、これで今まで通り使えるはずです。

ちなみに、なんで急にEmmetの「wrap with abbreviation」が使えなくなったのかは分かりません。
単なる不具合かな？

ただ、筆者はこの機能を酷使していたし、しかもそもそもこの機能が「wrap with abbreviation」ってコマンド名である事も知らなかったので、解決するのに相当苦労しました。

参考にしたサイト：sublimetext3 – How to bind emmet “wrap with abbreviation” in Sublime 3? – Stack Overflow

似たような質問をするユーザーも多かったけれど、解決策が“「shift + alt + w」で似たような事ができるよ”というものばかり出てくる。

でも「shift + alt + w」で起動する「Wrap with tag」というコマンドは、Emmetのこれと比べてめちゃくちゃ不便。
だから本質的な解決になりません。

というわけで、「Sublime Text3でのEmmetが急に不便になって困ってる！」という過去の僕への回答でした。

次項より、「Emmetの便利な使い方」について紹介します。

Emmetってすげー便利だよ

こちらの動画をご覧ください。

上記動画は、正に「wrap with abbreviation」を使って、選択した文字列をタグで囲んでいます。

動画内で入力した文字列は以下の通り。

内容を理解するまでは大変かもしれませんが、慣れたら爆速でコーディングできます。

使い方は非常に簡単。
デザインデータや原稿にある

という文字列をそのままエディタにコピペして、エディタに登録したショートカットキーで「wrap with abbreviation」を呼び出し、例の展開文を入力してしまえば完了。
１行１行作業していく手間が省けます。

Emmetには他にもいくつかの機能がありますが、とりあえず「wrap with abbreviation」だけでも覚えてみてください。

コーダーの義務です。

おしまい。

こちらの記事もオススメ！

おすすめ記事 ブロガーにおすすめのテキストエディタは「サブライムテキスト（Sublime text）」だ！

この記事を読む