javascript beautifier

I’ve written a JavaScript beautifier (JBeauty), for fixing the indentation (and other features) of code to my own preferences.

click here to try it

What it solves, is that sometimes I have to work with other peoples’ code, which is sometimes … “ugly” is the kindest word I can think of. This application cleans up the code, keeping comments intact, and formatting it based on my own rules, which are:

  • use tabs for indentation
  • no unneeded white-space (“if ( a == b )” is a waste of bandwidth compared to “if(a==b)”)
  • blocks begin with ‘{‘ which starts on the same line as whatever opened the block (“if(a==b){\n” instead of “if(a==b)\n{\n”

Simple rules, but they make me happy.

At some point, I might extend it to fix missing semi-colons (reasons I don’t like “optional” semi-colons).

Whatcha think? Anything you’d like to see in it? Does it screw up with your code?

13 Comments.

  1. Not bad, and I like most of your preferences πŸ˜‰

    Noticed that if I had a /*potentially multiline comment*/ inside a function, it would indent, but the following line would not.

    If you plan on sharing… you might want to add a few features to choose some of the settings…

    e.g. spaceLeftAndRightOnAssignment = t/f;

    so if users (like me) like this output…

    var abc = ‘I like a space left and right of the equals’;

    they can get it.

    likewise, options to strip comments would be nice…

    oh, and I’d make the “Beautify” link a button… πŸ˜‰

  2. Hi,

    very nice! Always looking for something like that.

    Have you thought about adding syntax highlighting?

    Thanks for this one,
    Steffen

  3. “blocks begin with β€˜{’ which starts on the same line as whatever opened the block (”if(a==b){\n” instead of β€œif(a==b)\n{\n””

    Ah, I get fed up of people who insist on extra spaces around such things.. I also get fed up of people who believe that the { should be on the next line.. its not a problem with correct indenting πŸ™‚

    I havnt tried it(yet), but i’ll be listening for updates about it.

  4. hmm. lines like “} else {” got changed to “}\n else {” – I’d suggest fixing that πŸ™‚

  5. Ken, what’s wrong with that? That’s exactly how I like it – makes it easier to see the two strands of a conditional statement when vim is in folding mode.

    On the other ideas expressed, yup – mostly good ideas (although I don’t see the point of coloured syntax in this context…). I’ll probably work up some options for them during the week (yours as well, Ken, even if it’s wrong πŸ˜‰ )

  6. As with any project, you have to have an agreed code syntax before you start, otherwise you have everyone getting frustrated with everyone elses code.
    if everyone has to deal with other peoples extravagances then that leads to resentment and frustration (as you have described of your own experiences). much better to have everyone on an even keel

    white spaces have their place too, and it’s mostly to do with readability. stuff like if statements with lots of conditions. as for the curly braces…. yeah, end of line is better.

    one of the things i have most problems with is the number of spaces (or tabs) to indent for each block of code.

  7. true, miCash. Personally, I simply do not understand why people indent with multiples of spaces, when you can use a single tab, and edit your editor options to display tabs as equal to a number of spaces.

    For example, I have my tabs set to display as equal to 2 spaces (“set tabstop=2” in .vimrc). A guy I work with (who I respect as a coder) prefers to use three spaces. I don’t understand that, as you can set vim to use a tabstop of three, and immediately save bandwidth even though visually the code is the same.

    I’m still listening to the comments. When I have a few hours to spare, I’ll collate the ideas, expand the app to accommodate them, and announce the updates.

  8. You nearly had me Kae, as I hate untidy JS, but I hate if(a==b) more. πŸ™‚

  9. I looked around at MANY javascript beautifiers, and none even worked with the huge file that I tried to format. Yours only produced one error (brackets in a regular expression) which was easily fixed. Well done!

  10. thank you! can you show me the error and the fix?

  11. Great. This is what I’m looking for. I wrote a litte wrapper for Java 6 to use it:

    package com.tutego.utils;

    import java.io.InputStreamReader;
    import javax.script.Invocable;
    import javax.script.ScriptEngine;
    import javax.script.ScriptEngineManager;
    import javax.script.ScriptException;

    public class JavaScriptBeauty
    {
    private static ScriptEngine beautyEngine;

    public static String beautify( String s )
    {
    try
    {
    if ( beautyEngine == null )
    {
    beautyEngine = new ScriptEngineManager().getEngineByName( “JavaScript” );
    beautyEngine.eval( new InputStreamReader( FoxproParser.class.getResourceAsStream( “jbeauty.js” ) ) );
    }
    Invocable inv = (Invocable) beautyEngine;

    return inv.invokeFunction( “beauty”, s ).toString();
    }
    catch ( ScriptException e )
    {
    e.printStackTrace();
    }
    catch ( NoSuchMethodException e )
    {
    e.printStackTrace();
    }

    return “”;
    }
    }

    I changed the script:

    function beauty( plaintext )
    {
    var plength=plaintext.length;
    cmp=new Comp();

    while(++charAt

  12. Second part …
    while(++charAt

  13. I think wordpress is removing anything past the ‘<‘ symbol. Use ‘&lt;’ to have it appear.

%d bloggers like this: