vscode之emmet语法快速生成代码

生成 HTML 文件结构体

html:5 tab键

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

简化版

! tab键

2.生成一个 ID 为 box 的 div 容器

div#box tab键

3.生成一个 class 为 header 的 div 容器

div.header tab键

4.超级简化版

#box tab 快速生成一个 id 为 box 的 div 容器，默认元素是 div
.box tab 快速生成一个 class 为 box 的 div 容器，默认元素是 div

5.快速生成一段文本内容,元素是 p

p{hello world} tab键

内容为： hello world

6.快速生成代码段(包含)

快键方式:

div>p>a tab键

代码为:

<div>
  <p>
    <a></a>
  </p>
</div>

7.快速生成代码段(兄弟)

快捷方式:

div+p+a tab键

代码为:

<div></div>
<p></p>
<a></a>

8.生成固定数量的元素

快捷方式:

a*5 tab键

代码为:

<a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>

9.生成一段代码

快捷方式:

ul>li*6>a{link} tab键

代码为:

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

如果使用以上快捷方式不能帮助你快速生成代码,建议看看我的扩展

vscode 前端程序员开发中常用的扩展

vscode之emmet语法快速生成代码

vscode之emmet语法快速生成代码

简化版

如果使用以上快捷方式不能帮助你快速生成代码,建议看看我的扩展

更多相关文章

随机推荐