Home Download Buy Blog Forum Support

jQuery Completions

jQuery Completions

Postby agibsonsw on Fri Jun 01, 2012 3:13 pm

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 :) ]

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: Select all
   { "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 }
      ]
   },

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

Code: Select all
    $('#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: Select all
    $('#thing').click(function () {
       
    })

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.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: jQuery Completions

Postby agibsonsw on Fri Jun 01, 2012 3:33 pm

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

Code: Select all
[
   {
      "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:

Code: Select all
{ "keys": ["ctrl+shift+c"], "command": "run_macro_file", "args": {"file": "Packages/User/compl.sublime-macro"} }
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: jQuery Completions

Postby iamntz on Fri Jun 01, 2012 5:22 pm

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!
iamntz
 
Posts: 898
Joined: Fri Apr 29, 2011 8:52 am
Location: Romania

Re: jQuery Completions

Postby agibsonsw on Fri Jun 01, 2012 7:38 pm

iamntz wrote: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!

No problem :D

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:

Code: Select all
      <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.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: jQuery Completions

Postby agibsonsw on Mon Jun 04, 2012 12:02 pm

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

GitHub
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm


Return to Plugin Announcements

Who is online

Users browsing this forum: Google [Bot] and 5 guests