Today, I found a solution to a minor but perpetually annoying problem that I’ve run into many times and decided to share it for those of you who, like me, didn’t know there was a solution available yet.

First, some background.

There are a lot of examples and tutorials out there in the worldwide Flex community.  Often I find one I want to plug into Flex Builder and see working for myself.  So, what do I do?  I copy and paste, then I go through and fix all the indentation problems caused by the difference in how they format their code and the “standard” formatting.  Or, it could be that the way it was posted on the webpage left spaces instead of tabs or whatever.  You get the idea.

I’m a perfectionist with some things and it will annoy me if the indentations are off, or even when I know that a line was indented with spaces instead of a tab.  I guess something in my head complains ahead of time, anticipating the few extra seconds it might take me to backspace over those spaces should the time come that I need to do that.  I know, there’s some issues I need to deal with.  We all have our vices.

So, on to the solution.  Today, I was dealing with this little annoyance and decided to do some googling to see if I wasn’t alone and more importantly, if someone had come up with a solution.  There is a bug in the Flex jira bugbase, so if you feel like it would be a good addition to Flex Builder, you can vote for it.  This requires a log in, which if you don’t have one, you should take a moment to create one.

In browsing the comments for the bug, someone has created a simple little formatter Eclipse plugin that from my limited use so far, seems to work sufficiently well.

Download the FlexFormatter Eclipse plugin here.

One thing that was not spelled out anywhere obvious (I had to create a SourceForge account and log in to view the help forum) is how to install the plugin.  It’s actually really simple, but just not entirely obvious.

1. Download the FlexFormatter Eclipse plugin.  You’ll get a file called FlexPrettyPrintCommand_0.6.6.jar (unless of course it gets updated by the time you read this)
2. Place the file into the plugins directory of Flex Builder 3.  For me, it was C:\Program Files\Adobe\Flex Builder 3\plugins.
3. Restart Flex Builder 3.

It worked for me without a problem, but if it doesn’t work for you after restarting, I saw a post suggesting restarting Eclipse with the -clean argument.

You should see two new icons on the toolbar:

These now allow you to clean up the indentation and formatting of code.

There are two buttons, Format Flex Code (selected lines) and Indent Flex Code (selected lines).

Format Flex Code (selected lines)

The format button will clean up your code indenting, including spacing, so if you have

1
2
3

private function clickHandler(  event : MouseEvent ) :void{
 
}

it will make it

1
2
3
4

private function clickHandler(event:MouseEvent):void
{
 
}

Personally, I like to have my opening bracket on the same line as the function definition, one space after the void, but that’s not a big enough deal to cry about.

Indent Flex Code (selected lines)

This one is a little more straight forward.  It’s like the more common “pretty print” function in some other editors.  It indents the lines so that the code is more readable.  So if you have

1
2
3
4
5
6
7

private function clickHandler(event:MouseEvent):void
{
for(var i:int=0; i < 5; i++)
{
trace(i);
}
}

You’ll get

1
2
3
4
5
6
7

private function clickHandler(event:MouseEvent):void
{
	for(var i:int=0; i < 5; i++)
	{
		trace(i);
	}
}

It only changes indentation, but leaves your spacing alone.

Overall, something that gives you just a little more time coding, and less time hitting the backspace and tab keys.