Emmetプラグインの使い方まとめ

Emmet プラグインは、開発を簡素化するツールです。フロントエンド開発のプロセスでは、作業の大部分が HTML と CSS コードの作成であることに気づくのは難しくありません。特にエディターの助けやツールの使用がなければ、効率は特に低くなります。そこで、HTML と CSS 言語の特性に基づいて、フロントエンド開発をより迅速に実行し、自動補完、埋め込み、コード生成などの機能を実現できるようにするために、Emmet (旧名 Zen コーディング) が誕生しました。コード作成の効率が大幅に向上し、フロントエンド開発をより効率的に実行できます。

1. インストールemmet: パッケージのインストール

次の方法は、sublime text 3 に適用されます。

1. パッケージ ctrl をインストールします: ctrl + ~ を使用して、次のコードを入力します:

import urllib.request,os = 'Package Control.sublime-package'; = sublime .installed_pa​​ckages_path(); urllib.request.install_opener(urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb'); .request .urlopen('http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

2. [パッケージ ctrl;] で [パッケージのインストール] を選択します。 3 、emmetを検索してインストールします。

2.

HTMLコードを簡単に作成します まず、このプラグインの効果を見てみましょう

「!」または「html:5」を入力します。 " を入力してから

Tab キーを押します

:

基本構文:

1. 子孫要素を生成します: > コマンドを入力した後、Tab キーを押してコードをすぐに取得します

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

2. 兄弟を生成する要素: + プラス記号は、次の要素と前の要素が兄弟要素であることを示します

コマンド: p+p+bq Get コードは次のとおりです:

<p></p>
<p></p>
<blockquote></blockquote>

3. 上位要素の生成: ^ は次のことを意味します^ の後の要素と ^ より前の要素の親要素は同じレベル、つまり兄弟要素です。 1 つの ^ は 1 つのレベルをアップグレードすることを意味し、2 つは 2 つのレベルをアップグレードすることを意味します

コマンド: p+p>p>span+em^bq 次のようにコードを取得します:

<p></p>
<p>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</p>

コマンド: p+p>p>span+em^^ bq 次のようにコードを取得します:

<p></p>
<p>
    <p><span></span><em></em></p>
</p>
<blockquote></blockquote>

4. クラス名を生成します: Emmet のデフォルトのタグは p です。タグ名を指定しない場合、デフォルトで p タグが生成されます。 Emmet は親タグに基づいて決定します。たとえば、

に .item と入力すると、
• が生成されます。 コマンド: .container 取得したコードは以下の通り:

  <p class="container"></p>

  複数のクラス名を生成したい場合は

  コマンドを連続して書くことができる: .container.wrapper.more 取得したコードは以下の通り:

  <p class="container wrapper more"></p>

  5 ID の生成: #

  コマンド: #container 取得されたコードは次のとおりです:

  <p id="container"></p>

  6. グループ化の生成: () 生成される構造、特に階層関係がより明確になるように、括弧を使用してグループ化します

  コマンド: (.foo>h1)+(.bar>h2 ) 取得されるコードは次のとおりです:

  <p class="foo">
      <h1></h1>
  </p>
  <p class="bar">
      <h2></h2>
  </p>

  7. 複数のコピーを繰り返し生成します: * * の数字の後には、繰り返し生成するコピーの数が続きます

  コマンド: ul>li*5 取得されたコードは次のとおりです:

  <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>

  8. 生成されたコンテンツに順番に番号を付けます: $ $ は 1 つだけ表示される場合、1 から始まります。複数ある場合は0から始めます。 3 桁のシリアル番号を生成したい場合は、3 つの $

  コマンドを記述する必要があります: 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>

  シリアル番号は次のように単調に生成できますか? ?強力な Emmet の場合、これは絶対に当てはまりません。 $ の後に @- を追加して、逆の順序を実現することもできます。

  コマンド: ul>li.item$@-*5 結果のコードは次のとおりです。

  <ul>
      <li class="item5"></li>
      <li class="item4"></li>
      <li class="item3"></li>
      <li class="item2"></li>
      <li class="item1"></li>
  </ul>

  同様に、 @N を使用して開始シーケンス番号を指定することもできます
  コマンド: ul>li.item$@3*5 取得されたコードは次のとおりです:

  <ul>
       <li class="item3"></li>
       <li class="item4"></li>
       <li class="item5"></li>
       <li class="item6"></li>
       <li class="item7"></li>
  </ul>

  内容については ul>li.item$@-3* 5 つの生成、あなた自身でそれを理解することができます!
  9. カスタム属性の生成: [attr] 角括弧内の内容は追加する属性です。

  
  コマンド: td[rowspan=2colspan=3 title] 取得されたコードは次のとおりです:

  <td rowspan="2" colspan="3" title=""></td>

  10テキスト コンテンツを生成します: {} 中括弧内は追加するテキスト コンテンツです

  コマンド: a{Click me} 次のようにコードを取得します:

  <a href="">Click me</a>

  コマンド: p>{Click}+a{here}+ {続きへ} 次のようにコードを取得します:

  <p>Click <a href="">here</a>to continue</p>

  到此为止基本语法内容也就这么多，剩下的就是加强理解与练习了。

  注意：在写命令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下，这将会导致代码无法使用。但是{}[]中可存在空格

  ul>li.item${item$}*3

      <ul>
      	<li class="item1">item1</li>
      	<li class="item2">item2</li>
      	<li class="item3">item3</li>
      </ul>

   #content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words

      <p id="content">
      	<p class="article">
      		<h1 class="ok" title="papername" style="color:#000;"></h1>
      		<h3 class="no" title="subname" style="color:#fff;"></h3>
      		<p class="words"></p>
      	</p>
      </p>　

  练习的过程中我们可以试着反推出命令行

      <p class="header">
      	<ul class="nav">
      		<li><a href="" style="block"><span>name</span></a></li>
      		<li><a href="" style="block"><span>name</span></a></li>
      		<li><a href="" style="block"><span>name</span></a></li>
      		<li><a href="" style="block"><span>name</span></a></li>
      		<li><a href="" style="block"><span>name</span></a></li>
      		<li><a href="" style="block"><span>name</span></a></li>
      	</ul>
      </p>

  
  

      <table>
      	<thead>
      		<td class="col1"></td>
      		<td class="col2"></td>
      		<td class="col3"></td>
      		<td class="col4"></td>
      	</thead>
      	<tbody>
      		<tr class="row01">
      			<td class="col1"></td>
      		</tr>
      		<tr class="row02">
      			<td class="col2"></td>
      		</tr>
      		<tr class="row03">
      			<td class="col3"></td>
      		</tr>
      	</tbody>
      	<tfoot>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tfoot>
      </table>

      <html>
      <head>
      	<title></title>
      	<style type="text/css"></style>
      	<script src="abc1.js" type="text/javascript"></script>
      	<script src="abc2.js" type="text/javascript"></script>
      	<script src="abc3.js" type="text/javascript"></script>
      </head>
      <body>
      	<p class="content">
      		<p class="nav">
      			<ul>
      				<li><a href=""><span></span></a></li>
      			</ul>
      		</p>
      	</p>
      	<p class="sidebar">
      		<p class="top"></p>
      		<p class="middle"></p>
      		<p class="bottom"></p>
      	</p>
      	<p class="mian">
      		<p class="article">
      			<h1 id="article">article1</h1>
      		</p>
      		<p class="article">
      			<h1 id="article">article2</h1>
      		</p>
      		<p class="article">
      			<h1 id="article">article3</h1>
      		</p>
      	</p>
      </body>
      <p class="footer">copyright</p>
      </html>

  这些代码的命令你反推出来了吗？

  1.命令：.header>ul.nav>li*6>a[style=block]>span{name}

  2.命令：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$)+(tfoot>td*5)

  3.命令： html>(head>title+style[type=text/css]+script[type=text/javascript][src=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})

   三、emmet在HTML与CSS中的应用

  emmet除了能快速编辑出上面的代码以外，还有一些其他代码也可快速编辑，具体的、全面的快速编辑方式，还请浏览emmet官方文档（有详细说明哦！）

  下面只列出一些常用的快速编辑方式

  命令：link  
  

  <link rel="stylesheet" href="" />

  命令：script:src

  <script src=""></script>

  命令：img

  <img src="/static/imghwm/default1.png"  data-src="" alt="  class="lazy"   alt="" />

  命令：inp

  <input type="text" name="" id="" />

  命令：input:p

  <input type="password" name="" id="">

  命令：btn         结果：

  命令：btn：s        结果：

  命令：btn：r        结果：

  CSS中缩写

  单位：

  • p 表示%
  • e 表示 em
  • r表示 rem

  宽度：

  命令：w100   结果：width:100px; 默认单位px

  命令：w100p   结果：width:100%;  

  高度：

   命令：h100r   结果：height: 100rem;

  颜色：

  命令：c#3    结果： color: #333;

  命令：c#e0    结果： color: #e0e0e0;

  命令：c#fc0    结果： color: #ffcc00;

  CSS3前缀：

  • w 表示 -webkit-
  • m 表示 -moz-
  • s 表示 -ms-
  • o 表示 -o-

  命令：-wmso-transform  

  结果：

  -webkit-transform: ;
      -moz-transform: ;
      -ms-transform: ;
      -o-transform: ;
      transform: ;

  属性模糊匹配：

  如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的： 

  所以在平时使用的时候可留意emmet的提示

  命令：h10p+m5e   结果：height: 10%;margin: 5em;

  四、定制Emmet插件

  • 添加新缩写或更新现有缩写，可修改snippets.json文件
  • 更改Emmet过滤器和操作的行为，可修改preferences.json文件
  • 定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件

  这里都是英文文档，没有英语基础的同学可就有点抓瞎了。

  「ビジネスに利益をもたらしたい場合は、まずツールを強化する必要があります。フロントエンド開発プロセス中に、いくつかの開発ツールの使用スキルを習得すると、開発プロセスがより簡単かつ迅速になり、集中力が高まります。」コードプログラムの開発について。