9

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.

Alexey
  • 2,542
  • 4
  • 31
  • 53
  • 1
    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 Jan 16 '14 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](http://stackoverflow.com/a/12401529/2842067) 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 Jan 17 '14 at 02:22
  • Sorry! I use Eclipse, Aptana (standalone) and LiClipse (trial/retrial...). That was from Aptana, they just look the same! – cox Jan 19 '14 at 07:52
  • @cox Thanks! Your comment was very helpful anyway. – Alexey Jan 19 '14 at 08:06
  • There is Eclipse Wild Web Developer now: https://projects.eclipse.org/proposals/eclipse-wild-web-developer – Christophe Roussy Jul 06 '20 at 08:46

4 Answers4

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

Duran Wesley Harris
  • 612
  • 7
  • 18
  • 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). – lurker Jan 29 '22 at 13:57
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.

Robin van Baalen
  • 3,632
  • 2
  • 21
  • 35
Grim
  • 1,938
  • 10
  • 56
  • 123
  • 5
    I use it every day but you are so true. we may completely remove eclipse itself to keep it clean. – Damien MIRAS Oct 12 '16 at 13:11
  • 1
    @DamienMIRAS hahaha. I switched to IntelliJ after many years of Eclipse – LppEdd Dec 14 '17 at 08:51
  • @LppEdd IntelliJ is much more imponderable that eclipse. – Grim Jun 08 '18 at 09:54
  • @PeterRader what do you mean with "imponderable"? – LppEdd Jun 08 '18 at 09:57
  • @LppEdd The code-suggestions sometimes makes no sense. IntelliJ as well as NetBeans are suggest words that are used before. If the code compiles or not. Eclipse takes care that only code-suggestions exists that make sense. – Grim Jun 08 '18 at 10:13
  • @PeterRader mmmh I think you need to try IntelliJ another time. I use autocompletion all the time. CTRL+Space, CTRL+SHIFT+Space, CTRL+SHIFT+Enter. Everything is perfect – LppEdd Jun 08 '18 at 10:40
  • 1
    I'll give this a try later! – LppEdd Jun 12 '18 at 18:58
  • 1
    @LppEdd You do not need to try. I have this screenshot: https://i.stack.imgur.com/zQyN6.png . – Grim Jun 12 '18 at 19:10
  • Ok! But you know what, if I post this on their Youtrack portal it will be fixed in a couple of day. I report bugs and they promptly fix them. That's also a difference – LppEdd Jun 12 '18 at 19:14
  • @LppEdd No, do not consider to write a bug-report. From my experience the will suggest to disable code-suggestion compleatly. – Grim Jun 12 '18 at 20:33
  • 1
    @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. – LppEdd Jun 12 '18 at 20:41
  • W@LppEdd Yea, I think so, its a bug that is easy to fix in a couple of days. – Grim Jun 13 '18 at 05:26
  • It's 2022 and the Eclipse plugin for javascript is still buggy for preferences. – lurker Jan 29 '22 at 13:57
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.

Keyur Golani
  • 573
  • 8
  • 26
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.

Community
  • 1
  • 1
Alexey
  • 2,542
  • 4
  • 31
  • 53
  • Has anyone had good experiences with JavaScript in Aptana Studio? Or any Problems to report with it? Thx – p555t Oct 05 '18 at 16:28