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