Eclipse JavaScript formatter crazy (i.e: too much padding)

Question

I'm having trouble to get eclipse format my JavaScript well. In this first example, it behaves as expected (not the length of the second url):

Whenever i have a longer url, eclipse goes crazy formatting my code and I get extra padding everywhere, like the example below:

Why does the JavaScript formatter behaving like this, and how do I fix it?

(Just in case: I have not installed any formatter plugin, I just use the default that comes with Eclipse Juno)

Outer

Don't put long URLs in the middle of your functions. Define them someplace else. – Pollen

I've already thought of that, but I really don't want to have a bunch of string variables. I know i could make a JSON object, but still, such a big platform as Eclipse shouldn't be behaving like this. – Outer

Answer 1

The long url in the example affects "$.ajax(..." and "$(function()...".

As for "$(function()...", the setting is in Preferences/JavaScript/Code Style/Formatter/Line Wrapping/Function Calls/Arguments. 'Do not wrap' is available.

As for "$.ajax(...", it is similar to 'Qualified invocation' in the Java formatter.(Preferences/Java/Code Style/Formatter/Line Wrapping/Function Calls) Unfortunately, JSDT has no UI for this.(Preferences/JavaScript/Code Style/Formatter/Line Wrapping/Function Calls)

This is a trick for JSDT 1.4.1(WTP R3.4.1).

1. Start Eclipse
2. Open Preferences/JavaScript/Code Style/Formatter
3. Click 'New'
4. Input profile name as you like, select 'Eclipse [built-in]'(or JavaScript Conventions) in listbox, uncheck 'Open the edit dialog now'(no need to edit), and click 'OK'
5. Close preferences and exit Eclipse
6. Open following file with a text editor
   workspace/.metadata/.plugins/org.eclipse.core.runtime/.settings/org.eclipse.wst.jsdt.core.prefs
7. Find following line and replace 16 to 0
   org.eclipse.wst.jsdt.core.formatter.alignment_for_selector_in_method_invocation=16
8. Save it
9. Start Eclipse

(since you have your own profile, maybe 1-5 are unnecessary)

This hack will be reverted when you edited formatter settings in preferences. - (To prevent overwriting, all you need to do is export you formatter profile, edit the XML and change the 'org.eclipse.wst.jsdt.core.formatter.alignment_for_selector_in_method_invocation' to 0. Save and reimport again now. This change is permanent.

I don't think this satisfies your needs, it's better to use some other formatter(3rd party plugin), I guess.

Anemone

Answer 2

The problem can be solved by accessing

Preferences > JavaScript > Code Style > Formatter

These are the steps:

1. Create a new profile (since you cannot edit the builted-in one), if you haven't already, and click Edit....
2. Open the Line Wrapping tab.
3. In the Maximum line width field, enter 9999.
4. Click Apply, and Ok.

The problem shows up again for code lines that have more than 9999 characters, but I can live with it.

Bidle

Actually i tried that too, but that's actually only postponing the problem to when you have a string of 500 length, then the parentheses will still behave bad. – Outer

I personally prefer this over an hack, that anyway represents a temporary solution, until when you need to change your formatter settings for any reason. I have edited my answer to put the maximum value admitted by Eclipse: from 500 to 9999. – Bidle

Answer 3

I've found a temporary solution:

1. Go to Window -> Preferences -> JavaScript -> Code Style -> Formatter

2. Set the active profile to JavaScript conventions.

3. Click Edit

4. In the Indentation tab, set Tab policy to Spaces only.

5. Set both Indentation size and Tab size to 3.

6. As you cannot override the default profiles, change the profile name and save.

7. Press Ctrl+Shift+F and enjoy.

NOTE: I don't like having 3 spaces, I'd rather prefer my good old 4 spaces, but this is a temporary solution, until someone finds a better way to solve this. I just felt like sharing.

Outer

Probably your solution is dependent upon the length of the string. Make the string longer and it will happen again. It has to do with the page margin, if you go beyond it. I fix this by inserting "+" into the center of long string literals. It is a crappy solution but it works. – Nougat

Answer 4

Here's what I found: in "Line Wrapping > Function Calls" set "Indentation Policy" at the bottom to "Indent by one". This creates indentation without the wildly excessive spaces (or tabs). I haven't tried it with your exact code, but I've seen similar issues with mine.

Crinoline