首页 > 博客列表 > vscode之emmet语法快速生成代码

博主信息

博文 5

粉丝 0

访问量 4667

专题推荐

更多>

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 前端程序员开发中常用的扩展

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

个人简历&用户注册

2021-11-12 02:35:23