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

最新推荐文章于 2021-04-14 00:40:38 发布

hutiaot

最新推荐文章于 2021-04-14 00:40:38 发布

阅读量370

点赞数

本文链接：https://blog.csdn.net/hutiaot/article/details/29803175

版权

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 格式：

注意 ${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 有特殊意义的预定义变量名：

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

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

注意，定义在 snippets.json （译注：此处疑是 snippets-*.json）文件中的片段优先于定义在 `snippets.json` 文件中的片段

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

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

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

关注