Updated Feb 16, 2010 - Posted Mar 30, 2009 -

PSPad guide

If you're looking for a free and awesome coding editor for the Windows platform don't look any further! PSPad is a web programmer's dream come true. It offers a ton of features like commercial software, yet is lightweight and fast.

This PSPad guide will cover the setup and configuration as well as some basic usage.

Installing PSPad

First of all you have to download the latest version of PSPad. Make sure to get the installer version. Once downloaded double-click the installer to launch the setup.

The installation is pretty straight-forward. I recommend enabling shell-integration if the installer asks for it. This will allow you to open any file with PSPad by a simple right-click and then choosing PSPad in the context menu.

Configuring PSPad

Upon launching PSPad the first time you should see something like this:

Launching PSPad the first time

We're going to make some small tweaks:

Go to Settings › Program Settings › Editor (part 2) and put 1024 for Position of right edge. Then click Apply and Ok to remove the gray vertical line.
Select View › Ruler and View › Line Numbers to remove the ruler (we're not writing letters) and instead put line numbers which are useful for debugging (errors usually tell you in which code line they occurred).
I have never ever used the left project panel so I suggest you hide it by clicking the top left cube icon and get more working space in return.
Lastly, the yellow line can be turned off in View › Active Line if it annoys you.

It now should look like this:

PSPad after some tweaks

PSPad features

If you look at some menus and icons you will notice that PSPad looks a bit different than your standard word processor. There are a lot of tools made to ease the programmer's work, such as the code explorer, code highlighting, automatic code insertion, lots of calculators and converters, powerful search & replace, integrated code validation, a hex editor and other useful things.

Let's take a look at some of these more practical features for day to day use.

Creating files

First we'll have to create a new file:

Go to File › New File and select XHTML.
A new XHTML will appear with some pre-generated code.

The code in this tutorial is just for demonstration purposes, it's not necessary to already understand it. PSPad should now look like this:

A new XHTML file in PSPad

Code explorer

Let's test the code explorer:

First enable the active line highlighting I've you've disabled it previously (View › Active Line).
Click the green tree-like icon in the toolbar at the top.
The code explorer will appear on the right side, displaying the logical structure of the document's code.
When expanding the Head and clicking on the different items you will notice that the active line jumps to the corresponding position in the code.

This is very useful for quickly navigating in huge documents rather than scrolling by hand.

Quick navigation with PSPad's code explorer

Automatic code completion

Suppose we want to add a text input field to our XHTML page but we're too lazy to type it out. Nothing simpler than that with PSPad's automatic code insertion:

Move your cursor between the <body> and </body> tags.
Press Ctrl+Space.
You will now get a huge list of HTML tags (the list's content depends on what kind of file you're working in).
Press T and then E.
While typing the list updates itself and shows you what's available for what you've entered.
In our case we already have the tag we want: <textarea>.
Press 2 times enter to insert the tag.

Quite a neat trick and also helpful for looking up tags if you don't know each and every one by heart.

Code inserted with PSPad's auto insertion

Saving

Maybe you have noticed a red arrow in the top left corner of your file tab. This means that your file hasn't been saved since the last made change. Let's save our file then:

Go to File › Save As and choose a location you can remember easily.

Web page preview

Now that our work is saved it's time to preview it in a browser. Although PSPad has its own preview tool you're better off previewing your page in a real web browser since that's how it's ultimately going to be viewed.

Start up your favorite web browser, go to File › Open and select the file you just saved.

If it worked out right you should get something like:

Preview of your page

Code verification

The web page looks like it's displaying correctly. To be 100% sure let's check it for errors with PSPad's included code verifier:

In PSPad with your document active select HTML › Check HTML code.

In case you're getting error messages the code verifier will generally mention in which line errors happened and how to fix them. Try to insert some errors yourself by deleting random things and see how the code verifier reacts.

PSPad's integrated code verifier

Make sure your file is error-free, save it and close it. We're now going to use PSPad's external file search:

External file search

Go to Search › Search / Replace in Files.
Enter textarea in the Text to Find field.
Make sure Replace With, Whole Words Only and Case Sensitive are deselected.
Under Search Scope choose Selected Directory and select the directory where you saved your file to.
Make sure Include Subdirectories is deselected.
Press Ok to start the search.

PSPad should now have found the text string textarea in your file. It will list all search results in the bottom of the screen. By double-clicking a search result the corresponding file will be opened and the active line will jump to where the match occurred.

External file search results

Final words

That's it! I hope you enjoyed this tutorial and got a feel for how powerful a coding editor PSPad is. Best of all it's free!

Tutorials

Articles