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.

I think is hard to separate each rule for your taste. I enable formatter flag (the same place as @Keyur describe) and put //@formatter:off on the line before json. — cox
– cox, Commented Jan 16, 2014 at 12:36
@cox I updated my question with the details of my Eclipse installation. I have the //@formatter:off feature only for Java code. The only way I can get this feature for JavaScript is installing the Aptana Studio plugin and using its own JavaScript editor. But Aptana Studio is a comparatively heavy thing, and I would like to avoid using it if I can. I am curious, do you use the Aptana Studio plugin? If not, what JavaScript editor plugin is installed in your Eclipse? — Alexey
– Alexey, Commented Jan 17, 2014 at 2:22
Sorry! I use Eclipse, Aptana (standalone) and LiClipse (trial/retrial...). That was from Aptana, they just look the same! — cox
– cox, Commented Jan 19, 2014 at 7:52
There is Eclipse Wild Web Developer now: projects.eclipse.org/proposals/eclipse-wild-web-developer — Christophe Roussy
– Christophe Roussy, Commented Jul 6, 2020 at 8:46

Duran Wesley Harris · Accepted Answer · 2015-11-13 14:00:31Z

9

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

answered Nov 13, 2015 at 14:00

Duran Wesley Harris

6227 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lurker Over a year ago

My Eclipse doesn't have Preferences > Javascript. It has Preferences > Web > Javascript, but that only links to the Task Tags settings (for some odd reason).

Robin van Baalen · Accepted Answer · 2014-07-09 15:08:29Z

7

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.

edited Jul 9, 2014 at 15:08

Robin van Baalen

3,6712 gold badges24 silver badges36 bronze badges

answered Jan 16, 2014 at 13:26

Grim

2,14312 gold badges63 silver badges138 bronze badges

13 Comments

Damien MIRAS Over a year ago

I use it every day but you are so true. we may completely remove eclipse itself to keep it clean.

LppEdd Over a year ago

@DamienMIRAS hahaha. I switched to IntelliJ after many years of Eclipse

LppEdd Over a year ago

I'll give this a try later!

Grim Over a year ago

@LppEdd You do not need to try. I have this screenshot: i.sstatic.net/zQyN6.png .

LppEdd Over a year ago

@PeterRader Nah they're usually really professional. I think that's a bug and it should be fixed. Why shouldn't I report it? I mean, it's a relatively easy fix, I think I could do it in the public GitHub repo.

|

Keyur Golani · Accepted Answer · 2014-01-16 12:26:43Z

2

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.

answered Jan 16, 2014 at 12:26

Keyur Golani

5838 silver badges28 bronze badges

6 Comments

Alexey Over a year ago

Keyur, thanks for your reply, but I know the location of the options. I played with them, but I was not able to make my code fragments look acceptable.

Keyur Golani Over a year ago

You want to change the auto-formatting of whole javascript or just auto-format a fragment in different way?

Alexey Over a year ago

I'd like to change the auto-formatting of whole JavaScript. I want to set it up once and let it format the code for me ever after.

Keyur Golani Over a year ago

So you basically don't want to press SHIFT + CTRL + F every time.

Alexey Over a year ago

Thanks for the tip. I'll do it this way if I do not find a completely automatic solution.

|

Community · Accepted Answer · 2017-05-23 11:46:31Z

2

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.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jan 18, 2014 at 7:36

Alexey

2,6024 gold badges35 silver badges57 bronze badges

1 Comment

p555t Over a year ago

Has anyone had good experiences with JavaScript in Aptana Studio? Or any Problems to report with it? Thx

Collectives™ on Stack Overflow

Auto-formatting of JavaScript code in Eclipse

4 Answers 4

1 Comment

13 Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

13 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related