【翻译】Emmet(Zen Coding)官方文档之六自定义 Emmet

【说明】本系列博文是依据 Emmet 官方文档翻译的，原文地址为：http://docs.emmet.io/，部分内容已经在博主之前的博文中节选过，为方便已经收藏过之前博文的朋友，没有删除这些博文，仅将其完整的收录于本系列中。

自定义

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 文件：

{
    "css.gradient.fallback": true
}

以下是当前可用的选项列表：

bem.elementSeparator Class 名的元素分隔符	__
bem.modifierSeparator Class 名的修饰符分隔符	_
bem.shortElementPrefix 描述短的 “块元素”标记的符号。带有这个符号前缀的Class 类名将被视为你块名称的元素名。每个符号实例在解析树的块元素中向上跳转一级。空值将禁用短标记。	-
css.alignVendor 如果设置为 `true，所有生成的` vendor 前缀属性将被赋予真实的元素名。	false
css.autoInsertVendorPrefixes 在扩展 CSS 属性时自动生成 vendor 前缀副本。默认情况下，当缩写前放置了存折号 (例如， `-bxsh`)，Emmet 将仅生成 vendor 前缀属性. 该属性可用时，不需要在缩写前定义破折号： Emmet 为你生成 vendor 前缀属性。	true
css.closeBraceIndentation 在 CSS 关闭括号前缩进。一些用户为了增强可读性而缩进 CSS 规则的关闭括号。设置这个选项将在用户新建规则添加新行（如在 CSS 文件中执行“插入格式化换行”动作）时自动在关闭前缩进。如果你恰好是这种用户，也许会想在这个选项占放一个类似于 `\n\t` 的值.
css.color.case 颜色缩写(类似于 `c#0)的颜色字母的大小写。可取的值有` `upper`、 `lower` 和 `keep。`	keep
css.color.short 在带有颜色的缩写展开时，将类似于 `#ffffff` 的颜色值简化成 `#fff`。	true
css.floatUnit 浮点值的默认单位。	em
css.fuzzySearch 是否能够模糊搜索 CSS 片段的名字。当设置为可用时，每个未知的片段将被改成接近的可用的片段名(对 CSS 值或属性无效)。最接近的匹配将被用于片段解析。例如，在此选项可用时，下面的缩写是等效的：`ov:h`== `ov-h` == `o-h` == `oh。`	true
css.fuzzySearchMinScore 模糊匹配时搜索的最小值（取值范围为从 0 到 1）。较低的设置值能够获得更多的匹配，较高的值则匹配度更高。	0.3
css.gradient.defaultProperty 当展开 CSS 值上下文外面的渐变时，它将生成带有相同名字的属性。	background-image
css.gradient.fallback 当此选项可用时，CSS 渐变将为旧浏览器生成带有渐变第一个颜色的 `background-color 属性。`	false
css.gradient.oldWebkit 为旧的 webkit 实现生成渐变定义。	true
css.gradient.omitDefaultDirection 在生成的渐变中不输出默认的方向定义。	true
css.gradient.prefixes 用逗号的 vendor 前缀列表，每个都将被生成。	webkit, moz, o
css.intUnit 整数值的默认单位。	px
css.keywordAliases 用逗号间隔的关键词别名列表，用在 CSS 缩写中。每个别名的定义格式如下： `alias:keyword_name。`	a:auto, i:inherit, s:solid, da:dashed, do:dotted, t:transparent
css.keywords 用逗号间隔的能够用于 CSS 缩写的有效关键词列表。	auto, inherit
css.mozProperties 可能用于 `moz` vendor 前缀的用逗号间隔的 CSS 属性列表。这个列表用于在展开 `-property 缩写时`生成前缀属性列表。空值意味着所有可用的 CSS 属性都将拥有 `moz` 前缀。	animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, appearance, backface-visibility, background-inline-policy, binding, border-bottom-colors, border-image, border-left-colors, border-right-colors, border-top-colors, box-align, box-direction, box-flex, box-ordinal-group, box-orient, box-pack, box-shadow, box-sizing, column-count, column-gap, column-rule-color, column-rule-style, column-rule-width, column-width, float-edge, font-feature-settings, font-language-override, force-broken-image-icon, hyphens, image-region, orient, outline-radius-bottomleft, outline-radius-bottomright, outline-radius-topleft, outline-radius-topright, perspective, perspective-origin, stack-sizing, tab-size, text-blink, text-decoration-color, text-decoration-line, text-decoration-style, text-size-adjust, transform, transform-origin, transform-style, transition, transition-delay, transition-duration, transition-property, transition-timing-function, user-focus, user-input, user-modify, user-select, window-shadow, background-clip, border-radius
css.mozPropertiesAddon 用于 `css.mozPreperties` `选项的附加 CSS 属性列表，用逗号间隔。如果想从原始集合中添加或删除几个 CSS 属性，可以用这个列表来完成。如果想添加新属性，直接写入属性名，如果想删除，就在属性名前加个连字符。`例如，添加 foo 属性和删除 border-radius 属性，此选项的值将是：`foo, -border-radius。`
css.msProperties 可能用于 `ms` vendor 前缀的用逗号间隔的 CSS 属性列表。这个列表用于在展开 `-property 缩写时`生成前缀属性列表。空值意味着所有可用的 CSS 属性都将拥有 `ms` 前缀。	accelerator, backface-visibility, background-position-x, background-position-y, behavior, block-progression, box-align, box-direction, box-flex, box-line-progression, box-lines, box-ordinal-group, box-orient, box-pack, content-zoom-boundary, content-zoom-boundary-max, content-zoom-boundary-min, content-zoom-chaining, content-zoom-snap, content-zoom-snap-points, content-zoom-snap-type, content-zooming, filter, flow-from, flow-into, font-feature-settings, grid-column, grid-column-align, grid-column-span, grid-columns, grid-layer, grid-row, grid-row-align, grid-row-span, grid-rows, high-contrast-adjust, hyphenate-limit-chars, hyphenate-limit-lines, hyphenate-limit-zone, hyphens, ime-mode, interpolation-mode, layout-flow, layout-grid, layout-grid-char, layout-grid-line, layout-grid-mode, layout-grid-type, line-break, overflow-style, perspective, perspective-origin, perspective-origin-x, perspective-origin-y, scroll-boundary, scroll-boundary-bottom, scroll-boundary-left, scroll-boundary-right, scroll-boundary-top, scroll-chaining, scroll-rails, scroll-snap-points-x, scroll-snap-points-y, scroll-snap-type, scroll-snap-x, scroll-snap-y, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-face-color, scrollbar-highlight-color, scrollbar-shadow-color, scrollbar-track-color, text-align-last, text-autospace, text-justify, text-kashida-space, text-overflow, text-size-adjust, text-underline-position, touch-action, transform, transform-origin, transform-origin-x, transform-origin-y, transform-origin-z, transform-style, transition, transition-delay, transition-duration, transition-property, transition-timing-function, user-select, word-break, word-wrap, wrap-flow, wrap-margin, wrap-through, writing-mode
css.msPropertiesAddon 用于 `css.msPreperties` `选项的附加 CSS 属性列表，用逗号间隔。如果想从原始集合中添加或删除几个 CSS 属性，可以用这个列表来完成。如果想添加新属性，直接写入属性名，如果想删除，就在属性名前加个连字符。`例如，添加 foo 属性和删除 border-radius 属性，此选项的值将是：`foo, -border-radius。`
css.oProperties 可能用于 `o` vendor 前缀的用逗号间隔的 CSS 属性列表。这个列表用于在展开 `-property 缩写时`生成前缀属性列表。空值意味着所有可用的 CSS 属性都将拥有 `o` 前缀。	dashboard-region, animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, border-image, link, link-source, object-fit, object-position, tab-size, table-baseline, transform, transform-origin, transition, transition-delay, transition-duration, transition-property, transition-timing-function, accesskey, input-format, input-required, marquee-dir, marquee-loop, marquee-speed, marquee-style
css.oPropertiesAddon 用于 `css.oPreperties` `选项的附加 CSS 属性列表，用逗号间隔。如果想从原始集合中添加或删除几个 CSS 属性，可以用这个列表来完成。如果想添加新属性，直接写入属性名，如果想删除，就在属性名前加个连字符。`例如，添加 foo 属性和删除 border-radius 属性，此选项的值将是：`foo, -border-radius。`
css.propertyEnd 在展开 CSS 缩写时在每个 CSS 属性的后面放置的符号。	;
css.unitAliases 用逗号间隔的单位别名的列表，用于 CSS 缩写。每个别名的定义格式如下： `alias:unit_value。`	e:em, p:%, x:ex, r:rem
css.unitlessProperties 必须包含单位的属性的列表。	z-index, line-height, opacity, font-weight, zoom
css.valueSeparator 定义在展开 CSS 缩写时，在两个 CSS 属性和值之间放置的符号。	:
css.webkitProperties 可能用于 `webkit` vendor 前缀的用逗号间隔的 CSS 属性列表。这个列表用于在展开 `-property 缩写时`生成前缀属性列表。空值意味着所有可用的 CSS 属性都将拥有 `webkit` 前缀。	animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, appearance, backface-visibility, background-clip, background-composite, background-origin, background-size, border-fit, border-horizontal-spacing, border-image, border-vertical-spacing, box-align, box-direction, box-flex, box-flex-group, box-lines, box-ordinal-group, box-orient, box-pack, box-reflect, box-shadow, color-correction, column-break-after, column-break-before, column-break-inside, column-count, column-gap, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, dashboard-region, font-smoothing, highlight, hyphenate-character, hyphenate-limit-after, hyphenate-limit-before, hyphens, line-box-contain, line-break, line-clamp, locale, margin-before-collapse, margin-after-collapse, marquee-direction, marquee-increment, marquee-repetition, marquee-style, mask-attachment, mask-box-image, mask-box-image-outset, mask-box-image-repeat, mask-box-image-slice, mask-box-image-source, mask-box-image-width, mask-clip, mask-composite, mask-image, mask-origin, mask-position, mask-repeat, mask-size, nbsp-mode, perspective, perspective-origin, rtl-ordering, text-combine, text-decorations-in-effect, text-emphasis-color, text-emphasis-position, text-emphasis-style, text-fill-color, text-orientation, text-security, text-stroke-color, text-stroke-width, transform, transition, transform-origin, transform-style, transition-delay, transition-duration, transition-property, transition-timing-function, user-drag, user-modify, user-select, writing-mode, svg-shadow, box-sizing, border-radius
css.webkitPropertiesAddon 用于 `css.webkitPreperties 选项的附加 CSS 属性列表，用逗号间隔。如果想从原始集合中添加或删除几个 CSS 属性，可以用这个列表来完成。如果想添加新属性，直接写入属性名，如果想删除，就在属性名前加个连字符。`例如，添加 foo 属性和删除 border-radius 属性，此选项的值将是：`foo, -border-radius。`
filter.commentAfter 当应用 `comment` 过滤器时，将被放在对应的元素后的注释内容的定义。这个定义是传递给 `_.template()函数的` ERB 风格的模板。在模板上下文中，如下属性和函数是有效的： `attr(name, before, after)` – 这个函数输出用 `before` and `after 连接的指定的属性。如果属性不存在，将返回空字符串。` `node` – 当前节点 (`AbbreviationNode 的实例`) `name` – 当前标签的名字 `padding` – 当前字符的留白，能够用于格式化	<!-- /<%= attr("id", "#") %><%= attr("class", ".") %> -->
filter.commentBefore 当应用 `comment` 过滤器时，将被放在对应的元素前的注释内容的定义。更多信息，请参阅 `filter.commentAfter 属性的描述。`
filter.commentTrigger 一个属性列表，如果其中的项在缩写中存在，该缩写将被添加注释。如果希望为每个元素添加注释，可以将其设置为 `*`	id, class
filter.trimRegexp 用于在 `t`(trim) 过滤器中检索要删除行标记 (numbers, dashes, bullets, 等)的正则表达式。这个裁切示波器用于包围缩写中从其它文档（如 Microsoft Word）中粘贴过来的列表。	[\s\|\u00a0][\d\|#\|\-\|\|\u2022]+\.?\s*
format.forceIndentationForTags 定义强制其内部缩进的标签列表，用逗号间隔。	body
format.noIndentTags 定义不其内缩进行的标签列表，用逗号间隔。	html
sass.propertyEnd 定义展开 SASS 风格的 CSS 缩写时在每个 CSS 属性后面放置的符号。
stylus.propertyEnd 定义展开 Stylus 风格的 CSS 缩写时在每个 CSS 属性后面放置的符号。
stylus.valueSeparator 定义展开 Stylus 风格的 CSS 缩写时在两个属性和值之前放置的符号。

syntaxProfiles.json

定义如何生成 HTML/XML 。

syntaxProfiles.json

输出配置用于定义如何生成 HTML 内容。例如，当展开 br 属性时，Emmet 可能会生成如下标签中的一种：

  — HTML 记号
  — XHTML 记号
  — XML 记号

Emmet 尝试自动探测当前文档的输出配置。例如，如果文档定义成 XHTML 类型，将使用 xhtml 配置，否则使用 html 。

但有时，可能想要强制 Emmet 使用另一个特定语法的配置，或者使用带有特殊规则的自定义配置。

在这种情况下，可以在扩展文件夹创建 syntaxProfiles.json 文件并且为必备的语法指定配置。

这个文件的内容就是简单的键/值对字典，键是定义在 snippets.json 文件中的语法名，值是预定义配置（字符串）的名字或者带有配置选项（object）的字典：

{
    // force XHTML profile for HTML syntax
    "html": "xhtml",

    // create our own profile for XML
    "xml": {
        "tag_case": "upper",
        "attr_quotes": "single"
    }
}

预定义配置

html — 默认输出配置。
xhtml — 与 html 相同，但当输出空元素时，带有关闭斜杠： 。
xml — XML 和 XSL 语法的默认定义，在带有缩进的新行输出每个标签，输出空标签时带有关闭斜杠：  。
line — 用于输出不带有任何缩进和换行的展开缩写。在某些编辑器中，默认应用于类似 JavaScript 或 Python 等编程语言上，以便生成有效的字符串。

创建自己的配置

可以指定一个带有如下键的字典来定义自己的输出配置：

tag_case：生成标签名的大小写，字符串类型。可取的值有：upper（大写）、lower（小写） 和 asis（原样输出）。
attr_case：生成标签的属性名的大小写，字符串类型。可取的值有：upper（大写）、lower（小写）和 asis（原样输出）。
attr_quotes: 围住属性值的括号，字符串，可取的值有： single（单引号） 和 double（双引号）。
tag_nl: 在带有缩进的新行上输出每个标签。可取的值有true (每个标签占一行),false (不格式化) 和 'decide' (字符串；仅块级元素生成新行）。
tag_nl_leaf：当 tag_nl 设置成 true，定义叶块节点（即没有子节点的节点）里面是否格式化换行符。
indent：在新行上缩进标签，布尔值。
inline_break：达到多少行内元素需要强制换行，数值类型。默认值为 3。例如 span*2 将展开成 ，但 span*3 将生成三个  元素，每个占有一行。如果设置为 0 将不再为行内元素换行。
self_closing_tag：空元素是否还有关闭斜杠，如 br 和 img，布尔值。可取的值有 true、 false 和 'xhtml' (字符串；按 XHTML 风格输出关闭斜杠，例如：  )。
filters: 自动应用的过滤器列表。

相关阅读:
[kuangbin带你飞]专题十二基础DP1
bits/stdc++.h
第七届山东省ACM Execution of Paladin（水题）
poj 1523 SPF【点双连通求去掉割点后bcc个数】
hdoj 5112 A Curious Matt
【转】我,一个写代码的
 poj 3177 Redundant Paths【求最少添加多少条边可以使图变成双连通图】【缩点后求入度为1的点个数】
数据结构第二次上机实验【链表实现多项式的加法和乘法】
hdoj 4612 Warm up【双连通分量求桥&&缩点建新图求树的直径】
hdoj 3849 By Recognizing These Guys, We Find Social Networks Useful【双连通分量求桥&&输出桥&&字符串处理】
原文地址：https://www.cnblogs.com/matchless/p/3021671.html

【翻译】Emmet(Zen Coding)官方文档 之六 自定义 Emmet

自定义