【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・上巻

sublime
348件のシェア(そこそこ話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、ちょっと年末前くらいから、「Emmet」というキーワードを聞くようになり、 日頃お世話になっている、sublme text 2でも使えるということで今回、上下巻に分けてご紹介したいと思います。

アジェンダ

  1. Emmetとは?
  2. 誰が開発してるの?
  3. Emmetプラグインのインストール!
  4. インストール後の設定
  5. どんな感じがさわってみる。
  6. おまけ

Emmetとは?

はじめて「Emmet」を聞いた方は「Emmetってなに?」となるかと思いますので、簡単にご説明をできればと思います。
それでは、「Zen Coding」はどこかでお聞きしたことがあるのではないでしょうか?

Zen Coding」は、コード(スニペット)とショートカットを組み合わせて、効率的にHTMLやCSSのマークアップ手助けしてくれる、すごいツールで認知度も高いと思います。

その「Zen Coding」が名前を変えて&進化して 「Emmet」となって開発が進んでいるとのことです。

Emmet Documentation

以下引用
Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:

誰が開発してくれているの?

Zen Codingの次期バージョンとのこともあって、これからもお世話になるかと思うので、感謝と敬意をこめて開発してくれている方をご紹介します。

Sergey Chikuyonok氏

https://github.com/sergeche

現在はまだベータ版とのことで、正式リリースされたあかつきには、お礼のコメントをかければと思ってます。

使ってるなら今書けよ!と言われるかもしれないのですが、シャイなもので・・・。

Emmetプラグインのインストール!

Sublime Text 2を立ち上げたら、プラグインをインストールするべく、お約束のコマンドパレットを開きます
ショートカットは「Ctrl+Shift+p」です。
その後、「Package Control:Install Pacage」を選択します。

img_emmet_01_001

Emmetと入力すると該当するプラグインが出てくるので、選択してインストールします。

img_emmet_01_002

これでインスールは完了、簡単でいいですね!

Sublime Text 2 関連情報は合わせてをこちらもどうぞ!
【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】

インストール後の設定

インストール後、注意したほうがいい箇所があるとのことだったのでこちらにまとめます。

  1. Zen Codingプラグインと併用しないようにする。
  2. Tabキーでのコード展開をしないようにする。
  3. 日本語文字変換を確定すると文字が消えるのを回避

Zen Codingプラグインと併用しないようにする。

Zen Codingプラグインを併用すると誤動作があるとのことで、Emmetを使う際はアンインストールしてください。

アンインストール方法
Ctrl+Shift+p」から「Package Control:Remove Pacage」を選択します。

img_emmet_01_003

その後「Zen Coding」を選択して、アンインストールの完了です。これまた簡単!

img_emmet_01_004

Tab でのコード展開をしないようにする。

コード展開コマンドは、デフォルトでTabキーとCtrl+eが設定されています。

ここで注意したいのが、Tabキーなのですが、他の動作を上がいてしまうとのことでTabキーでの展開を停止したほうがいいかと思います。

Tabキー展開の停止方法

メニューの「Preferences > Settings – User」を選択し以下記述を追記します。

//[Emmet]Tabキー展開の停止
"disable_tab_abbreviations": true 

日本語文字変換を確定すると文字が消えるのを回避

コーディング中、日本語文字変換後に確定すると文字が消えてしまいます!!!ちょっとこれは致命的?かと思いますが、ご安心ください。 以下、設定で回避できるそうです。

設定方法

メニューの「Preferences > Settings – User」を選択し以下記述を追記します。

//[Emmet]日本語変換確定の文字消えを防ぐ
"disable_formatted_linebreak": true

どんな感じがさわってみる。

今回はさわりとして、CSSの展開をご紹介。

//展開前
.box
{
	m10     /*ここで<Ctrl>+<e>*/
	m10-20  /*ここで<Ctrl>+<e>*/
	m0-a    /*ここで<Ctrl>+<e>*/
}

//展開後
.box
{
	margin: 10px;
	margin: 10px 20px;
	margin: 0 auto;
}

おお、これだけでも気持ちいですね!

//展開前
.box
{
	w100     /*ここで<Ctrl>+<e>*/
	w100e    /*ここで<Ctrl>+<e>*/
	w100p    /*ここで<Ctrl>+<e>*/
}

//展開後
.box
{
	width: 100px;
	width: 100em;
	width: 100%;
}

ベンダープレフィックスにも対応

//展開前
.box
{
	/*box-shadow*/
	-bsha-0-1-3-#bbb    /*ここで<Ctrl>+<e>*/
	
	/*text-shadow*/
	-tsh-inset-0-1-3-#bbb    /*ここで<Ctrl>+<e>*/
	
	/*border-radius*/
	-bdrs3    /*ここで<Ctrl>+<e>*/
}

//展開後
.box
{
	/*box-shadow*/
	-webkit-box-shadow: -0px 1px 3px #bbb;
	-moz-box-shadow: -0px 1px 3px #bbb;
	box-shadow: -0px 1px 3px #bbb;
	
	/*text-shadow*/
	-webkit-text-shadow: -1px 1px 0 #033070;
	-moz-text-shadow: -1px 1px 0 #033070;
	-ms-text-shadow: -1px 1px 0 #033070;
	-o-text-shadow: -1px 1px 0 #033070;
	text-shadow: -1px 1px 0 #033070;
	
	/*border-radius*/
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

こちらのサイトにCSSのショートコードがまとめて頂いています。ありがたいです。

CSSの記述を高速化する、Emmet (Zen-Coding)

おまけ

いろいろとEmmetの情報を探っていく中、自分は「Zen Coding」の 「Wrap変換(Wrap with Abbreviation)」が結構気に入っている機能なのですが、最初ショートカットがわからず、、、調べた結果Ctrl+Alt+Enterで動作してくれるとのことでした。

ですが、、、自分的にはショートカットにEnterキーがあるとむず痒かったので「Zen Coding」と同じ「Ctrl+Shift+A」に変更しました。

変更方法は、メニューのPrerences > KeybiDefaultgs - Userから変更できます。

[
    //{ "keys": [ショートカットキー], "command": "コマンド名" }
    { "keys": ["ctrl+shift+a"], "command": "expand_as_you_type" }
]

余談ですが、コマンド名:expand_as_you_typeを探るのが大変でしたw

下巻では、もう少し詳しいEmmet関連の内容を書かせていただければと思います。

参考にさせていただいたサイト

AWS Cloud Roadshow 2017 福岡