Sublime Forum

How create snippet with multiple values?

#1

Example:

// 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:

${3:is_numeric|is_array|is_string}

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

1 Like

Snippet with prefilled completion list
#2

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.

{ "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:

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.

1 Like

#3

@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!

0 Likes

#4

Yes it is possible:

{ "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:

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,

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:

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:

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:

margin: 10px rightpx bottompx leftpx;

My JS completions demonstrate other techniques. For example, using ā€˜alertā€™ will preprend ā€˜windowā€™ if appropriate.

0 Likes

#5

Thanks man, today i learned something new!

0 Likes

#6

[quote=ā€œiamntzā€]http://i2.kym-cdn.com/photos/images/original/000/199/693/disgusted-mother-of-god.png

Thanks man, today i learned something new![/quote]

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

0 Likes

#7

@pier. Thank you.

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

{ "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 :astonished:

<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>

0 Likes

#8

agibsonsw, clearly you are the snippet master :wink:

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

0 Likes

#9

<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>

0 Likes

#10

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

<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>

0 Likes

#11

Master? No.

He is THE black magic wizard bringing knowledge from outer dimensions for us mere mortals!!! :smiley:

Jokes aside, all that regex stuff is incredibly useful. All this snippet+regex+bat-wing+spider-legs should be in the manualā€¦ or in a tutorial somewhere. :wink:

0 Likes

#12

@qgates

Is it possible to remove a placeholder value after a substitution has been made?

Iā€™m trying to implement the multiple value method you posted with numbers instead of letters.

In the case below, Iā€™m hoping to insert the numerically referenced completion while also omitting the numeric reference itself.

<snippet>

<tabTrigger>test_snippet</tabTrigger>

<content><![CDATA[
${1:(1) FirstOption | (2) SecondOption}${1/(1(?=.*))|(2(?=.*))|.*/(?1:FirstOption)(?2:SecondOption)/i}
]]></content>

</snippet>
0 Likes