TechNote (Archived)

CodeSweeper: An Overview

This article was written by Wil Genovese, a Team Macromedia member, to help improve the users knowledge of what the CodeSweeper in HomeSite and Studio is capable of doing. Read it if you are interested in learning more about setting it up and using the CodeSweeper.

CodeSweeper!

by Wil Genovese

Did you ever get a Web page created by someone that couldn't figure out how to indent his or her code? How about a page made in a WYSIWYG editor? Have you ever inherited an entire site created like this? If these situations sound familiar, then it's a fair guess that you're tasked with revising code that's usually mangled and hard to read, and you're also given a third of the time you need to do the job. Enter CodeSweeper: faster than a molten metal, more powerful than a green dog, able to clean FrontPage code in a single button click!

CodeSweeper is a feature in HomeSite and ColdFusion Studio that automatically reformats HTML code based on user configurable templates. The products come with several predefined templates, but most users will customize the templates to fit their coding style. Ok, so why should I care about the way my code looks? Many people have asked that question. Also, many people have asked for a magic button that does what CodeSweeper does.

The reason for formatting your code is so it can be easily read. Not by the computer, but by the poor soul that has to decipher a Web page long after the person that created it has left the company (unless of course you're following the Dilbert Principle and using your cryptic code as a form of job security). Neatness counts, and back when I was learning to program my instructor harped on proper indenting and formatting as much as he did about proper syntax. Over 10 years later I've dusted off some of those old 360k floppies and stuffed them into my computer, and as you may have guessed, I looked at the programs I had written and could not make heads or tails of what I had coded. I did not listen to him then, but I do now!

Tip: Indent your code! Code is so much easier to read when text/code within the cfif, cfoutput,cfloop, cftransaction, etc tags are indented.

Selene Long
Team Macromedia

In The Beginning

To run CodeSweeper, simply open a file and click on the CodeSweeper button. In a blink of an eye your code is reformatted to the specifications of the selected profile, and Yes, it is really that fast! You can't undo the changes made by CodeSweeper, so it's also a good idea to test CodeSweeper on copies of your files until you have the settings customized for your style.

Both HomeSite and ColdFusion Studio 4.0 and higher come preinstalled with three templates or profiles. They are:

The Default CodeSweeper (optimized for HTML only),
The Default CodeSweeper (HTML/CFML), and
My CodeSweeper (For testing)

Depending on your coding style you'll want to modify one or more of these and even add your own personal CodeSweeper. Since there is no way of restoring a profile back to its original settings, you should use the 'My CodeSweeper' profile while learning how to customize your settings.

To customize a CodeSweeper Profile, choose the Options menu and select CodeSweeper Settings. You may want to assign a shortcut key to the CodeSweeper settings to make it easier if you plan on really getting into customizing and creating your own CodeSweepers.

Settings for Everything

The top section of the Settings Dialog contains the global settings that effect the entire document. The Current CodeSweeper dropdown list is a list of the available CodeSweeper Profiles for your installation, and the selected profile is the one that is used when you run CodeSweeper. The buttons to the right allow you to Add, Update and Remove profiles. The Remove button is self-explanatory; the Update button is used to make your changes in the top half of the Settings Dialog permanent; and when you Add a Profile you will get a dialog to enter a name for the profile. HomeSite and ColdFusion come with a blank profile ready for you to customize.

There are also the Case settings for Tag, Attribute, Event Names, and Quoted values that can be set according to your preference and coding style.

The check box for "Trim White Space between Tags" is a global setting for the document. By checking this option you eliminate any blank lines in your code. For most people most of the time you want to leave this setting checked. Both the Macromedia developer and I strongly recommend not turning this option off as it may result in many multiple blank lines (this setting can be over ridden at for specific tags at the tag level).

Settings for Tags

The lower half of the Settings Dialog contains the tag specific settings. The Tag list is a list of all tags that are recognized by this Profile. Again you have Add, Update, and Remove buttons. These allow you to easily add and remove tags from a profile. If you make changes to a tag you have to press the Update Tag button in order for the changes to take effect.

Most of the Tag Specific settings are self-explanatory: Add New Line does just what it says and adds a new line before and after the start and end tags depending on the options you select. One thing to note is that without the check box for "Trim White Space between Tags" checked you will get some double spacing when adding new lines before and after tags.

Indent by x spaces or tabs
Indent by x spaces or tabs and Indent other sub-tags from this tag work together. With Indent by x checked, the tag will be indented by x spaces or tabs from the nearest parent tag that has the Indent other sub-tags checked. Also, when Indent by x is checked it is assumed that you want this tag on its own line, therefore all tags that have this checked will be moved to their own line.

This can cause some confusion in the middle of a <P> if you have an <A> and set its indent levels to 1 tab. The<A> will be moved onto its own line and the paragraph of text will continue after it. Also, if you do not have this option checked for a tag it will not be indented at all, even when it is inside a tag that has sub-tag indenting turned on. For tags that you don't want to be indented unless they are nested inside other tags you should set the indent to 0 spaces and check the box.

Indent other sub-tags from this tag will cause the tags between the opening and closing tag to be indented if those tags have the Indent by X spaces or tabs checked. If they don't have indent by x checked then they wont get indented even when nested inside a tag that has this option, Indent other sub-tags, checked. Here are two examples:

Example #1
The <OL> tag has the indent other sub-tags checked and the<LI> tag has the Indent by x checked and set to 1 tab.

 <OL><LI><LI></OL>

Example #2
In this example the <LI> tag still has the Indent by x checked and the <OL> tag does not have the Indent other sub-tags checked.

 <OL><LI><LI></OL>

What happened in the second example is that no parent tag was set to allow a child tag to be indented, even when the child tag specifies to be indented.

CodeSweeper will not stop at the nearest parent when looking for a parent that allows indenting. It will keep looking until it runs out of tags or finds a parent tag that allows indenting and indent from that parent even if it is half a document away or even the<HTML> tag that allows indenting.

Do not trim white space around this tag
Do not trim white space around this tag will override the Global setting for trim White space for this specific tag. The reason for this is because the Trim White Space setting removes space before and after tags like <B> and <I> resulting inoutputlikethis. It is also a good idea to use this setting for the <A> tag.

Preserve tag formatting
Preserve tag formatting will force CodeSweeper to leave this specific tag alone. Great for tags like <META>. The CodeSweeper will not adjust any of the attributes or other contents between the <> of the tag.

Preserve tag contents
Preserve Tag Contents will force CodeSweeper to ignore the contents between the opening and closing tags for this specific tag. Great for keeping your <Script> </Script> blocks from being messed up.

Strip tag from document
We all wanted this one! Now you can enter those proprietary tags created by those WYSIWYG editors and remove them from your documents in one button click. The check box for End Tag Only is great for those that don't like having a closing </P>.

You may have to experiment a little with using the CodeSweeper and its settings. Like I said before, test it out on copies of your files first then start CodeSweeping everything.

Tip: Save your file before running CodeSweeper. Afterwards, if you don't like the way CodeSweeper formatted your file, simply close it without saving.

Wil Genovese
Team Macromedia

All other tags
In the tag list you will see the first item is All Other tags. This is basically a catchall setting. If your document contains a tag that is not in the profile list, all other tag settings are applied to the tag.

Build Your Own
Ok, the default profiles that ship with HomeSite are good and can be customized to your every need. But, you don't always code in HTML or CFML. Now what? Add your own profile. Click the Add button in the global section of the CodeSweeper setting dialog and enter a descriptive name for your new profile. The new profile will have no predefined tags. Now start customizing. Add tags that you want it to recognize and adjust the setting for each tag.

If you want to create a new profile, but don't want to have to add all the HTML tags manually, you can use HomeSite to copy a profile. Open the VTM file for the profile you want to copy and save it as your new profile. All profiles are VTM files saved in the Extensions\CodeSweeper folder. Open the profile and change the name of the profile in the first line. Then save it as a new VTM file.

Example: <AUTOFORMATTER NAME="Add the name you want here">

Now close HomeSite and reopen it. Bring up the CodeSweeper Settings dialog and your new profile will be in the dropdown list.

Power CodeSweeper!

A few people have requested the ability to run CodeSweeper on an entire folder. Macromedia did not build this function in, but it can be added. Joel Mueller of Creative Internet Solutions has created a script that can be executed in HomeSite that will run CodeSweeper on an entire folder and save all the files when it is done. This script can be downloaded from scripts.hsguide.com. THIS IS A VERY POWERFUL SCRIPT AND THE RESULTS CAN NOT BE UNDONE. TEST THIS OUT ON A COPY OF YOUR FILES FIRST.

Artificial Intelligence?

CodeSweeper is a very powerful and friendly tool, use it carefully and use it often. I do. After tweaking the settings for my own profile, and testing it on copies of my files, I was able to CodeSweeper an entire site in less than 10 seconds! I have created two new profiles, which can be found in the Macromedia Developer Exchange, one for working with VTML, and one for HTML and ASP.

Now only if CodeSweeper could just format my code based one what I'm thinking at the moment and my mood at the time Maybe in the next version: HomeSite - The artificially intelligent HTML editor!

-Wil

Wil Genovese is a member of Team Macromedia, and an occasional contributer to the Macromedia Developer Center. Please direct comments on this column to him directly at juggler@citilink.com.