2014年8月4日月曜日

EclipseでEmmetを試す

Zen Codingの後継であるEmmetをEclipseで使用する手順は、以下の通り。

なお、Emmetは、CSS的な文法の省略記法をHTMやCSSのスニペットに変換するツール。sysoutがSystem.out.println()に変換されるのと同様といえば、Javaプログラマにはピンとくるかもしれない。いずれにしても、実際に試してみると、その強力さがよくわかる。

まず、EclipseにEmmetプラグインをインストールする。具体的な手順は、下記リンクを参照。


Eclipse 4.4 (Luna)にインストールしてみたが、上記の手順で問題なくインストールできた。なお、設定については、デフォルトのままで特に問題なさそう。

インストールが完了したらEclipseを再起動し、拡張子がhtmlの新規HTMLファイルを作成する。HTMLファイル内で、!（エクスクラメーションマーク）を入力後TABキーを押すと、以下のようなHTML5用スニペットに変換される。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>
上記の例では、、!（エクスクラメーションマーク）がEmmetの省略記法となる。なお、Eclipseでメソッドをコード補完した場合と同様、変換後のスニペットでは、あらかじめ設定されている箇所にTABキーでキャレット移動することが可能。

さらに、bodyタグのすぐ下の行に、div#id>ul#id1.class1>li*5という省略記法を入力してTABキーを押すと、以下のように変換される。


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
    <div id="id">
        <ul id="id1" class="class1">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
CSSが少し分かれば、上記の省略記法と変換後のスニペットの対応はなんとなくイメージできるはず。具体的な例については、下記リンクが参考になる。


より詳細については、本家サイトを参照。

投稿者 時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)