Auto-formatting of JavaScript code in Eclipse

Question

Consider the formatting of this JavaScript code:

$("#dataTable").jqGrid({
    url: base + "products-all",
    datatype: "json",
    jsonReader: {repeatitems: false, id: "ref"},
    colNames:["ID","Product name","Price"],
    colModel:[
        {name:"id",index:"id", width:40, align:"right", classes:"grid-col"},
        {name:"name",index:"name", width:600, align:"left", classes:"grid-col", editable:true, editoptions:{size:25}},
        {name:"price",index:"price", width:100, align:"right", classes:"grid-col", formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "}}
    ],
    rowNum:5,
    rowList:[5,10,20],
    height:114,
    shrinkToFit: true,
    sortname: 'id',
    sortorder: "asc",
    pager: "#pagingDiv",
    viewrecords: true,
    caption: "Products"
});

How should I configure the JavaScript formatter in Eclipse (i.e., Preferences > JavaScript > Code Style > Formatter) to make sure this code looks acceptable after the auto-formatting (SHIFT + CTRL + F) is applied to it? I can make Eclipse to put each field of the JSON object on a new line, but the outcome will look messy. I also can disable inserting line breakes after each field, then the entire object will be in one line.

Is it possible to disable any insertions/removals of line breaks inside JSON objects? If it's not possible, how should I deal with auto-formatting of this code?

I also have another example:

jQuery("#dataTable").jqGrid(
    'navGrid',
    '#pagingDiv',
    {}, 
    {reloadAfterSubmit:false},
    {reloadAfterSubmit:false},
    {reloadAfterSubmit:false},
    {sopt:['cn','bw','eq','ne','lt','gt','ew']}
);

It's a method invocation. Normally, all method arguments should be in the same line. But here I want each argument to be on a new line. How can I make this code to pass auto-formatting?

Update:

I use Eclipse Kepler for Java EE Developers. I think my JavaScript editor is a part of the JavaScript Development Tools plugin which, in turn, is a part of the Eclipse Web Developer Tools package.

Answer 1

If you don't want to press SHIFT + CTRL + F everytime then you just need to go to Preferences -> Javascript -> Editor ->Save Actions and then check the box that says "Format source code".

Answer 2

This question is hopeless since even jQuery wont ever be validated/formatted correctly!

The JavaScript-Plugin in Eclipse is buggy and evil since a few years.

It wont ever change because of the imponderabilitys of browsers (ie. some need a ;, some don't, some has JSON-Notation some don't)! I voted for remove the javascript from Eclipse to cleanup Eclipse.

Answer 3

A similar question has an answer here for Java (not JavaScript) code formatter in Eclipse. The two most popular answers suggest to use the // @formatter:off tag and the Never join already wrapped lines option. Unfortunately, neither of these features is available in Eclipse's default JavaScript editor (which, I think, is a part of JavaScript Development Tools / Eclipse Web Developer Tools).

A possible workaround is installing the Aptana Studio plugin and using its JavaScript editor instead. This editor has the // @formatter:off feature (see here for details). I have not found anything like the Never join already wrapped lines option though. Aptana Studio is a plugin with a lot of features, and installing it just to get a new JavaScript editor may not be practical. Aptana Studio allows you to edit JavaScript files, but it will not help if you have any JavaScript code embedded in, say, a JSP file.

Another possible workaround is using code formatting selectively: you can select a block of code and press SHIFT + CTRL + F to format this particular block only.

If you are reading this post, chances are that you have another problem with JavaScript code formatting: Eclipse messes up JavaScript code when automatic line wrapping is enabled. It can be disabled by putting a big number in the Maximum line width field as explain in this answer.

Answer 4

These options are in Eclipse Preferences.

To reach it, follow this.

Window Menu >> Preference >> Web >> JavaScript >> Formatter

This will give you your active formatting profile for Javascript.

Choose the profile you want to change and edit it or make a new profile. This will give you a new window which will give you all the options you need to define your formatting style for code.

You can do the same with HTML, Java and other codes too.