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

時間  2019-11-12
標籤 翻譯 emmet zen coding 官方 文檔 之六 自定義 简体版
原文   原文鏈接

【說明】本系列博文是依據 Emmet 官方文檔翻譯的，原文地址爲：http://docs.emmet.io/，部份內容已經在博主以前的博文中節選過，爲方便已經收藏過以前博文的朋友，沒有刪除這些博文，僅將其完整的收錄於本系列中。css

自定義

Emmet 提供了大範圍的微調，以使你能夠用之提高本身的插件體驗。幾乎全部的正式開發的編輯器插件 (除了 PSPad 和基於瀏覽器的) 都有 擴展支持： 一個用於擴展 Emmet能夠放置 json 和 js 文件的文件夾。請參考隨編輯器插件發佈的 README 文件，找出 Emmet 在哪兒搜索擴展。html

擴展文件夾中的每一個 .js 文件都在插件啓動時被載入和執行。使用 js 文件創建本身的 過濾器 或 動做：可使用 Emmet 模塊並使用 JavaScript 縮寫腳本與編輯器。
node

使用 .json 文件可以微調 Emmet 工具的不一樣部分：git

snippets.json
添加本身的片斷或升級已有的片斷。

snippets.json

在擴展文件夾內建立 snippets.json 文件來添加或者覆蓋片斷。此文件的結構與 原始文件 相同：在最頂級定義片斷所屬的 語法名稱 ，第二級有下面幾段：github

  • abbreviations 或 snippets 包含 不一樣類型 的片斷定義。
  • filters 包含用逗號間隔的當前語法的默認 過濾器 列表。若是沒有定義本屬性，則默認使用 html 過濾器。
  • extends: 當前語法所繼承的片斷定義的語法名稱。例如，sass 語法繼承自 css ，不過能夠爲這個語法定義創建本身的或者覆蓋一些 SASS 特定的片斷。

走入完成後，用戶的 snippets.json 與原始文件遞歸合併，添加或升級縮寫和片斷。web

文本片斷

在語法定義的 snippets 一節，能夠建立普通的文本片斷，你編輯裏的同樣漂亮。能夠在片斷中使用 tabstops ，當縮寫展開時可使用 Tab 鍵在它們之間跳轉（前提是所用的編輯器支持 tabstops）。Emmet 採用 TextMate 編輯器的 tabstops 格式：正則表達式

  • $1 或 ${1}
  • ${1:hello world} — 帶有佔位符的 tabstop

注意 ${0} 或 $0 tabstop 在相似於 TexeMate 或 Eclipse 等一些編輯器中有特殊含義：用做離開 「tabstops 模式」的最後一個光標位置，因此最好從 1 開始使用 tabstops 。編程

變量

能夠在片斷中使用 片斷  來輸出預約義數據。例如 HTML 語法的 html:5 片斷是這樣定義的：json

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

在上面的盒子中， ${lang} 用於引用定義在 snippets.json 文件的 variables 一節的 lang 變量。例如，所用的母語是俄語，能夠直接使用 ru 值覆蓋 lang 變量，並保持原始的片斷定義。c#

也可使用行內縮寫屬性覆蓋變量值： 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: 自動應用的 過濾器 列表。

 

原文連接

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程