Emmet（以前ゼンコーディング）.なにか？知らない人は一度 Emmet記事サイトのオンラインデモから見れば良い.さらに直接使って見ることもあるが、Watch Demo右上にあるTry it yourselfを押してください. （これ動画はありません.）ところで、私はお勧めするのは、まさにTry it youselfよりPlay demoてじっくり見た後にTry it yourselfすることだ.

最初に禅コーディング時代にEmmetということを知ったとき、大ヒットと思いながらも、一方では、 “それでも、簡単に使用そういえば大変だ.後で練習を見た上でご使用みよう”と思った.

最近のHTMLコードをたくさん組まなければすることができた.だから、このついでにEmmet練習やちょっとしてみようと考えた.そして、Eclipseのプラグインをインストールして使ってみたが、なんと！すぐに使用していないことをむしろ後悔することになった.本当に簡単なのであまり見ることもなかった.

もちろん、高度な機能を使用するには、いくつかの表示はありますが、高度な機能を使用するという考えをしていないだけの使用を開始してください. Eclipseでaと書いた次のだけタブをクリックすると、aタグが撒かれるが、この機能だけ使っても十分に楽だからだ.

すごく様々なエディタに適用されているEmmet

プラグインを敷くために Emmet公式サイトに入ってみた. （ Emmetツイッター）

ハル！非常に多くのエディタがEmmetをサポートしていた.私が使用しているEclipseとエディットプラスもやっぱりEmmetをサポートしていた.

Emmetをサポートするエディタはとても多かった.私が使用しているEclipseとエディットプラスもEmmetをサポートした. （エディットプラスは禅コーディング時代をサポートすることだ.そして、私は今エディットプラスよりSublime Text 2をより多く使用します.）

旧ジェンコーディング時代の、Google Codeサイトに行けばリストが多様にあるようだ.おそらくEmmetの最新機能はサポートしていないだろうがね.

旧ジェンコーディング時代、禅コーディングを公式サポートしているエディタは2012-06-15時点で、次のようだった.

圧タナ、Zendは、Eclipse、テキストメイト、倖田、エスプレッソ、コモドエディット/ IDE、メモ帳+ +、PSパッド、エディット、このリア、コードのミラー、コードのミラー2

公式サポートはありませんが、サードパーティによってサポートされているエディタは2012-06-15時点で、次のようだった.したがって、Emmetのすべての最新の機能をサポートして保証することはできない.もちろん、エンジン自体は善コーディング時代の公式エンジンを使用する.

Dreamweaverのは、サブライムテキスト1,2、超エディット、トップスタイル、G·エディット、BBエディット、テキストラングギュルロ（マック）、Visual Studioは、Emエディタ、サクラエディタ、エディットに加え、ネトビン、クロム拡張、ギリシャモンキー、ジーニー、RJテキストEd、アケルパッド、WIODEウェブベースのIDE、ブルーフィッシュ

Emmetの公式エンジンを使用せずに、自分たちのカスタムエンジンを使用する拡張は以下の通りです.複数の文法が異なる場合があります.

IntelliJ IDEA / WebStorm / PHPStorm、Emacs、ビーム、ReSharper plugin for Visual Studio

Emmet使用のヒント

以下は、私の考えでは、知っておくと良いようなヒントです. Emmet文法とその構文に基づいて実装されているやつらを順番に少なかった.基礎文法はちょっと練習したということ仮定して説明する.

タグ名を与えた場合、divた

だけ.してクラスを書けばdivが生成される.

.className
<div class="className"> </div>

+時に括弧を使用することができます

table>（colgroup> col * 3）+（tbody> tr * 5> td * 3）
<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tbody>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </tbody>
</table>

ずつ少なく広げるのが楽だ

しかし、上記の例のように文法を複雑に書くことはほとんどない.一つずつ少なく広げている場合がはるかに多く、これ本質的に楽だ.例えばimgようなことだ.

img
<img src="" alt="" />

これはsrcとaltをすべて生成してくれるので、とても楽になる.

aも同じだ.

a
<a href=""> </a>

エディットポイントの移動を使用すればよい

Emmetデモでは、エディットポイントの移動のショートカットが** Ctrl + Shift +左右の矢印であった. EclipseのEmmetプラグインでは、 Ctrl + Alt + [と Ctrl + Alt +] **です. Emmet文法をHTMLに展開し、[HTMLタグの間で使用してみてください.楽だ.

$を使用すると、数値を増加させることができる

ul> li.item $ * 5
<ul>
  <li class="item1"> </li>
  <li class="item2"> </li>
  <li class="item3"> </li>
  <li class="item4"> </li>
  <li class="item5"> </li>
</ul>

CSSでも使うことができる.

下のチートシートを見ると、CSSで使用できるもののリストが出てくる.

Emmet記事

  • Emmet文書：じっくり見て、簡単なものからスギルてください.
  • Emmetチートシート：これみると、様々な短縮コードが出て、さらにhtml:4tと書いてタブを押すと、html枠組みが繰り広げられる.

今すぐEmmetを使用しよう

複雑な思いではなく、単純な奴から使用するという考えを持ってEmmetを始めましょう.複雑な機能をすべて使用しなくてもEmmetは、コーディングの時間を短縮してくれる.学習にかかる時間はほとんどない. CSSの文法を知っていれば1分？わからない場合は2分？まあその程度だ.

すべての機能を使用する必要がないという考えをしていないa押し]タブをクリックすることから始めましょう.するとEmmetの魅力にはまるようになるだろう.

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。