Sublime Forum

jQuery Completions

#1

On GitHub I have a jQuery completions file which you/all are welcome to use, modify, etc. You might create a jQuery folder within your Packages area, and copy the file to there. [You can rename the file if you like :smile: ]

It uses the scope source.js.jquery so you will need a jQuery syntax file - *mrmartineau *has one available via Package Control or GitHub. He also has a collection of jQuery snippets, but my preference is to use a single completions file. Alternatively, if you mainly use jQuery anyway, you could just modify the scope to source.js; this way, the completions will be available in any .js file.

I use the following key-bindings to allow me to use one completion within another:

[code] { “keys”: “ctrl+alt+right”], “command”: “insert_best_completion”, “args”: {“default”: “”, “exact”: true} },
{ “keys”: “ctrl+alt+right”], “command”: “insert_best_completion”, “args”: {“default”: “”, “exact”: false},
“context”:

		{ "key": "setting.tab_completion", "operator": "equal", "operand": true }
	]
},
{ "keys": "ctrl+alt+right"], "command": "replace_completion_with_next_completion", "context":
	
		{ "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
		{ "key": "setting.tab_completion", "operator": "equal", "operand": true }
	]
},
{ "keys": "ctrl+alt+left"], "command": "replace_completion_with_prev_completion", "context":
	
		{ "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
		{ "key": "setting.tab_completion", "operator": "equal", "operand": true }
	]
},[/code]

For example, if I’ve started the ‘click()’ completion it looks like the following - with the phrase ‘[eventData, ]’ highlighted:

    $('#thing').click([eventData, ]handler)

I might press Delete if I don’t need the event data; press Tab to highlight the word ‘handler’; press the right-arrow to get the end of this word, and then press Ctrl-Alt-Right arrow to obtain the following:

[code] $(’#thing’).click(function () {

})[/code]

I can then continue to tab through the (two or more) completions. This works for either the word ‘handler’ or ‘callback’ - they both invoke an anonymous function.

0 Likes

#2

To create the anonymous function within the current completion can be made even easier with the following macro:

{ "args": { "by": "characters", "forward": true }, "command": "move" }, { "args": { "default": "", "exact": false }, "command": "insert_best_completion" } ]
With this macro assigned to a key-binding, it would not be necessary to de-select the words ‘handler’ or ‘callback’. That is, Tab so that ‘handler’ is highlighted, and press your key-binding to immediately replace with the anonymous function.

Save the macro as, for example, ‘compl.sublime-macro’ and add the following to your Key Bindings- User:

{ "keys": "ctrl+shift+c"], "command": "run_macro_file", "args": {"file": "Packages/User/compl.sublime-macro"} }
0 Likes

#3

Wow man, thanks for the snippets!
I knew that sublime/textmate can do this kind of magic, but the documentation wasn’t too clear for me.

Thanks again!

0 Likes

#4

[quote=“iamntz”]Wow man, thanks for the snippets!
I knew that sublime/textmate can do this kind of magic, but the documentation wasn’t too clear for me.

Thanks again![/quote]

No problem :smiley:

I found that, although I borrowed a jQuery.tmLanguage syntax file, the jQuery methods were all being scoped as, for example, ‘meta.selector.js’. That is, they are being caught within the ‘javascript.tmLanguage’ file. If you modify ‘javascript.tmLanguage’ and find (or create) a scope for support.function.jquery.js as follows, then you can colour-code them in your theme’s file:

<dict> <key>match</key> <string>(?&lt;=\.)(add|addClass|after|ajax|ajaxComplete|ajaxError|ajaxPrefilter|ajaxSend|ajaxSetup|ajaxStart|ajaxStop|ajaxSuccess|always|andSelf|animate|append|appendTo|attr|before|bind|blur|Callbacks|change|children|clearQueue|click|clone|closest|contains|contents|css|data|dblclick|delay|delegate|dequeue|die|disable|done|each|empty|end|eq|error|extend|fadeIn|fadeOut|fadeTo|fadeToggle|fail|filter|find|fire|fired|fireWith|first|focus|focusin|get|getJSON|getScript|globalEval|grep|has|hasClass|hasData|height|hide|holdReady|hover|html|inArray|index|innerHeight|innerWidth|insertAfter|insertBefore|is|isArray|isDefaultPrevented|isEmptyObject|isFunction|isImmediatePropagationStopped|isNumeric|isPlainObject|isPropagationStopped|isRejected|isResolved|isWindow|isXMLDoc|jQuery|keydown|keypress|keyup|last|live|load|lock|locked|makeArray|map|map|merge|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|next|nextAll|nextUntil|noConflict|noop|not|notify|notifyWith|now|off|offset|offsetParent|on|one|outerHeight|outerWidth|param|parent|parents|parentsUntil|parseJSON|parseXML|pipe|position|post|prepend|prependTo|prev|prevAll|preventDefault|prevUntil|progress|promise|prop|proxy|pushStack|queue|ready|reject|rejectWith|remove|removeAttr|removeClass|removeData|removeProp|replaceAll|replaceWith|resize|resolve|resolveWith|scroll|scrollLeft|scrollTop|select|serialize|serializeArray|show|siblings|size|slice|slideDown|slideToggle|slideUp|state|stop|stopImmediatePropagation|stopPropagation|submit|text|then|toArray|toggle|toggleClass|trigger|triggerHandler|trim|type|unbind|undelegate|unique|unload|unwrap|val|when|width|wrap|wrapAll|wrapInner)\b(?=\()</string> <key>name</key> <string>support.function.jquery.js</string> </dict>
It is advisable to copy the file before modifying it. Andy.

0 Likes

#5

I’ve modified my jQuery completions file by adding ‘-meta.selector’ to the scope. This will prevent the completions appearing within $(‘here’).

GitHub

0 Likes