Emmet(Zen Coding)官方文档 之六 自定义 Emmet

Emmet 提供了大范围的微调,以使你可以用之提升自己的插件体验。几乎所有的正式开发的编辑器插件 (除了 PSPad 和基于浏览器的) 都有 扩展支持: 一个用于扩展 Emmet可以放置 json 和 js 文件的文件夹。请参考随编辑器插件发布的 README 文件,找出 Emmet 在哪儿搜索扩展。

扩展文件夹中的每个 .js 文件都在插件启动时被载入和执行。使用 js 文件建立自己的 过滤器 或 动作:可以使用 Emmet 模块并使用 JavaScript 缩写脚本与编辑器。

使用 .json 文件能够微调 Emmet 工具的不同部分:

snippets.json  添加自己的片段或升级已有的片段。

snippets.json

在扩展文件夹内创建 snippets.json 文件来添加或者覆盖片段。此文件的结构与 原始文件 相同:在最顶级定义片段所属的 语法名称 ,第二级有下面几段:

  • abbreviations 或 snippets 包含 不同类型 的片段定义。
  • filters 包含用逗号间隔的当前语法的默认 过滤器 列表。如果没有定义本属性,则默认使用 html 过滤器。
  • extends: 当前语法所继承的片段定义的语法名称。例如,sass 语法继承自 css ,不过可以为这个语法定义建立自己的或者覆盖一些 SASS 特定的片段。

走入完成后,用户的 snippets.json 与原始文件递归合并,添加或升级缩写和片段。

文本片段

在语法定义的 snippets 一节,可以创建普通的文本片段,你编辑里的一样漂亮。可以在片段中使用 tabstops ,当缩写展开时可以使用 Tab 键在它们之间跳转(前提是所用的编辑器支持 tabstops)。Emmet 采用 TextMate 编辑器的 tabstops 格式:

  • $1 或 ${1}
  • ${1:hello world} — 带有占位符的 tabstop

注意 ${0} 或 $0 tabstop 在类似于 TexeMate 或 Eclipse 等一些编辑器中有特殊含义:用作离开 “tabstops 模式”的最后一个光标位置,所以最好从 1 开始使用 tabstops 。

变量

可以在片段中使用 片段  来输出预定义数据。例如 HTML 语法的 html:5 片段是这样定义的:多宝平台

<!doctype html>\n<html lang="${lang}">...</body>\n</html>

在上面的盒子中, ${lang} 用于引用定义在 snippets.json 文件的 variables 一节的 lang 变量。例如,所用的母语是俄语,可以直接使用 ru 值覆盖 lang 变量,并保持原始的片段定义。

也可以使用行内缩写属性覆盖变量值: html:5[lang=ru]。与 ID 和 CLASS 属性缩写—# 和 .—一起,可以很容易的覆盖缩写中的变量:

"for": "for (var ${class} = 0; i < ${id}.length; ${class}++) {\n\t|}"

用法示例: for#array.i.

预定义变量

片段有一些对 Emmet 有特殊意义的预定义变量名:

  • ${cursor} 或 | 是 $0 的罔,多宝用作生成输出的当前位置。
  • ${child} 引用了一个位置,子属性和片段将被输出到此处。如果没有定义,子元素将输出到片段内容的后边。

转码 | 和 $ 字符

字符 $ 作于 tabstops 和变量,字符 | 用于指示缩写展开时的光标位置。如果想原样输出这些字符,必须使用双斜杠来对它们进行转码: \\$ 或 \\|

共享片段

如果想与其它用户共享片段,可以将它们放进以 snippets 命名的文件中,例如: snippets-foo.json、snippets_bar.json、snippetsBaz.json。Emmet 将在启动时载入它们,并将它们合并到单个片段集合中。

注意,定义在 snippets.json (译注:此处疑是 snippets-*.json)文件中的片段优先于定义在 `snippets.json` 文件中的片段

preferences.json  改变某些 Emmet 过滤器和运作的行为。

preferences.json

preferences.json 文件用于编辑 Emmet 的一些运作和解析器的行为。此文件包含 Key-value 对的简单字典。

例如在 “CSS 渐变” 上,有 css.gradient.fallback 选项描述当定义展开时能够回调 background-color 。要使它生效,直接加入如下内容到 preferences.json 文件:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值