2012
01.10

I’ve been using Notepad++ since high-school. I’ve been using it so much that I don’t even install Adobe Dreamweaver with my Creative Suite installs anymore. I know there are free IDEs like Aptana Studio and Eclipse, but if you want a barebones text editor that you can customize how you want, Notepad++ is the ideal solution (at least for Windows). I recently discovered some custom plugins that just blew my mind how much time I was wasting. Plugins that make me way more productive. These can all be found on the Notepad++ Plugins page.

1. WebEdit

WebEdit

After watching some PHP tutorials, I noticed that the presenter had a lot of custom functions/macros for tedious work. Things like creating a barebones HTML page with the <html><head></head> etc. written for you so you don’t have to do it all from scratch everytime. After looking around for a similar function for Notepad++, I found WebEdit (I couldn’t get QuickText to work at all). It allows you to make your own commands in a INI file so that you can use shortcuts in your code. For example. I have “a” (after pressing alt-enter) to write out <a href=”#”>|</a>. You can even use the pipe character to tell it where the caret will be after writing. This is something that everyone should use if you’re a web developer using Notepad++.

Here is my current tags that I use with WebEdit:

beginhtml=<html>\n\t<head>\n\t\t<title>No Title</title>\n\t</head>\n\t<body>\n\t\t|\n\t</body>\n </html>
startjquery=<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>\n\n<script type="text/javascript" charset="utf-8">\n\t|\n</script>
style=<style type="text/css" media="screen">\n\t|\n</style>
link=<link rel="stylesheet" href="" type="text/css" media="screen">
a=<a href="#">|</a>
div=<div>|</div>
divclass=<div class="">|</div>
divid=<div id="">|</div>
h1=<h1>|</h1>
h2=<h2>|</h2>
h3=<h3>|</h3>
h4=<h4>|</h4>
h5=<h5>|</h5>
h6=<h6>|</h6>
li=<li>|</li>
ol=<ol>|</ol>
p=<p>|</p>
span=<span>|</span>
strong=<strong>|</strong>
table=<table>|</table>
td=<td>|</td>
tr=<tr>|</tr>
ul=<ul>|</ul>
fieldset=<fieldset>\n\t|\n</fieldset>

2. Explorer

This one is really simple, it adds a folder/file view to Notepad++ so you can create/rename/delete/etc all your files and folders directly from within Notepad++. Can’t live without it.

Explorer

3. HTML Tag

This adds a bunch of really accessible shortcuts for HTML/JavaScript editing. Great to find rogue HTML tags or “entifying” strings.

  • Need to find a matching tag? Just press Ctrl-T
  • Select all content within a tag? Ctrl-Shift-T
  • Encode characters to entities? Highlight and Ctrl-E
  • Encode your JS to one line? Highlight and Ctrl-J

 Honorable Mention: Zen Coding

I don’t use this myself, but you can write HTML incredibly quickly by abbreviating code to a simple format. For example, if you write div#page>div.logo+ul#navigation>li*5>a
It will write out:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Once you get a hang of the syntax, you can really speed HTML writing up significantly.

Honorable Mention: Solarized

Solarized isn’t a plugin, it’s a visual theme. It’s designed to increase legibility, and reduce eye strain. Perfect from programmers who code all day or work at night. You can find the Notepad++ version GitHub.

Again all these plugins can be found on the Notepad++ Plugins page on SourceForge.

If you have any other plugins that are worth using, leave me a comment and I’ll check them out.

9 comments so far

Add Your Comment
  1. Thanks for sharing this. Notepad++ is my most used program and your suggestions will be put to use starting today.

  2. Have you found a good plugin that incorporates FTP with the Explorer? That’s the biggest thing I like about working with Dreamweaver.

    • I don’t know anything that directly relates with explorer, but you could use NppFTP that comes with Notepad++. It at least gives you an Explorer-like view for your FTP folders, and lets you upload back to your server directly within Notepad++. I personally just use Filezilla and do it manually.

  3. If anyone is have problems installing WebEdit in windows 7 x64 the WebEdit.ini may need to go in C:\Users\[Username]\AppData\Roaming\Notepad++\plugins\config instead of in the Program Files folder.

    Thanks!

  4. This post is very informative…

    I just used NPP recently and i don’t know if it has a plugin that will do the following task mentioned below:

    1. if there is an NPP plugin that will remove a specific div (a multi-line div)?

    2. that can replace multiple line of codes with a single line code or also a multiline code?

    3. that can remove specific line numbers in the html, especially in find in files command.

    these are the most helpful capability of plugins for me in my project.

  5. Thanks a lot! Finally a fellow web enthusiast that actually wants to help people instead of just showing off.

    Thanks a lot man. I will definitely use your shortcuts with WebEdit & notepad++.

  6. solarized and explorer are pretty cool. thanks for the suggestion

  7. nagatohu nechama. Great but also awful like eating a dog with a cat.

  8. Hi. RefreshBrowser is a plug-in which will refresh the web browser automatically when you save a document in notepad++. On a big monitor with NPP and the browser open side by side, it’s like working in an IDE.

    It’s currently pay-what-you-want, but I intend to make it free and open source soon.
    http://code-section.com/refreshbrowser/