Property with name ´default´ is formatted in a new line

[rmariuzzo]

Some colleagues at work and me use this plugin a lot in Sublime Text 3, but lately I noticed a behavior that could be wrong.

If have the following code:

Handlebars.default.compile("hello world");

The formatted results is:

Handlebars.
default.compile("hello");

It only appears to happen when using a property with name default, maybe it collide with JS keyword.

[jdavisclark]

I'll create an issue over at jsbeautifier about it and see if we can get it fixed. but....

this is one of those weird instances where "default" is a javascript keyword, it just works as a property name as well. Personally, I think it's a bad practice to use keywords like this as property names even if it does work syntactically, but obviously you can't help it since this is the Handlebars API.

When I run across API's that violate my personal conventions like this, I tend to go with the following approach so that syntax highlighting/etc... doesn't get wonky:

Handlebars["default"].compile("hello world");

I honestly have no idea how other developers feel about this.

[jdavisclark]

@rmariuzzo this may not be fixed super fast. JsFormat uses einars/js-beautify for formatting, so the bug actually exists there. However, @bitwiseman did add it to the v1.5.0 milestone (no scheduled date).

If you are interested in the details, check out beautifier/js-beautify#200. In summation, the issue is that js-beautify does not utilize a real parser + AST; instead, it basically operates as a proxy between an input and output stream that manipulates whitespace based off some best-guesses determined by keywords and special symbols it sees (it has some state tracking, but not near as much as an AST would provide).

[rmariuzzo]

Nice to know, thanks for following that issue and for your quick response. I believe, by the moment we should wait for einars/js-beautify to release the version 1.5.0 with that fix.

[rmariuzzo]

@jdc0589, thanks for linking that issue in beautifier/js-beautify#200

[lowebackstrom]

Getting the same formatting for "finally":

promise.then( ... ).finally( ... );

becomes:

promise.then( ... ).
finally( ... );

Is this a js-beautify issue as well?

Thanks for a great plugin!

[dertseha]

@lowebackstrom yes, if you try your test-code on http://jsbeautifier.org/ , which uses the JS variant of js-beautify online, then you get the same result.

[bitwiseman]

Fixed!

[rmariuzzo]

Nice to know! Thanks to all, I'll wait for the next update to test this.

[0x80]

Could someone please explain to me how to get this fix into sublime text? I've added both the JsFormat and JsBeautify repositories to my sublime with "Add repository", but I get no upgrades listed and keywords like "finally" are still treated as reserved keywords.

[jdavisclark]

@0x80 you don't need to do either of those things. JsFormat comes with the JsBeautify dependency packaged up, you don't need to worry about it. JsFormat is also in the default Package Control channel, so you should not have had to manually add it as a repository.

Remove the JsFormat plugin you have installed currently, edit you user package control settings and take the JsFormat entry out of the "repositories" array, then reinstall JsFormat from the Install Package menu.

This is being formatted correctly for me on the most recent version.

before formatting:

function(){asdf();}

thing.default.foo();
promise.then(foo).finally(bar);

after formatting:

function() {
    asdf();
}

thing.default.foo();
promise.then(foo).finally(bar);

[0x80]

Thanks your instructions plus a restart worked for me. Everything seems to be fine now!

[0x80]

What is the current version of JsBeautify used in JsFormat? I understand that from 1.5.2 it should ignore non javascript tags like html, and prevent messing up the formatting of JSX and Angular inline templates. For me this is still happening :\ Any idea where I should tackle this?