gSkinner - Home

Indispensable Plugin for FlashBuilder: Flex Formatter

Posted on December 10, 2009 by Grant Skinner

Flex Formatter is an extremely useful plugin for FlexBuilder / FlashBuilder that formats your ActionScript code (AS3) and MXML according to a broad range of settings, and helps you to generate ASDoc comments automatically. It is free, and open source.

It’s code formatting is quite robust and configurable, handling things like brace settings (cuddling versus next line), white space around parameters and operators, sorting imports, and a ton more. Thankfully, you can export your settings to a file and share it with your whole team. You can also have it automatically update settings from a file that you can share over the network or via SVN / GIT.

Unfortunately, it’s ASDoc features are much more rudimentary, and do not have any configuration options. They serve as an acceptable starting point, and save some time, but I would love to see some additional support here (for example, an option to mark private and or protected members as @private, which is a very common requirement).

Regrettably, Flex Formatter does not seem to come with installation instructions. If you are not familiar with installing Eclipse plugins, it can take a lot of work to figure it out, but it’s very simple if you know how to do it:

  1. Start up FlexBuilder / FlashBuilder.

  2. From the Help menu, select ‘Software Updates > Find and Install…’

  3. Select ‘Search for new features to install’ and click ‘Next >’

  4. Click ‘New Remote Site…’

  5. Use name: ‘Flex Formatter’ and url: ‘http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite/’

  6. Click OK

  7. Make sure only ‘Flex Formatter’ is selected in the ‘Sites to search’ list, and click ‘Finish’

  8. Follow the prompts to install Flex Formatter, and restart the IDE

Once you’ve restarted, you should see the Flex Formatter bar with buttons to ASDoc, format, and rearrange your code. You should also have a ‘Flex Formatting’ entry in preferences.

If you’d like, you can import my settings for Flex Formatter. You can download them by clicking here, unzip them, and import them using the ‘import…’ button at the bottom of Flex Formatter’s preferences.

Flex Formatter’s project home is here and you can find documentation on it’s settings here.

Follow @gskinner on Twitter for more news and views on interactive media.
23 Comments

Useful yes, but should have been part of the new Flash Builder instead of a plug-in. I went back to Powerflasher FDT after trying out Flex Builder for a while, as it has these features build in.

Posted by: FlexFlip on Dec 10, 2009 12:22pm

Nice plugin, but I agree formatting code should be standard kit.

Like FlexFlip I also prefer FDT, but it lacks the advantage of being integrated in-company like Flash Builder does (FB4 + CS5 could be nice). Also the debugger-capable version of FDT costs like 599 euros, which is a bit steep.

Posted by: Macaca on Dec 10, 2009 1:20pm

I can attest to your sentiment! I've been using Flex Formatter for well over six months now in both FB3 and recently FB4 (both under Leopard and Snow Leopard). It's a great piece of software that does wonders for code formatting. It's a must-have in my Flex dev kit.

Posted by: Marcus Stade on Dec 10, 2009 1:52pm URL: http://www.gimlet.se

FlashDevelop has FD Flex Formater plugin, which is port from original FlexFormat

Posted by: krdr on Dec 10, 2009 2:05pm

You can also just download the jar files and dump them in your eclipse plugins folder

Posted by: Shane on Dec 10, 2009 2:42pm

Shane - huh, I tried that, but it didn't work for me.

Posted by: Grant Skinner on Dec 10, 2009 2:46pm URL: http://gskinner.com/blog/

You mean your entire team can actually agree on which lines the curly braces should be, so you can share a single file forcing those? Wow. :)

Posted by: Unkulunkulu on Dec 10, 2009 10:04pm

@Unkulunkulu the point would more be, that even if they don't agree, they all use the same convention to get consistent code.

I'll try it, thanks Grant

Ariel

Posted by: ariel sommeria on Dec 11, 2009 12:45am URL: http://arielsommeria.com/blog/

I posted this a while back - http://markstar.co.uk/blog/2009/flashplatform/flex/code-formatting-for-flex-builder-3/

It should definitely be part of Flash Builder as standard. It makes it much easier to pick up someone else's code!

Posted by: Mark on Dec 11, 2009 2:08am URL: http://markstar.co.uk/blog/

"an option to mark ... protected members as @private"

No, no, no! This is pure evil. Protected members are exposed to others, therefore they should be properly documented. Anyone who does this should be banned from API development for life. And that includes those at Adobe who indulge in this practice within the Flex framework. All this achieves is forcing folk to delve into the code to work out what these methods do.

If a method is not intended for use by others, make it private or internal, don't bodge it by making it accessible and then trying to hide it.

Posted by: David Arno on Dec 11, 2009 2:17am URL: http://davidarno.org

Great plugin.

Nitpicking but wish there was a way to enforce tabbed spacing BEFORE ':'on all your declared public, protected, private class variables so that they all line up.

public var myMC :MovieClip

private var _customClass :MyClass

private var _formatted :Boolean = true;

Posted by: jimb on Dec 11, 2009 8:59am

Re: David Arno

There are can often be two sets of API Documentation a developer will want to build... one for advanced users and one for straight application development.

It is perfectly acceptable, even advisable, under certain circumstances to hide unnecessary information to your users.

This practice is far from evil, and in the right circumstance can even be benevolent.

Posted by: Nicholas on Dec 11, 2009 9:56am URL: http://selectedwork@ghostmonk.com

Thanks for the writeup.

The release notes (which include brief installation instructions) are hung off of the main project page, but SourceForge helpfully doesn't include a link on the main download page and hides the link I added behind the "Show project details" button.

http://master.dl.sourceforge.net/project/flexformatter/flexformatter/0.6.32/ReleaseNotes.html

Regarding ASDoc options. There are some options on the page titled "ASDoc Generation", but they basically let you control which functions/properties get ASDoc added to them when you generate comments for the entire file. Also, you can adjust the text in the templates to some extent, although there's no help, and no filtering by visibility modifier.

Regarding lining up variable declarations: there is an option to not disturb existing whitespace around declarations, but not to line them up, since that would require multiple passes through the source code.

Also, I believe that FlexFormatter has mxml attribute reordering features that are not available in other Flex tools.

In general, bugs/requests should be added through the bug tracker. I am unlikely to stumble across posts like this dependably. http://sourceforge.net/tracker/?group_id=248408&atid=1126569

Posted by: Ernest on Dec 11, 2009 3:27pm URL: http://master.dl.sourceforge.net/project/flex…

Hi Everyone,

i'll try it out and see...

Posted by: Hicham on Dec 12, 2009 5:31am

FlexFormatter is a cool plugin, I am using it for almost an year. I like the feature to format the source on Save, so you press Ctrl + S or Ctrl + Shift + S and source file is formatted.

Posted by: Chetan Sachdev on Dec 12, 2009 6:24am URL: http://www.riageeks.com

hey grant -

thanks so much for sharing :)

stef

Posted by: stef on Dec 12, 2009 7:46pm

The only unacceptable thing for me is that it overwrites "Ctrl + S and Ctrl + Shift + S for this formatting."

Which is the same standard key combination for search and replace, or search troughout all the project/files. A very often used feature by many.

Posted by: Rien on Dec 14, 2009 4:32am URL: http://blog.rive.be

Why don't I see an "import" button in the preferences?

Posted by: Russ on Dec 29, 2009 8:54am

Looks promising, but I get "formatting failures" on many files I run it on. I didn't think my code was that bad! ;)

Posted by: adampasz on Jan 10, 2010 9:07am URL: http://www.pasz.com

I wanted to follow up on my last post. I've used the plug-in a bit more, and have had quite a bit of success with it. There were a few files that were "funky", but I was doing some non-standards stuff with the code there. I'm going to follow up with the developer about the issue I had, but overall it's a solid plug-in, and I've recommended it to my development team.

Posted by: adampasz on Feb 19, 2010 11:35am URL: http://www.pasz.com

The lastest version 0.7.2 seems not to work with Flash Builder 4. :(

Posted by: Jeremy Mitchell on Apr 9, 2010 9:04am URL: http://flexdevelopers.com

Thanks for the code contribution. Nice features!

Posted by: Otuyelu on Apr 10, 2010 10:49pm URL: http://oroede.org

@Jeremy Mitchell

Using gskinner's instructions, the plug-in wasn't listed in Flash Builder 4 after adding the update site. After consulting with the plug-in developer, I learned all that was needed was to uncheck the "Group items by category" and the plug-in was listed. I could then install it and it runs fine.

Posted by: Michael Prescott on Apr 20, 2010 8:27pm