10 Tips for developing with jQuery in Notepad++
Notepad++ had always been my favourite free editor for coding with JavaScript ever since I can remember. Here are some tips I have picked up while developing with Notepad++.
1. Quick compare code using Notepad++
This feature is great for finding out quickly what code changes have occurred between files. First open the two files next to each other in the Notepad++ Editor (or copy and paste into a new file for quick compare).
Then with the first file selected press ALT+D or click from the menu Plugins > Compare > Compare
If the files match you will get a popup saying “Files Match”. Otherwise if the differences appear in a right hand pane highlighted so you can easily double click these to view the code.
Then to get rid of the compare window press CTRL+ALT+D or click from the menu Plugins > Compare > Clear Results
You can also view horizontally if you prefer! Simple right click on the divider column and click
2. Useful keyboard shortcuts in Notepad++
Just a few quick keyboard shortcuts that I use when developing.
- F11 – Switch code to full screen without top menus. To switch back simply press F11 again. F12 does the same thing but not in full screen.
- CTRL+D – quick copy paste current line to line below.
- CTRL+Q – Quickly comment out lines of jQuery code. Press CTRL+Q again to uncomment.
- SHIFT + right arrow – Quick select characters.
- CTRL + SHIFT + right arrow – Quick select words.
- Triple left click – Quick select whole line.
- CTRL+A – Quick select whole document.
- ALT+F2 – Quick Google search.
- ALT+0 – Quick collape all code into blocks. To unfold code blocks press SHIFT+ALT+0
3. Useful free plugins for Notepad++
There are heaps of free Notepad++ plugins available that do awesome things from simple spell checkers and color pickers to FTP synchs and Directory Searches. Here are some of my favs:
- TextFX – Lots of very useful features such as code cleanup, neaten, minify etc. One of the first, one of the best.
- Multi Clipboard – MultiClipboard plugin implements multiple (10) text buffers that is filled up via copying and/or cutting of text.
- Switched – Simply switch between any associated files, which is extremely useful if you have some of your excerpts set up with hot keys.
- Colorpicker – This plugin can decode the colour of a pixel on a palette and paste its RGB into the editor.
- SearchInFiles – Allows a user to find files that have a lot of excessive information piled deep within the code itself.
To install the plugins simply download the .dll files and extract them into the folder “AppNotepad++plugins”.
Wiki Directory of Notepad++ Plugins
Sourceforge Download List
4. Minify your code using Notepad++
Pretty useful feature to quickly minify your jQuery code. Simply do the following:
- Edit > Blank Operations > Trim Header and Trailing Space
- Edit > Blank Operations > Remove Unnecessary Blank and EOL
Also see: Other ways to minify/hide your JavaScript code.
5. Neat up your code using Notepad++
Previously I have posted on how to making your jQuery code pretty using Notepad++. Simple select from the main menu TextFX > TextFX Edit > Reindent C++ Code.
However, I have found an awesome online tool called Javascript unpacker and beautifier. This tool actually makes your JS source code look nice and pretty and was worth a mention.
6. TortoiseSVN plugin for Notepad++
Make sure TortoiseSVN is installed and you’ve installed the latest version of Notepad++.
The plugin comes in the form of a zipped, dll. Simply unzip the dll and place it in the Notepad++ plugins directory. For a typical install, it will be located here: “C:Program FilesNotepad++plugins”. Next time you launch Notepad++, the plugin will automatically be loaded.
The plugin should work under Windows XP, Vista, and 7. Both 32 bit and 64 bit operating systems are supported. If you find any bugs on these systems or others, drop a comment and I’ll see if I can address them.
I’ve noticed that sometimes Notepad++’s auto-updater thinks the plugin needs to be updated. This usually results in a new version being overwritten by version 1.0. If you update to 1.1 or 1.2, do not use Notepad++’s auto-update feature when it prompts you for this plugin.
7. The Notepad++ Wiki
Stuck on something technical in Notepad++? Don’t stress out just visit the Notepad++ wiki and there might be something on there to help solve your problem.
8. Set language to JavaScript in Notepad++
Don’t forget to change the language your coding in so that the built in Syntax highlighter can work it’s magic!
9. Delete Line Numbers
Sometimes when copying code from other websites we end up with stupid line numbers and have to manually remove them in order to use the code. Notepad++ to the rescue!
TextFX > TextFX Tools > Delete Line Numbers or First word
10. Word Wrap
Useful if you like coding with all of your code visible on screen and hate scrollbars (i know i do!).
Simply click the word wrap button or select from the main menu View > Word Wrap.
11. Quick Copy Filename, Filepath
Just one more tip which is a huge time saver.
Right click on file header (tab) > click full filepath to clipboard
Conclusion
That’s it! Hope you have learnt something new with Notepad++ to assist with your future jQuery developments. If you know of any more that I have missed please post a comment.
