Aptana Studio で Zen Coding を使おう!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

Aptana Studio で Zen Coding を使おう!

Aptana Studio に Zen Coding インストール

  1. メニュー > ヘルプ > 新規ソフトウェアのインストールを選択
  2. ロケーションにhttp://zen-coding.ru/eclipse/updates/を指定して Zen Coding for Eclipse をインストール
  3. これで Zen Coding が有効になります. 試しに
    p.test
    
    と入力して Ctrl + E を押してみてください.
    <p class="test"></p>
    
    と展開されれば成功です.

Example

使用例です. 基本は css セレクタを書いて, Ctrl+E を入力して展開する流れになります.

要素とidを展開

p#test
<p id="test"></p>

要素とclassを展開

p.test
<p class="test"></p>

リストを展開

ul>li*4
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

属性を指定して展開

input[type=submit]
<input type="submit" />

連番展開

ol>li.index$*4
<ol>
    <li class="index1"></li>
    <li class="index2"></li>
    <li class="index3"></li>
    <li class="index4"></li>
</ol>

複数のタグを展開

section>h1+p+pre
<section>
    <h1></h1>
    <p></p>
    <pre></pre>
</section>

ブロックで展開

html>(head>title)+(body>h1)
<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1></h1>
    </body>
</html>

分かりやすい使用例動画

不満は改行を含む展開をした際に, インデントが tab になっちゃってること. スペース4 に変える設定も見当たらない.

その他は概ね満足.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT