Intellij中Emmet插件的使用技巧

最新推荐文章于 2023-12-14 09:10:19 发布

aaqia

最新推荐文章于 2023-12-14 09:10:19 发布

阅读量264

点赞数

文章标签： intellij-idea

原文链接：https://blog.csdn.net/lianghecai52171314/article/details/107889148

版权

Emmet简述
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。
在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码. 语法基本规则如下:

html:5
输入：! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全html基本结构：
示例：

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

link:css
输入link:css引入css样式文件：

h1{好好学习，天天向上！}
生成：
<h1>好好学习，天天向上！</h1>

lipsumN

输入随机文本

使用"#“生成id，”.“生成class，”[]"生成属性

示例：

p#name.ui.button[op='jia']

生成：

使用">“生成子标签，”+" 生成兄弟标签，"^"生成上级的兄弟标签
示例：

div>p{梁云亮}
生成：
<div>
<p>梁云亮</p>
</div>

div.ui.button+div#info
生成：
<div class="ui button"></div>
<div id="info"></div>

div>p{梁云亮}^div[p=321]
生成：
<div>
<p>梁云亮</p>
</div>
<div p="321"></div>

"*"生成多个相同的标签
示例：

ol>li*5>lipsum2
生成：
<ol>
<li>Lorem ipsum.</li>
<li>Laboriosam, velit.</li>
<li>Illum, iure!</li>
<li>Aliquid, enim.</li>
<li>Aperiam, eum.</li>
</ol>

"()"对标签分组
示例：

div>(ul>li*5>lipsum1)+(span>lipsum10)+a[href="#"]
生成：
<div>
<ul>
<li>Lorem.</li>
<li>Officia.</li>
<li>Illum.</li>
<li>Dolor.</li>
<li>Repellendus.</li>
</ul>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, maiores!</span>
<a href="#"></a>
</div>

"$"生成1到n的自动编号
ul>li*3>img[src=imgs/$.jpg][alt=$]
生成：
<ul>
<li><img src="imgs/1.jpg" alt="1"></li>
<li><img src="imgs/2.jpg" alt="2"></li>
<li><img src="imgs/3.jpg" alt="3"></li>
</ul>
ul>li*3>img[src=imgs/$$$.jpg][alt={img $}]
生成
<ul>
<li><img src="imgs/001.jpg" alt="{img 1}"></li>
<li><img src="imgs/002.jpg" alt="{img 2}"></li>
<li><img src="imgs/003.jpg" alt="{img 3}"></li>
</ul>

ul>li*3>img[src=imgs/$$$@8.jpg][alt={img $}]
生成：
<ul>
<li><img src="imgs/008.jpg" alt="{img 1}"></li>
<li><img src="imgs/009.jpg" alt="{img 2}"></li>
<li><img src="imgs/010.jpg" alt="{img 3}"></li>
</ul>

ul>li*3>img[src=imgs/$$$@-8.jpg][alt={img $}]
生成：
<ul>
<li><img src="imgs/008.jpg" alt="{img 1}"></li>
<li><img src="imgs/007.jpg" alt="{img 2}"></li>
<li><img src="imgs/006.jpg" alt="{img 3}"></li>
</ul>

包装文本行
原始文本：

首页
产品介绍
相关案例
关于我们
联系我们
而我们预期的效果是这样

选中文本，按快捷键：ctrl+alt+j，或选择主菜单上的：代码|环绕着|实时模板。

选中Emmet，然后在打开的窗口中输入：ul>li*
注意：右侧的下拉列表。单击向下箭头以查看最近应用的Emmet实时模板的历史记录：
还要注意颜色指示。如果键入有效的Emmet缩写，则背景为绿色。但是，输入不存在的缩写时，背景变为红色：

回车，最终效果：

<ul>
<li>首页</li>
<li>产品介绍</li>
<li>相关案例</li>
<li>关于我们</li>
<li>联系我们</li>
<li>而我们预期的效果是这样</li>
</ul>

其它
a:mail => <a href="mailto:"></a>
a:link => <a href="http://"></a>
form:get => <form action="" method="get"></form>
form:post => <form action="" method="post"></form>
input => <input type="text">
inp => <input type="text" name="" id="">
input:hidden => <input type="hidden" name=""> input:h亦可
input:email => <input type="email" name="" id="">
input:password => <input type="password" name="" id="">
input:checkbox => <input type="checkbox" name="" id="">
input:radio => <input type="radio" name="" id="">
select => <select name="" id=""></select>
option => <option value=""></option>
bq => <blockquote></blockquote>
btn => <button></button>
btn:s => <button type="submit"></button>
btn:r => <button type="reset"></button>