【翻譯】Emmet(Zen Coding)官方文檔之六自定義 Emmet

本文轉載自查看原文 2013-04-15 13:36 3943 文檔/ zencoding/ 中文/ 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: 自動應用的過濾器列表。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端必備工具-Emmet (Zen Coding) Notepad++ 安裝 Zen Coding / Emmet 插件 SublimeText插件Emmet的自定義模板 sublime text插件emmet自定義模板 SublimeText3插件Emmet自定義HTML sublime Text2技巧以及emmet(Zen Coding)快速編寫HTML/CSS代碼怎么在sublime/emmet中加自定義的內容-sublime使用心得（3） vscode編輯器開發react時，設置使emmet支持自定義組件 Cocos2d-x——CocosBuilder官方幫助文檔翻譯1 使用自定義類【翻譯】Emmet (ZenCoding) 縮寫語法

【翻譯】Emmet(Zen Coding)官方文檔 之六 自定義 Emmet

自定義