![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF75TeddDT2QFko5KwH2Sg4R5KbjgbdOooxtDk5QRzeDPnhW1ZU_c6VEVM4vRPaimdLD_jNgzeHh7_R4sAgeqZtfRk0dGX1xx1TiQmu2re-0SixQzDDqxqIC_lI0W7tdpY_pWFea2kcvgT/s640/sublime_text_emmet_snippet.png)
ども。 @snicker_jp です!
きっかけ
SublimeTextのSnippet(スニペット)について書いたところ、さらなる情報を頂いたのとハマった(^^ゞ ので、記事にします!@snicker_jp emmetプラグインも捗りますお(^^)
— okisanjp (@oki_san) November 3, 2013
Emmetとは?
Emmetは、エディタ、IDE(統合開発環境)で使えるHTML/CSSのコーディングをパワフルにサポートするプラグインです。Zen-Codingの次期バージョン、Emmet について|Web Design KOJIKA17
まー、HTMLのコーディングがチョ~便利になるプラグインです!
導入
PackageControlで「Emmet」と入れてインストールするだけです!![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-RkD0netA3aHV4hronXGLe3YtwibwRQmL5aRh_FA_RAMEsqoHaotOh-DlExsPgeU6NKoC5DMMwuzQnqR8Zn-CqBW_Z9J1vzpjw9KhCumVDcceGDEDumJ_8I707ZRlgrVJ4QBKC1L2ftSL/s640/emmet_install.png)
設定
[Sublime Text 2] → [Preferences] → [Settings User]を選択![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxJHCjjnDSlhQkDAXF2TrZLB7IuiQZe0FG5kEe715mhSv4-De-uSJsCCCvYZR4x9yrSGHy4WJqEbQabJFsXiyWr5n2rnLGBHk4qWIDoGo9POFvHL9-PUAfB2oM8vhj2OQiiOUPrF_CrAiZ/s640/st2_preferences.png)
Tabキーの競合回避などのために以下の設定を入れます!
{ // tabでの展開の上書きしない for Emmet "disable_tab_abbreviations": true, // 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet "disable_formatted_linebreak": true, "ignored_packages": [ "Vintage" ] }
こんな感じで、他の設定があるときはカンマを忘れないように書きます。(インデントはタブ!ってことも。)
まとめ
- これで、Tabキーでハマらないですね!
- SublimeTextの設定でカンマ忘れないように!
- このリストもEmmetで作成しました!ul>li*3とcontrol+e
いやいや、便利!
参考サイト
前回書いた記事:【これは便利!】「Sublime Text 2」でSnippet(スニペット)を利用する方法 |
何かと詳しい:
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・上巻 | Developers.IO |
カンマはここで、思い出した!:
Sublime Text 導入メモ 4 | soohei.net |
Emmet公式(英語):
Emmet — the essential toolkit for web-developers |
Cheat Sheet |