Change Format of css Stylesheets in Eclipse

Question

So Eclipse can auto-format my css files under Source->Format, or by hitting Cntl-Shift-F.

When I group selectors for a single rule, eclipse formats it like this:

.planner th,.planner td {
    border: 1px solid black;
}

I would really like Eclipse to add a space between the selectors to aide readability, like this:

.planner th, .planner td {
    border: 1px solid black;
}

Is there any way I can configure Eclipse to do this? I'm running Eclipse Indigo.

Answer 1

The Aptana Studio plugin for eclipse has a formatter that's pre-configured according to your needs.

I recommend using it regardless as it ease up the development process a great deal for web developers (all sorts of nifty features like built-in Git integration, code assist for common JavaScript libraries, integrated FTP client, embedded AJAX server [Jaxer], nice themes included, etcetera, etcetera...).

References:

• Aptana Studio download page

Answer 2

The easiest way to solve your problem would be to run a find/replace command like so.

1. Open up File/Replace ( Ctrl+F) on the CSS file.
2. Find: ,\.
3. Replace: , \.
4. Check the regular expressions box.
5. Click Replace All.

Alternatively If your want can't be configure through the CSS editor (which seems to be so), then you're going to have to make a plugin for it.

CSS Editor is located here:

Preferences > Web > CSS Files > Editor

If you're considering making a plugin, then check out the package org.eclipse.jdt.core.formatter for help.

More information here:

• Eclipse CSS Editor options
• Eclipse Plugin Tutorial