20180422 - VS code 系列,emmet自动完成

    前言

    工欲善其事,必先利其器;代码编辑器(IDE) 就是程序员实现想法的利器,需要认真选择、打磨。今天和大家聊的是我最近常用的 VS code中 emmet 插件。

    什么是 emmet

    一套前端语法,能够快速生成HTML、CSS结构;可以作为各种代码编辑器的插件形式存在,帮你快速编写HTML结构。

    官方网站: https://docs.emmet.io/

    演示效果

    输入命令,然后tab一下,就自动帮你生成HTML结构。

    vs-code-emmet.gif

    安装插件

    VS code 中有多款 emmet 插件,我选择的是 MIthril Emmet,直接去 vscode 的插件中心下载即可。

    使用插件

    不要被它的语法所吓到,其实这些语法的概念在前端中,几乎是通用的。比如 .代表 class# 代表 id

    常用例子

    输入指令后,按tab键即可生成对应的HTML结构。

    • div,生成一对标签
      • <div></div>
    • div#warp,id=warp
      • <div id="warp"></div>
    • div.test,class=test
      • <div class="test"></div>
    • div>p,包含子元素,p
      • <div><p></p></div>
    • div>p{hello},子元素下包含hello文本
      • <div><p>hello</p></div>

    常用语法

    通过上述语法,你是否能找到语法的特点? 然后可以看看下面我整理出来的常用语法吧。

    • !!! 生成HTML5页头
    • >代表子元素
    • ^代表上级节点
    • ()用来包含多级节点
    • #. 代表 id和class
    • +代表兄弟元素
    • *n 代表生成N个目标元素
    • $*n 用来生成有序编号
      • 不同数量的$号将影响编号效果
      • @符调整编号顺序,以及起点
    • [title='xx'] 生成自定义属性
    • {}给元素添加文本内容

    看看下面这个语法

    html>(head>title{网页标题})(body>div>ul>li.class$*6>a[href='abc?id=$']{he1l})

    它的效果如下

    <html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        <div>
            <ul>
                <li class="class1"><a href="abc?id=1">hello</a></li>
                <li class="class2"><a href="abc?id=2">hello</a></li>
                <li class="class3"><a href="abc?id=3">hello</a></li>
                <li class="class4"><a href="abc?id=4">hello</a></li>
                <li class="class5"><a href="abc?id=5">hello</a></li>
                <li class="class6"><a href="abc?id=6">hello</a></li>
            </ul>
        </div>
    </body>
    </html>

    高级技巧

    outward 逐级选中上层标签;inward 相反,逐级缩小选中区域。

    vs-code-emmet.gif

    其他的技巧,大家慢慢去挖掘吧。

    注意:此语法默认没有快捷键,你可以通过 ctrl+p 弹出命令框,之后输入 > emmet 找到对应命令;

    后记

    我见过的优秀程序员,大多对自己的开发设备(软硬件)都有很高的要求。而很多小菜鸟,从来不愿意在设备上投资,更不愿意去研究自己使用的工具,永远“够用就好”。

    我不是说器材党一定很牛;但在自己常用软件上投入精力去研究它,是肯定没错的。