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>article1</h1>
    		</p>
    		<p class="article">
    			<h1>article2</h1>
    		</p>
    		<p class="article">
    			<h1>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="" 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文件

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

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