TextMate Bundle for jQuery

read 57 comments

JonBob and I have been working on a TextMate bundle for jQuery over the past few weeks. If you’re not familiar with TextMate and you own a Mac, you should definitely check it out. It has saved me countless hours of repetitive keystrokes with its bundles, which contain commands, code snippets, templates, and macros that are triggered by pressing special key combinations or clicking menu items.

jquery bundle for textmate

The jQuery bundle that we put together mostly consists of “tab triggers” for various functions, but it also includes context-sensitive help derived from the online documentation and some nice syntax highlighting. After selecting jQuery as your file type in TextMate, you could, for example, type ready and press the Tab key to produce this:

$(document).ready(function() {
  // Stuff to do as soon as the DOM is ready;
});

It’ll then select the commented line (line 2 in this example) for you so you can start typing right away, replacing the comment with your code. Hit the Tab key once more and it drops you onto a new line below the closing brackets. If you want to learn more about a function that you’ve typed in, just click anywhere inside its name and press Control + H. You’ll get official documentation on the function.

Get the Bundle

So, how can you get this cool jQuery bundle and speed up your coding? First, you’ll need TextMate, of course. If you don’t have it yet, download the 30-day trial. Then you’ll need to either check out the bundles from the Subversion repository (advanced) or download and install the GetBundles bundle.

Update

I’m no longer supporting the version in the Macromates subversion repository. For the most recent version, with updates for version 1.3.x, download (or clone) the jQuery TextMate bundle at GitHub.

comment feed

57 comments

  1. Hello!

    I am using your jQuery bundle but one thing really annoys me: I can’t use the jQuery bundle when the pagetype is set to HTML.

    The Javascript bundle can handle it. When I add to my document the Javacript tab trigger is fired by entering ‘fun’ and pressing TAB.

    Your bundle however doesn’t seem to react so what do I have to edit so that I can use the jQuery commands even when the current language is set to ‘HTML’?

    Thanks! :)

  2. Ah sorry for the double response.. I think I got it:

    Just edit the snippets and change the Scope Selectors from ‘source.js.jquery’ to ‘source.js’ and you can use your jQuery bundle even inline on a normal HTML document without the need to use the HTML bundle. :)

  3. Michael Grunewalder

    First of all, thanks for a great bundle :-)
    You can also activate it in the HTML bundle:

    {
    name = 'source.js.jquery.embedded.html';
    begin = '(?:^\s+)?(<)((?i:script))\b(?![^>]*/>)';
    end = '(?<=</(script|SCRIPT))(>)(?:\s*\n)?';
    patterns = (
    { include = "source.js.jquery"; }
    );
    },

  4. Excellent, Michael! Thanks for that tip on activating it in the HTML bundle. I’ve been wanting to do that for a while.

    Your comment has inspired me to update the bundle, too, so look for a newer version within the next couple weeks!

  5. Thanks a lot for this, Karl!

  6. Sure thing, Klaus. I’m a little embarrassed now, though, because I haven’t updated it yet. And it’s in serious need of some love. I’ll send you a revised bundle soon and update this entry/link.

  7. ScottBruin

    Make sure you put the above code from Michael above the current javascript one in the HTML bundle, otherwise it won’t work.

  8. Robert

    It would be nice if you altered the bundle to use cross-platform friendly filenames (no colons, etc), so that those of us working with the E Texteditor in windows could use it as well.

  9. I am having no luck with this. I downloaded the get bundle and there is nothing to really double click on it is a zip file uncompressed there are folders and I can double click on which puts them in Dan Stein’s Bundles but they don’t do anything from there. I select one like install but I get no error and no list

    So not sure where to go from here. I can see the bundle on the textmate site but not sure what I would do with it from there.

    Help!

  10. demods

    I use e-TextEditor on Windows XP. It uses same bundles as TextMate. I downloaded GetBundles bundle. I just extracted it in “bundles” folder (nothing to double-click?). But when I click “Install Bundle” nothing happens but just an empty drop down list. I know there are lots of bundles on macromates svn but I cannot svn them as some file names are not compatible with the windows system. GetBundles bundle don’t work too.

    So is there a zipped version of JQuery bundle, so we can extract zip into bundles directory?

    Regards…

  11. Jonathan and I have been distracted for quite some time by the book writing, but now that we’re finished with that, I’m hoping we can spend some time in the coming weeks updating the bundle. When the update is ready, I’ll post a new entry here. If I forget to include a link to a zip file, please gently remind me.

  12. Geoff (gtcaz)

    I’ll take a look at this bundle and see what can be done to make it compatible with the e Text Editor. I don’t know if the Bet Bundles command will work out of the box, and as other’s have noted there are Mac filenames which are illegal under Windows.

    For now you can use the ebundles repository (http://ebundles.googlecode.com/svn/trunk/), which has bundles which are fully ported to e, and the tmbundles4win repository which is the raw TextMate (MacroMates) repository with Windows-legal filenames but absolutely no porting done (http://tmbundles4win.googlecode.com/svn/trunk/). This latter repo may have many commands that will not currently work OOTB with e, but at least all the filenames are legal (and you can get snippets and syntax going right away). The jQuery bundle is here: http://tmbundles4win.googlecode.com/svn/trunk/Bundles/jQuery.tmbundle/

    Most things that don’t work under e are bundle commands that use Mac-only features (AppleScript being one of the most notable) and Macros (yet to be implemented).

  13. Kuddl

    Hi there,
    I am highly interested in that bundle. But I am experiencing the same problems on Win XP like my friends before me.
    Is there a update and a ZIP File on the way?
    Greez
    Kuddl

  14. Matt

    Hello! I am trying to scope this bundle to HTML, and I’m having difficulty doing so. I put in Michael’s code above the JavaScript scope code in the bundle but I get an error on line 1:2. What am I doing wrong?

    Thanks very much for your hard work on the bundle. It looks great!

    Regards,
    Matt

  15. Steve

    Hello. Great bundle, but I also would like it to work on embedded JS code in my HTML, PHP, and ASP documents.

    I saw the above post, saying to put this in:


    {
    name = 'source.js.jquery.embedded.html';
    begin = '(?:^\s+)?(]*/>)';
    end = '(?<=)(?:\s*\n)?';
    patterns = (
    { include = "source.js.jquery"; }
    );
    },

    But put it where, exactly? In this bundle language module, or in the html language module?

    And WHERE in the language module code block?

    Thanks.

  16. Hi Steve,

    Try this. In the Edit Bundle list, expand the HTML bundle and look for the HTML with the gray “L” next to it. Click on that and then click in the text area to the right. Select all (Command-a) and then copy (Command-c). Paste it into a new text file and save it in case something doesn’t work right. Paste it into another text file and then do a Find for this line:

    		{	name = 'meta.tag.structure.any.html';

    Right before that line, but after the previous line, paste this:

    		{	name = 'source.js.jquery.embedded.html';
    			begin = '(?:^\s+)?(<)((?i:script))\b(?![^>]*/>)';
    			end = '(?<=</(script|SCRIPT))(>)(?:\s*\n)?';
    			captures = {
    				1 = { name = 'punctuation.definition.tag.html'; };
    				2 = { name = 'entity.name.tag.script.html'; };
    			};
    			patterns = (
    				{	name = 'comment.line.double-slash.js';
    					match = '(//).*?((?=</script)|$\n?)';
    					captures = { 1 = { name = 'punctuation.definition.comment.js'; }; };
    				},
    				{	name = 'comment.block.js';
    					begin = '/\*';
    					end = '\*/|(?=</script)';
    					captures = { 0 = { name = 'punctuation.definition.comment.js'; }; };
    				},
    				{	include = '#php'; },
    				{	include = 'source.js.jquery'; },
    			);
    		},

    Close the bundle editor. You might then have to go to Bundles > Bundle Editor > Reload Bundles.

    That worked for me. Hope it works for you as well!

  17. Very strange– it looks like it should work, but for some reason I can’t get it to active in the HTML bundle, either. I’m pointing right to it, like the example you provided. I even went in and modified the existing javascript include and added the { include = ‘source.js.jquery’; }, and it still won’t activate. Ah well.

    Thanks for the bundle though! It’s very handy to have so I don’t have to go to docs.jquery.com for simple things any more!

  18. fpaim

    I think the scope of the bundle should be source.js by default. I’ve tried the solutions here, it does not seem to work for me (except changing the scope like the second comment).

    This is a great bundle, thanks to everyone involved.

  19. Chris

    I think the problem with editing the grey “L” in the HTML bundle is that it does not permanently save the jquery additions. It works great for the current session but as soon as I exit TextMate, the jquery additions are gone.

  20. Chris

    Okay, in my previous post the Bundle editor wasn’t saving changes because it didn’t have permission to. If this happens to you, go to /Users/{user}/Library/Application Support/TextMate/Bundles and check if HTML.tmbundle owner is set to you. In my case, is was set to root. Changing it to {user} made the edits to the HTML language bundle stick.

  21. thanks a lot for reporting on your success, Chris! I’m sure it’ll come in handy for others who may experience the same problem.

  22. What’s the copyright status of your bundle? Do you own the copyright, or might some employer or client own it? I’d like to use it to make something similar for Emacs, but absent a clear open-source license, I’m a little nervous that I could be “tainted” by reading the code.

    (Yeah, I know we shouldn’t have to worry about this kind of stuff, but experience has shown time and time again that we do.)

  23. Hi Kragen,

    I posted a reply to the same question earlier today. Basically, there is no copyright/license on the bundle. You are free to do with it whatever you want. If you need something more official, let me know.

  24. Unfortunately in countries that are parties to the Berne Convention, such as the US, things get copyrighted just by being written down, stay copyrighted for a century or so, and even though you are a good honest guy who wouldn’t dream of suing people for using your work without paying you, your employer, or ex-employer, or heirs, might not feel the same way if you get hit by a bus tomorrow.

    If you just slap a notice on it with, say, the MIT license in it, and possibly get any other parties who might have a copyright claim to sign off on that, it’ll avoid all those hassles.

  25. Hi Kragen,

    I’ve added the dual MIT and GPL license in a comment in the Language/syntax file of the version on GitHub. It’s also noted on the project’s wiki page.

  26. Val

    I’ve tried copying the above code into the HTML bundle as specified, and I still can’t get the Jquery bundle to trigger for embedded javascript in an html page.

    @Karl – would it be possible to include the full (working) HTML bundle code in the repository hosting the Jquery bundle, with instructions on how to implement? That would be super helpful.

    Thanks again for a great bundle!

  27. To be a bit more exlicit for Mac, git users but newbies to textmate:

    - cd /Applications/TextMate.app/Contents/SharedSupport/Bundles
    - git clone git://github.com/kswedberg/jquery-tmbundle.git
    - mv jquery-tmbundle jquery.tmbundle

    If Texmate is open hit Bundles->Bundle Editor->Reload Bundles

    • Thanks for the command line sequence, John. I’d recommend cloning the bundle to a different directory, though, so the first line would read:
      - cd ~/Library/Application\ Support/TextMate/Bundles

  28. Paulo

    The “GetBundles bundle” is broken.

  29. John

    Wondering if there have been any further developments on the HTML / jQuery issues reported here. I checked out the latest bundles from svn, made the edits to HTML as mentioned above, checked file permissions, and still cannot get jQuery bundle to work in HTML. This is a great tool! Would be even better if I didn’t have to select jQuery before using it.

  30. You. Are. The. Bomb.

    Love TextMate.
    Love jQuery.

    Great work!

  31. Alex

    Wow. I just started using TextMate and am amazed at the power. And this bundle is sweet! Thank you!

  32. codesponge

    It took me a bit of trial and error to get the jquery bundle to be active in html. Then I had to do it again on my laptop. So I pasted the language files up on github. So when I can set it up quickly again when I have to. You can use my files to do the same.
    after you have installed the jquery-tmbundle
    (http://github.com/kswedberg/jquery-tmbundle/tree/master)
    you can replace your html language file with…
    http://gist.github.com/164966

    and your jquery language file with…
    http://gist.github.com/164958

    good luck

    billychamp (codesponge)

  33. Daniel Shanahan

    I cannot get the “ready” tab to work, even in a .js file. However, it will work when I choose it from the drop down menu with the mouse. I’d rather do the quick-key method. Also, I have replaced my HTML and JQuery language files as suggested above. So, for me, the bundle works, but not the quick keys. Any suggestions?

    Thanks.

    daniel

    • That’s strange, Daniel. Are you using the one from GitHub or the one from Macromates? Do any of the other tab triggers work for you?

      • Duane

        I can’t get mine to work either. I’ve updated to the newest version on GitHub. I didn’t change anything and am just trying to use it with .js files. Any ideas why it’s not working?

        Thanks!

        Duane

      • Daniel Shanahan

        Thanks for your prompt reply, Karl. I downloaded the bundle from GitHub. Also, some clarification: the jQuery tab triggers DO work in an HTML document (originally, I forgot to add the &lt script &gt tags). However, it does not work in a .js document. The JavaScript triggers work in both a JavaScript document and a jQuery document. However, the jQuery triggers do not work in either the JavaScript document nor the jQuery document.

        It could be that I am doing this incorrectly. I am first creating a document; second, I change it from a Plain Text to a jQuery document; third, I save the document; fourth, I try the tab triggers.

        Any ideas?

  34. This is excellent, thanks very much.

    Love learning jQuery and this is gonna help alot.

    P

  35. Brian Egan

    I grabbed the latest version from Github and tried installing it into Textmate, but the tab triggers don’t work for .js files, just like Daniel above. I can select the “ready” or “plugin” etc from the Bundles menu and it outputs properly, but when I’m in my .js files I can’t just type “ready” + Tab.

    Any suggestions?
    Thanks!

    • Brian Egan

      Cancel that. I’m just a Textmate nub =P Works fine.

      • Wills

        I too am a textmate nub, how did you do it :P!

        I’ve tried saving my doc as a js.jquery and as just .jquery but all the highlighting goes and tab triggers don’t work :(

        What are the steps once installed :(

        • You should be saving those files with a .js extension, since they’re JavaScript files. You may need to manually select “jQuery (JavaScript)” from the Language menu that appears in the toolbar/status bar at the bottom of your document (just to the right of Line number and Column number).

    • Daniel Shanahan

      I must be dense. I still cannot get the triggers to work. When mouse over Bundles/JavaScript jQuery/document ready, for instance, it works fine. However, when I type “ready” and tab it does not work.

      Can anyone shed any light on my ignorance, please?

      Thanks.

      • Daniel Shanahan

        By the way, I am doing this in a .js file. I saved one as a jQuery (JavaScript) and another as a JavaScript file. Both files have a .js extension.

        • Jonathan

          I’m having the same problem

        • I’ll look into this, but I’m having a hard time troubleshooting because I can’t replicate the issue. I’m guessing it’s more of a TextMate issue than anything else. Make sure you’ve updated to the most recent version of TextMate.

  36. zach

    I don’t know how I coded without this. Seriously great bundle, Karl.

  37. mikezang

    I have a code as below, I want to show table if sFilenmae’s value is changed, but my code doesn’t work, can you help me?

    画像ファイル名
    商品コード
    アップロード結果

    $(document).ready(function() {
    $('.result').hide();
    $('#filename').change(function() {
    $('.result').show();
    });
    });

  38. Wow, thank you so much for this excellent bundle. I know this is a really old post, but just wanted to say thanks nonetheless. You guys have just made TextMate even sweeter.

  39. After spending about an hour trying to figure out how to get this plugin to work with the HTML bundle, I found a site that shows you a great location where to place the code necessary for the jquery bundle to work in html files. —> http://imulus.com/blog/bruce/javascript/how-to-set-up-a-sexy-jquery-textmate-bundle/

5 Pings

  1. [...] einer beliebten Bibliothek dürfen die Werkzeuge nicht fehlen. Für mich wichtig war das TextMate-Bundle für jQuery. Dies macht natürlich nur Sinn, wenn man TextMate und einen Mac besitzt. Über das Blog von Jens [...]

  2. [...] Bundle – The jQuery bundle, even though it was first released in 2006, can still be very useful if you work a lot with jQuery. [...]

  3. [...] e não custa um rim (sim, estou gritando com a Adobe). Brinque com os Bundles (o do Wordpress e Jquery são matadores) e plugins e descubra o mundo maravilhoso que existe fora das IDEs sem foco no [...]

Sorry, but comments for this entry are now closed.