How create snippet with multiple values?

[brunobatista]

Example:

Code: Select all

// Filter by $2.
\$${1:helloId} = \$this->getState('filter.${2:hello}_id');
if (${3:is_numeric|is_array|is_string}(\$$1))
{
   \$query->where('a.$2 = ' . (int) \$$1);
}


I try use for example:

Code: Select all

${3:is_numeric|is_array|is_string}


But not working, is possible use multiple values to select?

[agibsonsw]

I may have misunderstood your question but I have completions (snippets) that enable the completion of one of a selection of words. Here's a CSS example which I've extracted from my completions file.

Code: Select all

{ "trigger": "position", "contents": "position: ${1:Absolute/Relative/Fixed/Static}${1/(a$)|(r$)|(f$)|(s$)|(ab$)|(re$)|(fi$)|(st$)|.*/?1:bsolute:?2:elative:?3:ixed:?4:tatic:?5:solute:?6:lative:?7:xed:?8:atic/i};$0" },

It appears as follows, with the text 'Absolute/Relative/Fixed/Static' highlighted:

Code: Select all

position: Absolute/Relative/Fixed/Static;

If I overtype the selected text with the letters 'a' or 'ab' it will insert the word 'absolute'. If I Backspace to delete these characters, and type the letter 'r', it will insert the word 'relative' instead. I then tab to finish the snippet.

This is in a completions file but the same principles apply to individual snippets.

[iamntz]

@agibsonsw: it is possible to have the trigger key in other position than begining? Let's say i want to have display: [t]able/table-[c]ell/table-[r]ow and so on. Right now i used [t], [ta], [tab] for every variant. Thanks!

[agibsonsw]

Yes it is possible:

Code: Select all

{ "trigger": "display", "contents": "display: ${1/(bl|ta)$|(ce|ca|c|co|f|fo|h|he|r|ro)$|.*/?1:inline-:?2:table-/i}${1:Inline-BLock-TAble-List-RUn-in-CEll-CAption-COlumn-Footer-Header-ROw-group/None}${1/(b$)|(i$)|(ru$)|(t$)|(l$)|(bl$)|(ta$)|(ce$)|(ca$)|(c$)|(co$)|(f$)|(fo$)|(h$)|(he$)|(r$)|(ro$)|(n$)|(no$)|.*/?1:lock:?2:nline:?3:n-in:?4:able:?5:ist-item:?6:ock:?7:ble:?8:ll:?9:ption:?10:olumn:?11:lumn-group:?12:ooter-group:?13:oter-group:?14:eader-group:?15:ader-group:?16:ow:?17:w-group:?18:one:?19:ne/i};${1/($)|.*/?1:I BL TA L RU CE CA CO F H RO N/}" },

It displays like this:

Code: Select all

display: Inline-BLock-TAble-List-RUn-in-CEll-CAption-COlumn-Footer-Header-ROw-group/None;

with the whole section after display: highlighted. If you press Delete it shows,

Code: Select all

display: ;I BL TA L RU CE CA CO F H RO N

indicating the letters you can use. (This last section in the snippet can be removed.) So, typing 'ta' will result in:

Code: Select all

display: inline-table;

My CSS completions are at my GitHub. There are other variations in this file. For example, using the completion 'margin4' will display:

Code: Select all

margin: top right bottom left;

If you over-type 'top' with '10px' it will result in the following, and I can Tab to add the other pixel values:

Code: Select all

margin: 10px rightpx bottompx leftpx;

My JS completions demonstrate other techniques. For example, using 'alert' will preprend 'window' if appropriate.

[iamntz]

Thanks man, today i learned something new!

[pier]

Thanks man, today i learned something new!

There's no other way to put it.

MOTHER OF GOD!

This opens up a whole new world of possibilities, it should be a sticky or in the documentation.

Thanks AGibson

[agibsonsw]

@pier. Thank you.

The following JS example completion pre-pends Math to abs() if there is not already something before the dot .

Code: Select all

{ "trigger": "abs", "contents": "${TM_CURRENT_WORD/\\.\\W*|\\w+|(.*)/(?1:Math\\.)/}abs(${1:x})$0" },

It's a completion but the same principle applies to a snippet.

..and here's my MEGA-Snippet to study

Code: Select all

<snippet>
   <content><![CDATA[/* ${1} ${1/.*(\.)$|.*/?1::\n/}${1/($)|.*(?:^| )((b)|(c)|(d)|(e)|(f)|(h)|(l)|(m)|(o)|(p)|(q)|(r)|(t)|(v)|(w)|(z)).?$|.*/?1:Type to for top etc, followed by a space:?3:BAckground-Attach etc BOTtom BOrder-Collapse-Spacing-Bottom\(Color\/Style\/Width\) etc BC BS BW:?4:CLear CLIp COlor CONtent CUrsor Counter-Inc-Reset Caption-Side:?5:DIsplay DIRection:?6:Empty-Cells:?7:FOnt F-Family-SI\/ST\/W\/V FLoat:?8:HEight:?9:LEft LEtter-Spacing Line-Height List-Style I\/P\/T:?10:MArgin T\/R\/B\/L MAx\/MIn-Height\/Width:?11:OUtline-Color-Style-Width OVerflow:?12:PAdding T\/R\/B\/L POsition-Abs\/Rel\/Fixed\/Static:?13:QUotes:?14:RIght:?15:TOp TExt-Align\/D\/I\/T:?16:Vertical-Align VIsibility:?17:WHite-space WIdth WOrd-spacing:?18:Z-Index/i}${1/($)|.*(?:\b| )((baa)|(bap)|(bar)|((b[trbl]?s)|(ous))|(b[trbl]?w|ouw)|(boc)|(cl)|(cu)|(cs)|(dir)|(di)|(ec)|(fl)|(fsi)|(fst)|(fv)|(fw)|((bot|to|le|ri|he|wi|mat|mar|mab|mal|ma)|(mah|maw)|mih|miw|pa[trbl]?|tei)|((lh)|ls)|(lsi)|(lsp)|(lst)|(ov)|(po)|(tea)|(ted)|(tet)|(va)|(vi)|(wh)|(wo)|(zi))( |_[a-z0-9-]{0,8})$|.*/?3:attachment\: fixed scroll:?4:left center right bottom center top:?5:repeat no-repeat repeat-x repeat-y:?6:style\: dashed dotted double groove inset outset ridge solid none(?7: hidden):?9:width\: thin thick medium:?10:collapse separate:?11:left right both:?12:default pointer crosshair move *-resize text wait help progress auto:?13:top bottom:?14:ltr rtl:?15:inline inline-block list-item run-in table-cell-column-row -header-footer -group none:?16:show hide:?17:left right none:?18:smaller larger x\(x\)-small-large medium:?19:italic oblique normal:?20:small-caps normal:?21:bold bolder lighter normal xxx:?22:length percentage(?23: auto:?24: none):?25:length percentage (?26:number )normal:?27:none:?28:inside outside:?29:disc circle square decimal-leading-zero lower-upper-greek-latin-roman armenian georgian:?30:visible hidden scroll auto:?31:absolute relative fixed static:?32:left center right justify:?33:underline overline line-through blink none:?34:uppercase lowercase capitalize none:?35:baseline sub super top text-top middle bottom text-bottom length percentage:?36:visible hidden collapse:?37:nowrap pre pre-wrap pre-line normal:?38:length normal:?39:integer auto/gi} */$0${1/\\|\.$|(?:\b| )((ba((a)|(c)|(i)|(p)|(r))?)|(bot)|(bo((c)|(s))?)|(((bb)|(bl)|(br)|(bt)|b)((c)|(s)|(w))?)|(cli)|(con)|(co)|(cu)|(cl)|(c((i)|(r)))|(cs)|(dir)|(di)|(ec)|((ff)|(fsi)|(fst)|(fv)|(fw)|fo)|(fl)|(he)|(les)|(le)|(lh)|(ls((i)|(p)|(t))?)|(((ma)|(mi))((h)|(w)))|(((ma)|(pa))((b)|(l)|(r)|(t))?)|(ou((c)|(s)|(w))?)|(ov)|(po(?:(a)|(r)|(f)|(s))?)|(qu)|(ri)|(to)|(?:te((a)|(d)|(i)|(t)))|(va)|(vi)|(wh)|(wi)|(wo)|(zi)|(!)|([0-9]*)(cm|em|ex|in|mm|pt|pc|px|\%)(?:(4)|3)(!)?)( |_|\.|$)|( {2,}|\t)/?2:;\nbackground(?4:-attachment:?5:-color:?6:-image:?7:-position:?8:-repeat)\: :?9:;\nbottom\: :?10:;\nborder(?12:-collapse:?13:-spacing)\: :?14:;\nborder(?16:-bottom:?17:-left:?18:-right:?19:-top)(?21:-color:?22:-style:?23:-width)\: :?24;\nclip\: :?25:;\ncontent\: :?26:;\ncolor\: :?27:;\ncursor\: :?28:;\nclear\: :?29:;\ncounter-(?31:increment:?32:reset)\: :?33:;\ncaption-side\: :?34:;\ndirection\: :?35:;\ndisplay\: :?36:;\nempty-cells\: :?37:;\nfont(?38:-family:?39:-size:?40:-style:?41:-variant:?42:-weight)\: :?43:;\nfloat\: :?44:;\nheight\: :?45:;\nletter-spacing\: :?46:;\nleft\: :?47;\nline-height\: :?48:;\nlist-style(?50:-image:?51:-position:?52:-type)\: :?53:;\n(?55:max:?56:min)(?58:-height:?59:-width):?60:;\n(?62:margin:?63:padding)(?65:-bottom:?66:-left:?67:-right:?68:-top)\: :?69:;\noutline(?71:-color:?72:-style:?73:-width)\: :?74:;\noverflow\: :?75:;\nposition\: (?76:absolute:?77:relative:?78:fixed:?79:static):?80:;\nquotes\: :?81:;\nright\: :?82:;\ntop\: :?83:;\ntext(?84:-align:?85:-decoration:?86:-indent:?87:-transform)\: :?88:;\nvertical-align\: :?89:;\nvisibility\: :?90:;\nwhite-space\: :?91:;\nwidth\: :?92:;\nword-spacing\: :?93:;\nz-index\: :?94: !important:?95:$95$96 $96 $96(?97: $96)(?98: !important)/gi};
]]></content>
   <tabTrigger>propx</tabTrigger>
   <scope>source.css  meta.property-list.css</scope>
   <description>po to, etc</description>
</snippet>

[qgates]

agibsonsw, clearly you are the snippet master

So here's a question for you. I was wondering whether it was possible to do more than just mirror fields in snippets. For example:

Snippet field 1: I'm Typing In Title Case
Autocompleted field 2: i'm typing in title case

As I type in field 1, field 2 is automatically completed but with some simple adjustment processing, title case in the above example but I can think of more valuable use-cases. Is that possible?

S

[agibsonsw]

Code: Select all

<snippet>
    <content><![CDATA[
${1:type here}: title-case is:
${1/\b(\w*)\b/\u\1/g}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>test</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

[agibsonsw]

A more complete version, that lower-cases all letters after the first-letter of each word:

Code: Select all

<snippet>
    <content><![CDATA[
${1:type here}: title-case is:
${1/\b(\w)(\w*)\b/\u\1\L\2\E/g}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>test</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>