Sublime Forum

HTML5 & jQuery Packages

#1

I’m not sure if this is the right place to post this but I have been converting two brilliant Textmate bundles for use with Sublime: Karl Swedberg’s jQuery bundle & John Muhl’s HTML5 bundle. They do take quite a while & there is no converter per se so I have not finished the conversion yet, but you can still use what is already there.

Download & contribute
HTML5 package - https://github.com/mrmartineau/HTML5
jQuery package - https://github.com/mrmartineau/jQuery

I would actually love some help with the conversions so if anyone’s interested, please fork the projects & get stuck in! Also, if anyone has any suggestions or critiques, please let me know.

Cheers guys

Zander

0 Likes
#2

Hey man, I tried adding these guys with the Package Manager (via Add Repo) and ran into a bunch of parse errors.

Probably my fault, but couldn’t find any documentation on the install process from the github pages.

Would love to get this up and running… any tips?

Sample console output:

error: Error parsing snippet: Error parsing plist xml: Failed to open file In file “Packages/HTML5-Sublime-Text-Package/mrmartineau-HTML5-Sublime-Text-Package-d2c610c/Snippets/

.tmSnippet” In file Packages/HTML5-Sublime-Text-Package/mrmartineau-HTML5-Sublime-Text-Package-d2c610c/Snippets/
.tmSnippet

0 Likes
#3

The HTML5 package conversion is complete & it has been added to the ‘Package Control’ repo list.

I have also created a Placeholders package for lorem ipsum text & dummy HTML content. Check it out here: github.com/mrmartineau/Placeholders

0 Likes
#4

If you experience an error like the following when opening Sublime Text:

[code]Unable to run package setup:

Traceback (most recent call last):
File “./PackageSetup.py”, line 155, in upgrade
upgradePackage(pkg, pristinedir, datadir, backupdir)
File “./PackageSetup.py”, line 148, in upgradePackage
os.path.join(backupdir, base), inhibitOverwrite)
File “./PackageSetup.py”, line 64, in upgradeArchive
fname = os.path.join(pkgdir, f)
File “.\posixpath.py”, line 70, in join
UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe2 in position 49: ordinal not in range(128)
[/code]

Go to your Packages directory, then go up a level and into the Installed Packages directory. Delete HTML5.sublime-package.

The new version of Package Control (v1.1.4) should prevent the Installed Packages directory from getting in this state such that PackageSetup.py (part of Sublime Text) fails in this way.

0 Likes
#5

I also updated the HTML5 package because of the issues Windows users were having, apologies for that

0 Likes
#6

After installing ST2 I immediately installed the HTML5 and jQuery packages via the Plugin-Installer. After a while I got really annoyed by the following behavior:

div[TAB]

completes to

<div id="" class=""></div>

which is fine. But when I tab to select the id-Attribute and delete it, then hit tab once again it triggers another completion of the div tag.

0 Likes
#7

I have come across this as well & raised the point in another thread - basically Sublime needs to NOT allow triggers from within another trigger.

0 Likes
#8

The jQuery bundle is now out of date.

Please merge with kswedberges new updates.

Thanks

0 Likes
#9

Hello,
I’ve installed jQuery package - github.com/mrmartineau/jQuery
But could you tell me how to use it ?
Best regards
S.

0 Likes
#10

By first adding to the package manager the url https://github.com/mrmartineau/jQuery, and then selecting it from the list for installing, everything seems fine until this box:

0 Likes
#11

Just a thought, but the installation instructions and Snippets folder might refer to TextMate rather than ST.

You could create a Packages\jQuery folder and perhaps just copy all the .sublime-snippet files to this folder. I’m assuming there is a way to download these files in one go, rather than individually :astonished:

If you just require the snippets then I believe that no other files will be necessary. Andy.

0 Likes
#12

[quote=“syndrael”]Hello,
I’ve installed jQuery package - github.com/mrmartineau/jQuery
But could you tell me how to use it ?
Best regards
S.[/quote]

There are many snippets/tab completions that make writing jQuery a lot faster. So, for example, writing ‘$’ then tabbing would produce: $('string/element/array/function/jQuery object/string, context') where the text between the quotes is hightlighted so you can use your own selector. ‘this’ completes to: $(this)

Basically, most of jQuery’s API has a completion, just include a dot before the function (just as you would if you were normally typing it) then tab & with any luck there’ll be a jQuery snippet for you to use. e.g.

[code].fadeIn[TAB] —> .fadeIn(‘slow/400/fast’)

.hover[TAB] —> .hover(function() {
// Stuff to do when the mouse enters the element;
}, function() {
// Stuff to do when the mouse leaves the element;
});

.animate[TAB] —> .animate({param1: value1, param2: value2}, speed)

.css[TAB] —> .css(‘property’, ‘value’)
[/code]

0 Likes