Sunday, December 2, 2012

jQuery code hinting in Notepad++

The files required to get jQuery code hinting and autocompletion in Notepad++ can now be found on GitHub, or downloaded at the bottom of this article. Enjoy!


I'm sure if you're reading this then you, like me, are a fan of Notepad++ for all your text-editing needs. I often use Notepad++ for editing JavaScript, and I often have the auto-completion feature enabled, which is great, but not so great when the file you're working on is full of jQuery methods. Fortunately, it's possible to define your own languages, auto-complete method signatures and all.

So that's what I've done. Now, obviously jQuery isn't a language in its own right, so I've tried to bring the normal Notepad++ JavaScript styles into this as well. There are also a couple of notable exceptions. I've not included the live or die methods, due to the fact that they are deprecated as of jQuery 1.7. I've also not managed to find a reliable way of including any selectors, and I have't yet added any methods that don't belong to jQuery itself (such as those of the new Callback object).

But other than those small omissions, I personally think this is quite useful and will be using it myself. Feel free to comment if you notice anything I've missed out or got wrong.

Files

notepadplus-jQuery-master.zip - Contains userDefineLang_jQuery.xml and jquery.xml

Installation

1. Download the .zip file
2. Unzip the file you just downloaded
3. Open your Notepad++ installation directory, and find userDefineLang.xml
4. Open that file for editing. If you don't have any user defined languages saved already, you can simply rename userDefineLang_jQuery.xml to userDefineLang.xml and copy it into the Notepad++ installation directory. If you do have other custom languages, you need to merge the existing file and the new jQuery one. Simply copy the contents of userDefineLang_jQuery.xml and paste it into the bottom of userDefineLang.xml, and be sure to remove the extra </NotepadPlus><NotepadPlus> at the point where you pasted in the new content.
5. Save and close, and open up the plugins/APIs directory.
6. Copy jquery.xml into this folder, and start up Notepad++
7. You should be able to select "jQuery" from the bottom of the Language menu. Great, you're done! If you don't see it, continue to the next step...
8. If jQuery is not available in your language list, click on "View", then "User-Defined Dialogue..."
9. When the User-Defined Dialogue opens, click "Import" and select the userDefineLang.xml file.
10. Close the User-Defined Dialogue and restart Notepad++. jQuery should now be an option in the Language menu.


Screenshots
jQuery code hinting
jQuery code hinting






Donot forget to give your comments /suggestions and refer to your friends.