• 欢迎访问举个栗子网站
  • 小说APP下载 xsz.tw 不带广告的小说站

举个栗子:Sublime Text3中使用Emmet语法补全代码

网站 举个栗子 2年前 (2017-11-16) 750次浏览 0个评论 扫描二维码

Sublime Text3 是一款非常好用的文本编辑工具,拥有非常多的插件可以提高编码效率。其中 Emmet 的插件被称为前端神器,由于 Emmet 插件非常强大的代码提示功能,该插件可以做到尽量少写代码。至于 Emmet 插件的安装,小编之前也有讲过,不了解的朋友可以参考下文。

10Sublime 插件 Emmet 的安装及 Tab 补全代码问题解决

工具/原料

  • Sublime Text3

方法/步骤

  1. 1

    首先将一下快速生成 html 文件结构的快捷键,我们常用的是 html:5+Tab 键,现在还可以使用!+Tab 键,如下图所示。

    Sublime Text3 中使用 Emmet 语法补全代码

  2. 2

    下面我们看一下如何快速生成标签,并给标签设置 class 值。我们在 body 标签中输入标签名.类名+Tab 键便可生成,如 div.father+Tab。如下还想给这个标签设置 id 值,则输入标签名.类名#id 名+Tab 键,如下图所示。

    Sublime Text3 中使用 Emmet 语法补全代码

  3. 3

    如果设置的 div 标签,则还有一种特殊的写法,即可以省去前面的标签名,直接使用.类名#id 名+Tab 键,便可以生成 div 标签并设置 class 和 id 的值,如下图所示。

    Sublime Text3 中使用 Emmet 语法补全代码

  4. 4

    接着我们讲解设置同级标签,如果想同时生成 p 标签和 div 标签,则使用标签名+标签名+Tab 键,当然 class 和 id 的设置也包括在标签名中,如 p.father#one+.don#two 便可以同时生成 p 标签和 div 标签,div 标签可以省掉前面的标签名,如下图所示。

    Sublime Text3 中使用 Emmet 语法补全代码

  5. 5

    有时候标签中会嵌套标签,生成子类标签的 Emmet语法是标签名>子标签名*个数>子标签名> 子标签名+Tab,如下图所示。我们要给下图中的 a 标签设置 href 属性,则将该属性设置在[]中即可。如想要给 a 标签设置内容则使用{文本$},$符表示数量为递增的。

    Sublime Text3 中使用 Emmet 语法补全代码

  6. 6

     如果我们想要生成与子标签同级标,则使用标签名>子标签名*个数>子标签名^^子标签名+tab,如下图所示,ul 标签中有 4 个 li 标签,并且生成了与 ul 标签同级的 p 标签。

    Sublime Text3 中使用 Emmet 语法补全代码

  7. 7

    除了上述的 html 代码可以使用 Emmet语法来简化开发以外,还可以在 css 代码中使用 Emmet语法,例如输入 w100+Tab 键便可以生成 width:100px 的代码。Emmet 语法代码的简写非常多,此处便不一一列举了,可以参考下图。

    Sublime Text3 中使用 Emmet 语法补全代码END

注意事项

  • 使用 Emmet 语法前需要安装 Emmet 插件。

举个栗子 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:举个栗子:Sublime Text3 中使用 Emmet 语法补全代码
喜欢 (0)
举个栗子
关于作者:
建筑工地上施工员,闲暇时弄个博客打发时间,
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址