// Commented Out

Awhile back, I posted about the Typography of my ActionScript. At the time, I had no idea there was real support for changing editor colors in Eclipse. Since the public beta 2 of Flash Builder 4 at announced at MAX, I’m happy to report that this has finally changed! As far as I know, the support is added in Eclipse 3.4,  but don’t hold me to that. I actually stumbled across these settings by accident in the Flash Builder preferences. Right now these options are spread out between the Flash Builder syntax coloring preferences and the default Eclipse editor settings in a few places. It can be kind of confusing, but that’s what I am aiming to help you avoid having to deal with.

Before I get started, it’s a good idea to have a sample code file open to see your changes applied. I usually just copy/paste the code from the Flash Builder syntax coloring preview window since most of the types of code you’ll be coloring will be included in the samples. Note that we’re not coloring the code itself just yet (we’ll get to that shortly), we’re only coloring the editor canvas.  You can find the code samples under ‘Flash Builder > Editor > Syntax Coloring’, just note that as of Beta 2, the MXML code sample has an extra quote after the XML declaration. Be sure to delete that.

Now that you have your sample code file open and full of code, all the magic happens in the ‘Window > Preferences‘ file menu in Flash Builder. Let’s start with the default font used in your code. Go to ‘General > Appearance >Colors and Fonts‘, then under the ‘Basic‘ folder tree on the right, scroll down to the last option ‘Text Font‘. Just click ‘Change‘ and set it to whatever font you want. I use a 10 pt. Consolas Regular (read more about that in my previous post). There are other font options here, but be careful which ones you change because some of them have to do with the Eclipse IDE itself. There is always the ‘Restore defaults‘ button, but for now, let’s just stick to the default code font, mmkay? Mmkay.

Don’t close the Preferences window just yet. The next step is to set some of the more specific editor options.  The first thing to do is to set the background color of the editor canvas. I like to use a dark color for a high-contrast code view that’s easy on the eyes. Notice I said “dark”, not “black”. I find a stark black to be a little too high-contrast and actually harder to read, but feel free to experiment.  I’m not the boss of you. To set the background color, we’re moving down to the ‘General > Editors > Text Editors‘ options. Under the ‘Appearance color options‘ list on the bottom right of the window,  select ‘Background Color‘. If ‘System Default‘ is checked, un-check the box and choose whichever color you like. You can click ‘Apply‘ to see how it will look, though it will probably look awful until you set all of the other options (assuming you have a sample code file open in the background). Next, let’s set the default text color, which, in MXML terms, usually means attribute names. So, move to the next one down, ‘Foreground color‘, un-check ‘System Default‘ again if it’s selected, and choose your color. I went with plain ol’ white.

For the sake of saving both of us time, I’ll run down the list of colors for the rest of the options. Note that some colors appear in RGB format because of the way the Eclipse color picker is designed. Also, I didn’t set all of the options, and unless you know exactly what you’re changing, you probably shouldn’t either.

Current Line Highlight: Pure Black.
Line Number Foreground: 192, 192, 192
Selection Foreground Color: Pure Black
Selection Background Color: Pure White
Hyperlink: 255, 74, 165
Print Margin and Find Scope I don’t use.

There’s also a sneaky one hidden under ‘General > Editors > Text Editors >Annotations > ActionScript Occurrences‘ (which is the same as ‘Mark Occurrences’ in the  toolbar at the top of your editor. This just highlights all of the instances of the code you currently have selected. It can be pretty handy when you need it, but I usually turn it off. When I do use it though, I use the following color: 86, 86, 86.

Ok, so that’s it for Eclipse’s general editor preferences. Let’s move on to Flash Builder-specific code coloring preferences. In the Preferences window still, head down to ‘Flash Builder > Editor > Syntax Coloring‘. There are 3 options: ActionScript, CSS, and MXML. Since I covered ActionScript before, I’m going to go over MXML and CSS this time. Again, for the sake of  brevity, I’m just going to list the colors. Note that, here, Flash Builder is cool with using hex values for colors, instead of the general Eclipse prefs where it would only accept RGB values. Also, here you can set some basic styling too, like bold and italic. Anyhoo, here is what you need to enter to make your MXML look like mine:

ASDOC: I’ll get to this in a minute. It’s a bit more complicated.
Comment (Non-ASDOC): #999999 + italic. Note that this in a MXML comment and doesn’t apply to ActionScript comments in CDATA tags.
Component Tag: #00FFFF
Default Text: Pure White
Processing Instruction: #00FFFF
Special Tag: #FF9900
String: #CCFF33

You’ll notice that as of Beta 2, the editor’s background color doesn’t update to reflect to show your settings from the general Eclipse options. Yet another reason to have a file open and click ‘Apply‘ to see what it really looks like.

All that leaves is the CSS syntax coloring. Here goes:

@import, @media, @namespace: #00FFFF
Comment: #999999
Default Text: Pure White
Delimiters: I don’t use
Property Name: #FF9900
Propery Value: Pure White
Selector: #00FFFF
String: #CCFF33

Alright, you’ve got your syntax coloring just the way you want it, but being the smart Flexer, you know that all of your preferences are workspace-specific. That means, that if you switch workspaces, your preferences don’t come along. Never fear, we can just export them and bring them along! Just go to ‘File > Export > Other‘. In the dialog that pops up, choose ‘General > Preferences‘, click ‘Next‘ and ‘Export All‘. Now you’ve got yourself a tidy little package to take with you when you switch workspaces or install a fresh copy.

Ok, I gotta level with you. As of Flash Builder 4 Beta 2, if you try to re-import this prefs file into a new workspace, you might notice that your Flash Builder syntax coloring prefs don’t show up right away. In this color scheme, that’s not a good thing. But I have an answer for this too. I found that switching to another workspace and then back to the one you just imported your prefs into, seems to fix this issue. I’m positive this will be fixed in the next release, but for now, just be aware that you might have to do some proverbial jiggling of the doorknob.

So that’s it! It wasn’t so bad, was it? Ok, go on. Get out of here! Have fun customizing Flash Builder!

UPDATE: By popular demand, ok, 1 person, I have posted my exported preferences. I just tried to import them into a fresh install of Flash Builder and the only thing I had to change was the font size. I’m pretty happy with that! Download my prefs!