【翻译】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 可能会生成如下标签中的一种：

  • <br> — HTML 记号
  • <br /> — XHTML 记号
  • <br/> — 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 相同，但当输出空元素时，带有关闭斜杠：<br />。
  • xml — XML 和 XSL 语法的默认定义，在带有缩进的新行输出每个标签，输出空标签时带有关闭斜杠： <br/>。
  • 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></span><span></span>，但 span*3 将生成三个 <span> 元素，每个占有一行。如果设置为 0 将不再为行内元素换行。
  • self_closing_tag：空元素是否还有关闭斜杠，如 br 和 img，布尔值。可取的值有 true、 false 和 ‘xhtml‘ (字符串；按 XHTML 风格输出关闭斜杠，例如： <br />)。
  • filters: 自动应用的 过滤器 列表。

原文链接

时间： 2024-10-08 11:55:19

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

Zen Coding)官方文档 一览表

语法 Child: > nav>ul>li <nav> <ul> <li></li> </ul> </nav> Sibling: + div+p+bq <div></div> <p></p> <blockquote></blockquote> Climb-up: ^ div+div>p>span+em^bq <div>&l

emmet(Zen coding)帮助文档

葵花宝典终可成,半途而废万事空. 官方地址:http://docs.emmet.io/cheat-sheet/ 我导出了pdf版,需要的同学可以下载: 链接:http://pan.baidu.com/s/1eQ74eSM 密码:laz1 Syntax Child: > nav>ul>li <nav> <ul> <li></li> </ul> </nav> Sibling: + div+p+bq <div>

[转]Commons IO 官方文档

原文地址:http://ifeve.com/commons-io/ 本文翻译自 Commons IO 官方文档 译者:MagicWolf Common IO 是一个工具库,用来帮助开发IO功能 它包括6个主要部分 Utility classes – 包括一些静态方法来执行常用任务 Input – InputStream 和 Reader 实现 Output – OutputStream 和 Writer 实现 Filters – 多种文件过滤器实现(定义了 IOFileFilter接口,同时继承

Android官方文档之App Resources（中）

本文将继续介绍App Resources中的资源类型(Animation.Color State List.String.Style). 如果需要了解Android中的资源规范,您可以访问我翻译的这篇官方文档:<Android官方文档之App Resources(上)>. 如需访问官方原文,您可以点击这个链接:<Resource Types>. 在下一篇文章中(Android官方文档之App Resources(下)),将介绍App Resources中其余的资源类型(Layout

自己翻译 delegation 官方文档

什么是代理,知道怎么用,见过N次.会用代理传值,还不够.代理到底是用来干嘛的嘛?还是看看官方文档吧,自己翻译出来看看是不是通顺 代理: 代理是一个简单高效的模式,尤其是一个类在编程的过程中代表或者需要和另一个类协调的时候.委托对象(委托方)会持有代理对象(代理方)的一个引用,并在合适的时机给代理方发送一个消息.这个消息通知代理方,委托方将要处理一个件事或者刚处理完一件事.代理方可能会对这个消息做出相应,如更新自己或者其他类的界面或状态,并且在一些情况下,代理方可以返回一个值,来影响一个即将被处理

Erlang epmd官方文档中文翻译

本文含epmd简介及官方文档之翻译,文档地址 http://erlang.org/doc/man/epmd.html翻译时的版本 R19.1 中英文水平都不咋地,不通顺处海涵,就酱. 简介 Erlang分布式系统中节点是通过节点名字互相连接的,节点名字为[email protected]_ADDRESS格式. epmd是分布式erlang中比较重要的模块.集群中每台机器都有一个epmd进程,这些进程端口号都用同一个端口号(默认4396端口).所有节点启动的时候都会连接到本机对应的epmd进程,它

uFrame 1.6 官方文档随意翻译（一）

前言: 建议直接看官方英文文档,下面都是一些简单的翻译. The Kernel The Kernel是uFrame的本质,负责处理加载场景,系统和服务. Subsystems 作为一个容器,组成许多Nodes. Subsystems允许你分离项目中的逻辑部分和可复用部分. System Loaders System Loaders常用语初始化信息. Node Elements 主要负责ViewModel(Unity中uFrame框架附带了Controller)部分 For example, Pl

Matlab最新的官方文档中文翻译

文章翻译的是Matlab最新的官方文档R2016b,可能后续如果我还有时间会继续翻译,希望能够帮到大家,翻译的不好请大家不要吐槽. Matlab官方文档地址:http://cn.mathworks.com/help/pdf_doc/matlab/getstart.pdf Desktop Basics  当您启动MATLAB时,桌面以其默认布局显示如下: 说明:请大家对照着英文原版看,我没有截图,因为实在太麻烦 桌面包括以下面板: ?当前文件夹 - 访问您的文件. ?命令窗口 - 在命令行中输入命

谷歌字体（Google Font）初探 [翻译自Google官方文档]

这个指南解释了如何使用Google Font的API,把网络字体添加到自己的页面上.你不需要任何的编码,你所要做的只是添加一个特定的CSS到HTML页面上,然后把字体关联到这个CSS样式. 一个快速的例子: 这是一个例子,复制下面的HTML代码到一个文件中: Html代码   <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.goog