Eclipse Javascript formatter (ctrl-shift-f)

Question

I don't like asking this question but I have honestly been looking for a way to figure this out for a very long time.

This is a simple question. I have been using NetBeans for a long time, but recently made the switch to Eclipse for a few reasons I won't get into. Anyway, I find the javascript source formatting behavior to be very odd.

Here is an example block of javascript code that I formatted myself:

function buildDatabase () {
    db.transaction(function (tx) {
        tx.executeSql('DROP TABLE IF EXISTS calendar');
        tx.executeSql('CREATE TABLE IF NOT EXISTS calendar(id UNIQUE, summary, description, location, startdate, enddate)');
    }, function (err) {
        document.querySelector('#debugLog').innerHTML += '<p><code>' + err.message + '</code></p>';
    });
}

very simple stuff. Now, if I hit Ctrl+Shift+F to format it (because frankly this feature is a massive time saver) for reasons I can't understand it will now look like this:

function buildDatabase() {
    db
            .transaction(
                    function(tx) {
                        tx.executeSql('DROP TABLE IF EXISTS calendar');
                        tx
                                .executeSql('CREATE TABLE IF NOT EXISTS calendar(id UNIQUE, summary, description, location, startdate, enddate)');
                    },
                    function(err) {
                        document.querySelector('#debugLog').innerHTML += '<p><code>'
                                + err.message + '</code></p>';
                    });
}

Why does it want to move .transaction to a new line? It doesn't get anywhere near the line width of 80. It is really messy looking. It is doing the same with the second .executeSql as well, and it still doesn't wrap properly. It's just very odd.

Now of course I am aware of Window > Preferences > JavaScript > Code Style but no matter what I seem to do in here fixes this. I am hoping someone has more experience with Eclipse to know what is going wrong.

I have the Android Dev Tools installed and PDT. However this behavior pre-exists the installation of these plugins.

Any help would be appreciated, thank you.

Answer 1

From my experience, it is the long, unbreakable lines that cause this problem. Very irritating. Try putting the long string constants (like "'CREATE TABLE IF NOT EXISTS calendar(id UNIQUE, summary, description, location, startdate, enddate)'") into a separate var, or if it really bugs you, you could break it apart and concat with +.

I tried this:

function buildDatabase() {
    var sql1 = 'CREATE TABLE IF NOT EXISTS calendar(id UNIQUE, summary, description, location, startdate, enddate)';

    db.transaction(function(tx) {
        tx.executeSql('DROP TABLE IF EXISTS calendar');
        tx.executeSql(sql1);
    }, function(err) {
        document.querySelector('#debugLog').innerHTML += '<p><code>'
            + err.message + '</code></p>';
    });
}

Answer 2

The problem can be solved by accessing

Preferences > JavaScript > Code Style > Formatter

Proceed:

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 that.

Answer 3

Preferences > JavaScript > Code Style > Formatter > Line Wrapping (tab)

uncheck >> prefer wrapping outer expressions (keep nested expression on one line)

Answer 4

I had the same problem. What I did was install the Aptana Studio Plugin and start using the JavaScript Editor it comes with. It is a lot nicer than the one that comes with WTP.

Answer 5

I have found this as well, and it is one of the main reasons why I largely moved back to NetBeans.

I don't have the solution, but I can give you some general tips that worked for me, at least to some extend.

1. Instead of brackets like this: }); try to put each one on a new line.

2. Instead of parsing parameters like this:

   calendar(id UNIQUE, summary, description, location, startdate, enddate)

maybe try

calendar(id 
UNIQUE, 
summary, 
description, 
location, 
startdate, 
enddate)

   3. Lastly you could try to put the + on a new line when concatenating strings.

Like I said, I know this does not solve your problem, but I figured at least it might help you until a better solution comes along.

Best of luck.