Emmetを使用してHTMLをすばやく作成する方法

投稿日: 2022-04-20 2022-04-20

私にとって、個人的には、新しいWebプロジェクトを開始する上で最も退屈な部分の1つは、最初のマークアップを構造化する必要があることです。私は通常、ロジックの計画、データベースのセットアップ、または基本的なスタイルの追加に直接取り掛かる準備ができていますが、そこにloremipsumテキストを50回コピー/貼り付けしています。

しかし、それ以上はありません。 Doctypeの設定方法を覚えて、liタグをコピーして貼り付け、さらに「class」や「id」という単語を書き出す時間は終わりました。 Emmet 拡張機能を使用すると、マークアップの簡単な短縮バージョンを書き、タブを押して、現代の栄光に驚かされることができます。

私は個人的にEmmetに夢中になり、ページを数行で少なくとも80 % o f書き込み、CSSライブラリを使用しているため、ほとんどのレイアウトと一部のスタイル設定はそのままで実行できます。 Pug 、カスタムスニペット、および Materialize と組み合わせると、ほぼ全能であると感じます。

インストール

特定のコードエディタのインストール手順に従う必要があります。 VSCodeを使用している場合、実際にはがに組み込まれているため、何もする必要がなく、すぐに電力を利用できるようになります。

基本構文

構文は非常に単純です。header、ul、scriptなどのタグの名前と、必要な操作の記号を使用して、タブ。

>以下の項目を中に追加します。
^現在のスコープから上に移動します。
+上記の項目を同じスコープに追加します。

<!-- h1+ul>li -->
<h1></h1>
<ul>
  <li></li>
</ul>

<!-- header>nav^footer -->
<header>
  <nav></nav>
</header>
<footer></footer>

<!-- nav>div>h1+img^ul>li+li+li -->
<nav>
  <div>
    <h1></h1>
    <img src="" alt="">
  </div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

反復とグループ化

上記の例では、リストに3つのliを使用する必要がありましたが、これは非常に高速で煩わしいものになります。代わりに、*だけで、必要な繰り返し回数を渡すことができます。

<!-- ul>li*2 -->
<ul>
  <li></li>
  <li></li>
</ul>

それ以上のことができます。括弧()を使用して、速記のセクションをグループ化できます。このリストの3つのグループがそれぞれ2つのアイテムを持つように作成しましょう。

<!-- (ul>li*2)*3 -->
<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
</ul>

属性とテキスト

クラスとIDを省略形に追加することで、さらに多くのことができます。クラスには.を使用し、IDには#を使用して、適用するものに追加するだけです。その他の属性は、括弧[]に入れて、通常どおり入力できます。

<!-- h1.title+input#name -->
<h1 class="title"></h1>
<input type="text" id="name">

<!-- Let's build on the former example -->
<!-- (ul.list>li.list-item*2)*3 -->
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>

<!-- img[src="#"]+script[src="#"] -->
<img src="#" alt="">
<script src="#"></script>

中括弧{}に必要なものを追加することで、基本的なコンテンツの追加を開始することもできます。 Emmetでは、loremの後に必要な単語数を続けてloremipsumテキストを生成することもできます。

<!-- h1{I'm a title}+p>lorem20 -->
<h1>I'm a title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, expedita earum iste cumque unde perspiciatis nobis adipisci saepe a eum.</p>

<!-- When adding Lorem Ipsum to an li iteration, you can just omit the li's entirely -->
<!-- (ul.list>lorem10.list-item*2)*3 -->
<ul class="list">
  <li class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, totam.</li>
  <li class="list-item">Vero iure amet blanditiis iste aperiam velit deleniti officiis consectetur!</li>
</ul>
<ul class="list">
  <li class="list-item">Ad et fuga sed earum veniam eius distinctio, omnis quas.</li>
  <li class="list-item">Error quam cumque eligendi dicta praesentium tenetur cum soluta qui?</li>
</ul>
<ul class="list">
  <li class="list-item">Reiciendis suscipit eveniet magnam ipsum quam? Qui rem consectetur inventore.</li>
  <li class="list-item">Consectetur odit quos commodi nulla eaque, sapiente reprehenderit perspiciatis. Voluptate?</li>
</ul>

結論

Emmetは私の最もよく使われるツールの1つであり、うまくいけば、Emmetに慣れて、この素晴らしいチートシートを見てから、Emmetがもたらす生産性の向上を体験できるかもしれません。

getdocs

13036