Question

I am looking for a tool that formats my javascript for me. There are many times when I wish I could just let a tool format my source code because of restructuring some code or because I want to make sure the code structure really is like I believe it to be. My problem is that all formatters I have found produce really retarded results.

If I format the source myself I would format it like this:

var structure = {
  key1: {
    subkey1: 3,
    subkey: 6,
    sublist: [
      {
         deep: "yes"
      },
      {
        deep: "yes",
        somekey: 4
      },
      5,
      10          
    ]
  },
  key2: [
    {
      key: 5,
      key2: 10
    },
    [1, 2, 3],
    [
      {
        nestedObj: "hello",
        siblingProp: 5
      },
      {}
    ]
  ]
}

Whatever tool I find doesn’t have to do it exactly the same way but look at what eclipse’s built in formatter does:

var structure = {
    key1 : {
        subkey1 : 3,
        subkey : 6,
        sublist : [{
                    deep : "yes"
                }, {
                    deep : "yes",
                    somekey : 4
                }, 5, 10]
    },
    key2 : [{
                key : 5,
                key2 : 10
            }, [1, 2, 3], [{
                        nestedObj : "hello",
                        siblingProp : 5
                    }, {}]]
}

Or the one I get with Aptana’s plugin (3.0 beta)

var structure = {
    key1: {
        subkey1: 3,
        subkey: 6,
        sublist: [
        {
            deep: "yes"
        },
        {
            deep: "yes",
            somekey: 4
        },
        5,
        10
        ]
    },
    key2: [
    {
        key: 5,
        key2: 10
    },
    [1, 2, 3],
    [
    {
        nestedObj: "hello",
        siblingProp: 5
    },
    {}
    ]
    ]
}

They provide zero help in visualizing the structure of my datastructure.
Does anyone know of a decent formatter? Please.

Answer 1

WebStorm / PHPStorm / Intellij IDEA

Just made a quick check in my PHPStorm: i’ve pasted your code from “Eclipse” example, ran Code -> Reformat code and it gave me the code, like you would do it manually (the only difference is that it wraps colons with spaces from both sides)