vscode快捷操作emmet语法

Posted 2023-04-23

参考技术A 1.生成标签:直接输入标签名按tab键即可, 比如div 然后tab就可生成<div></div>

2.如果想要生成多个相同标签 标签名加上*号就可以, 比如:div*3 就快速生成3个div标签.

3. 如果有父子级关系, 可以使用> 比如 ul>li 就可以.

4.如果是兄弟关系的标签用+号就可以了, 比如: div+p.

5.如果带有类名或者id名字的, 直接.dome 或者#two tab键就可以了.

6.如果生成的div类名是有顺序的, 可以用自增符号$. 比如 .dome$*3 

Emmet缩写语法乘法将所有元素放在同一行而不是多个？

【中文标题】Emmet缩写语法乘法将所有元素放在同一行而不是多个？

【英文标题】：Emmet abbreviation syntax multiplication puts all elements on same line instead of multiple?

【发布时间】：2021-05-16 17:45:30

【问题描述】：

我看到人们在 VS Code 中使用 Emmet 缩写的任何地方，代码编辑器的行为都是相同的。如果有人把下面的代码，

a:link*3

结果如下

<a href="http://"></a>
<a href="http://"></a>
<a href="http://"></a>

然而，当我在自己的 VS Code 副本中尝试它时，它似乎在同一行上分发它们而没有返回。

<a href="http://"></a><a href="http://"></a><a href="http://"></a>

有没有办法在设置中修改这种行为？我不确定这是否重要，但我正在使用 Apple M1 MBA 的 1.53.0 版探索。

【参考方案1】：

我相信这是内联元素的行为。

参见例如span*3，它也会内联扩展它们。

<span></span><span></span><span></span>

但是，对于块元素，结果与p*3 不同：

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

【参考方案2】：

试试这个解决方案，它对我有用：

转到 settings.json 并应用此设置：

"emmet.syntaxProfiles": 

    "html": 
        //if element created is more than 2, it will break to new line for each element
        "inline_break": 2,
    

我是从文档中读到的：

inline_break：强制换行需要多少行内元素，数字。默认值为 3。例如，span2 将扩展为 ，但 span3 将创建三个元素，每个元素都在一个新行上。将此选项设置为 0 以禁用内联元素的换行符。

https://docs.emmet.io/customization/syntax-profiles/#create-your-own-profile

【参考方案3】：

"emmet.preferences": 
  "output.inlineBreak": 1

这似乎是更好的技术，请参阅https://github.com/microsoft/vscode/issues/119088#issuecomment-811297787，因为 emmet 本身实际上并不支持 emmet.syntaxProfiles 和 inline_break，而是在 vscode 中添加。因此，它可能会在某些时候被弃用，以支持emmet.preferences 方法。