介绍

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。

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

请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!

使用方式:

在编辑器中输入缩写代码:!按下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>

</body>
</html>

在编辑器中输入缩写代码:.demo$*5按下tab键便会得到

<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

在编辑器中输入缩写代码:.demo 或者 div.demo 按下tab键便会得到

<div class="demo"></div>

常用缩写

一、HTML

     1.  link:css       -- 快捷引入外部css文件

     2.  cc:ie           -- 编写在ie情况下

     3.  script:src    -- 快捷引入外部js文件

     4.  h1{text}    -- <h1>text</h1>

     5.  a[href=#]   -- <a href="#"></a>

     6.  ul>li.item$*3 --

         <ul>
            <li class="item1"></li>
            <li class="item2"></li>
            <li class="item3"></li>
         </ul>

     7.  a.link{click} -- <a href="" class="link">click</a>

     8.  input:button.btn -- <input type="button" class="btn">

     9.  lorem定制文本 (用于测试)

          lorem30        -- 生成30个word



二、CSS(个人认为比html更有用)

    1.  w100           -- width:100px;

    2.  h5p             -- height:5%;

    3.  oh / ovh /ov-h       -- overflow:hidden;
         zm1                     -- zoom:1;

    4.  o0               -- opacity:0;
         op+             -- opacity: ;
                               filter: alpha(opacity=);
         op:ie           -- -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                               filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

    5.  db               -- display:block;
         dib              -- display:inline-block;

    6.  trf               -- transform各种兼容
         trf:sc           -- transform:scale();
         trs               -- transition
         bdrs             -- border-radius及各种前缀
         bxsh            -- box-shadow

    7.  bdb             -- border-bottom
         bdt             -- border-top
         bdl              -- border-left
         bdr             -- border-right

    8.  fz                -- font-size
         fw               -- font-weight
         fw400          -- font-weight:400;
         ff                 -- font-family

    9. m-10-2-0-12        -- margin:10px 2px 0 12px;

   10.  c#0            -- color:#000;
          cra             -- color: rgba(0,0,0.5);

   11.  bd1-s-red    -- border:1px solid red;
          bd+            -- border: 1px solid #000;
          bdb+          -- border-bottom: 1px solid #000;

   12.  m0-auto-0        -- margin:0 auto 0;

   13.  lh1.6                -- line-height:1.6;
         vam                  -- vertical-align:middle;
         tac                    -- text-align: center;
         td                     -- text-decoration:none;
         tdu                   -- text-decoration:underline;
         ti                      -- text-indent

  14.  z10                     -- z-index:10;

  15.  bg                      -- background
         bgc                    -- background-color
         bgsz:cv               -- background-size:cover;
         bg+                    -- background:#fff url() 0 0 no-repeat;

  16.  pos: a                  -- position:absolute;
         pos: r                  -- position: relative;
         pos: f                  -- position: fixed;

  17.  fl                         -- float:left;
         fr                        -- float:right;

  18.  curp                    -- cursor: pointer;

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

插入图片