Question

如何更改和添加emmet插件的快捷命令

如题、基本使用webstrom

若以下回答无法解决问题，邀请你更新回答

Answer 1

前端开发工具Emmet的介绍，Emmet快速编写HTML代码和Emmet快速编写CSS样式分别介绍了Emmet的用途，编写HTML代码和CSS样式，今天再来介绍下Emmet的一些高级功能和使用技巧。
编写好HTML和CSS代码时，我们也需要修改或添加一些内容，Emmet提供了很多非常独特的工具，可以大大提高编辑体验，下面我们挑选几个常用的功能来介绍。
萨龙龙发现在sublime text中安装的Emmet插件的快捷键与官方的演示文档中提供的快捷键不一样，这时我们就要修改Emmet快捷键或者查找在sublime text中的Emmet快捷键。
修改快捷键，打开PreFerences——Package Settings——Emmet中进行修改，只查看快捷键，比如：Match Tag Pair快捷键，打开工具中的命令面板ctrl+shift+p，输入：match就可以查看到。
本文的使用到的快捷键与官方演示中的快捷键一样。
展开缩写（Expand Abbreviation） Demo
这个功能在一开始介绍Emmet时就已经介绍，这是Emmet最核心的功能。
生成测试文本Lorem Ipsum Demo在编写HTML代码时，有时需要添加一些内容，Emmet提供了一段随机的看不懂的英文字段，作为测试数据我们就可以调用。而生成Lorem Ipsum文本也非常简单，输入lorem，按Tab键，就可以生成下面这段文字：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, non, minima, voluptas ducimus
voluptatem perspiciatis id delectus maiores saepe porro aliquam sunt pariatur eaque. Enim,
voluptatem nesciunt voluptate ad veritatis.

Emmet的lorem这一功能不仅仅只为生成一段文本，使用lorem默认生成30个单词的文本，可以为它指定单词的数量来随机生成一大段文本。
如果要生成标题呢，只需减少单词的数量，比如：lorem4将生成下面的标题：

Lorem ipsum dolor sit.

上面的例子只是生成单独的测试文本，与HTML标签一起编写也很简单，就像Emmet快速编写HTML代码文章中生成父子关系的代码一样：

h2>lorem4

将生成：

<h2>Lorem ipsum dolor sit.</h2>

p*4>lorem4

将生成：

<p>Lorem ipsum dolor sit.</p>
<p>Dolores, similique veritatis reprehenderit.</p>
<p>Cupiditate repudiandae numquam earum.</p>
<p>Atque, sequi autem praesentium?</p>

所以lorem为我们提供了强大的测试数据，提高了编写HTML代码的速度，让我们专心编写代码。
扩展缩写（Wrap with Abbreviation）Demo
一个非常强大的功能，在当前HTML代码的基础上添加缩写，将向外扩展代码，比如这段代码，光标在p标签上或者外部：

<div id="page">
<p>Hello world</p>
</div>

再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

.wrapper>h1{Title}+.content

将得到：

<div id="page">
<div class="wrapper">
<h1>Title</h1>
<div class="content">
<p>Hello world</p>
</div>
</div>
</div>

把文本转换成HTML标签当客户给我们提供了一个文本文档，把标题复制过来，比如：

首页
公司简介
公司动态
关于我们
联系我们

转换成导航，选择文本，再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

nav>ul.nav>li.nav-item$*>a

将得到：

<nav>
<ul class="nav">
<li class="nav-item1"><a href="">首页</a></li>
<li class="nav-item2"><a href="">公司简介</a></li>
<li class="nav-item3"><a href="">公司动态</a></li>
<li class="nav-item4"><a href="">关于我们</a></li>
<li class="nav-item5"><a href="">联系我们</a></li>
</ul>
</nav>

注意，导航中有5个菜单，这里不需要在li标签后面使用*5，只需使用单独的操作符*就可以。
删除文本中的列表标记word文档中的文本很多都是列表块，比如：

1.首页
2.公司简介
3.公司动态
4.关于我们
5.联系我们

在编写HTML代码又不需要，Emmet让我们可以删除文本中的标记，在上一功能的缩写的基础代码的后面添加|t就可以删除文本中的标记:

nav>ul.nav>li.nav-item$*>a|t

最终得到的HTML代码与上面的效果是一样的，你可以试试！
控制文本的输出位置默认情况下，用Emmet把文本转换为HTML代码时，使用$#操作符Emmet可以将文本输出到多个元素中，而$#平上Emmet缩写语法中的一部分，所以得将$#放在属性值[]或文本{}操作符中。
以上面的导航文本为例，在Enter Wrap Abbreviation中输入：

ul>li[title=$#]*>{$#}+img[alt=$#]

将得到：

<ul>
<li title="首页">首页<img src="" alt="首页"></li>
<li title="公司简介">公司简介<img src="" alt="公司简介"></li>
<li title="公司动态">公司动态<img src="" alt="公司动态"></li>
<li title="关于我们">关于我们<img src="" alt="关于我们"></li>
<li title="联系我们">联系我们<img src="" alt="联系我们"></li>
</ul>

分解与添加标签（Split/Join Tag）Demo
光标在标签上时，按ctrl+j，可以将标签：

<div></div>

转换为

<div />

追问

大神求问、那在webstrom里得怎么操作

Answer 2

我是打酱油滴

追问

这酱油可以

追答

那你就采纳咯

Answer 3

有图片没，

追问

没图片啊、修改命令的、是操作上的问题