Javascript Formatter

[jdc0589]

Project page: https://github.com/jdc0589/JsFormat

Javascript formats the selected text or entire file (works great in JSON files too)

Updates

• 3/14/2010 - JsBeautifier has been updated to the latest version

• 3/6/2012 - When you run JsFormat on an entire file (not a selection) it makes sure the file always ends with a newline

• 2/12/2012 - cursor is now re-positioned to its location prior to formatting (whitespace/formatting changes are accounted for)

• 1/29/2012 - settings have been moved to JsFormat/JsFormat.sublime-settings (and the jsformat_ prefix has been removed from all of them)

• 1/12/2012 - all settings are now exposed and can be overridden via user file settings

• late 2011 - JsFormat is now included in the default Package Control repository list.

• late 2011 - pulls in tab character/count from the standard sublime settings

• 8/31/2011 - moved the source to github for package manager compatibility (works with Package Control): github.com/jdc0589/JsFormat

• 8/25/2011 - added a sublime-commands file. “Format: Javascript” now appears in the command palette

• 8/25/2011 - scroll back to whatever line you were on prior to formatting the file (in the middle of the screen) rather than leaving the view position at the top of the file.

• ? - changed the shortcut to “ctrl”, “alt”, “f”]

[nobleach]

Looks good, but it seemed to ignore my lines containing jQuery:

[code]$(’#map-configurator’).accordion();
window.onsvgload = function() {
var obj = document.getElementById(‘map’);
var doc = obj.contentDocument; // grab the document object inside the SVG file
var hucs = doc.getElementsByTagNameNS(svgns, ‘path’);
for (var i = 0; i < hucs.length; i++) {
var id = hucs*.id;
//console.log(id);
hucs*.addEventListener(‘mouseover’, function(evt) {
evt.target.style.fill = ‘#FF9200’;
}, false);
hucs*.addEventListener(‘mousedown’, function(evt) {
alert('Huc: ’ + evt.target.id);
}, false);
}

}[/code]***

[jdc0589]

Can you post a link to the complete file?
I have not tweaked it for formatting within html files, which it looks like you may be doing (cant tell). It will destroy your html formatting unless you highlight all the javascript first

[quote=“nobleach”]Looks good, but it seemed to ignore my lines containing jQuery:

[code]$(’#map-configurator’).accordion();
window.onsvgload = function() {
var obj = document.getElementById(‘map’);
var doc = obj.contentDocument; // grab the document object inside the SVG file
var hucs = doc.getElementsByTagNameNS(svgns, ‘path’);
for (var i = 0; i < hucs.length; i++) {
var id = hucs*.id;
//console.log(id);
hucs*.addEventListener(‘mouseover’, function(evt) {
evt.target.style.fill = ‘#FF9200’;
}, false);
hucs*.addEventListener(‘mousedown’, function(evt) {
alert('Huc: ’ + evt.target.id);
}, false);
}

}[/code]***[/quote]

[vvo]

Hello,

is there an easy way to change settings ? I’m editing the .py file but it would be good to be able to edit settings form within my user pref file.

I would like to have tabs instead of spaces but I couldn’t make this work. Setting indent size to 1 doesn’t work, either setting a tab character into the character indent.

thx !

[de.monkeyz]

@vvo - I got it working with tabs, all I did was change the options to these:

opts.indent_char = "\t" opts.indent_size = 1

And it works perfectly.

I also added this code to make sure it only works in js files:

		if not self.view.scope_name(0).startswith('source.js'):
			return

If you’re using a build below 2099. Change startswith to endswith.

[nobleach]

[quote=“jdc0589”]Can you post a link to the complete file?
I have not tweaked it for formatting within html files, which it looks like you may be doing (cant tell). It will destroy your html formatting unless you highlight all the javascript first

[/quote]

I’m sorry, I didn’t mean to ignore your request. I forgot I even posted this question. Yes, I was editing an HTML file. I selected the text before I hit the shortcut though. (I wasn’t trying to beautify the entire file… only Netbeans can do that )

My hope is to someday write a plugin that can properly indent a file containing PHP, CSS, JS and HTML… sorta like Multiple Master Modes in Emacs… all with one command.

[bgreenlee]

This is great, thanks. Formatting Javascript/JSON is one thing I kept bouncing back to TextMate for.

One suggestion: add a JsFormat.sublime-commands file so that it appears in the Command Palette:

{ "caption": "Format: Javascript", "command": "js_format" } ]

[jdc0589]

[quote=“de.monkeyz”]@vvo - I got it working with tabs, all I did was change the options to these:

opts.indent_char = "\t" opts.indent_size = 1

And it works perfectly.

I also added this code to make sure it only works in js files:

		if not self.view.scope_name(0).startswith('source.js'):
			return

If you’re using a build below 2099. Change startswith to endswith.[/quote]

Thanks for responding to the indent question, I kind of forgot to keep checking back in here.
I may pull something like your scope_name solution in to the plugin, Ill have to play around with it.

[quote=“bgreenlee”]This is great, thanks. Formatting Javascript/JSON is one thing I kept bouncing back to TextMate for.

One suggestion: add a JsFormat.sublime-commands file so that it appears in the Command Palette:

{ "caption": "Format: Javascript", "command": "js_format" } ][/quote]

Good suggestion, ill add it in the next day or so.

UPDATE: plugin updated, shows up in command palette now

[jdc0589]

UPDATE:
Moved source to github for use with package managers (works with “Package Control”)

github.com/jdc0589/JsFormat

[emelie]

Installed this via Package Control - works great!

And just for the people who stumble upon this and don’t know what Package Control is - check it out here:
http://wbond.net/sublime_packages/package_control

[vortec]

Running Linux, the plugin doesn’t appear in the palette.

[jdc0589]

[quote=“emelie”]Installed this via Package Control - works great!

And just for the people who stumble upon this and don’t know what Package Control is - check it out here:
http://wbond.net/sublime_packages/package_control[/quote]

Glad to hear it!

On a side note, I just submitted a pull request to get JsFormat added to the default package control repository list, so hopefully it will be available right out of the box soon.

[jdc0589]

Running Linux, the plugin doesn’t appear in the palette.

Hmm…I use it on linux every day. Just to be safe, get the plugin off of github/package control rather than the download in the first post (it should be fine though). Do you get any errors in the console? Feel free to submit an issue here: github.com/jdc0589/JsFormat/issues (I forget to check this thread regularly).

[jdc0589]

Just pushed an update. JsFormat now pulls indentation character (space vs tab) settings from the main sublime config. If its set to translate tabs to spaces, JsFormat will use the number of spaces specified via the tab_size setting. Otherwise a single tab character is used.

[jdc0589]

new version published.
All js_beautifier settings are now exposed and can be overridden via user file settings.

[gptwisted]

I absolutely love this plugin, thank you a lot for developing it and for making my code look better!

• When i format my code, the caret is positioned at the end of the file. This is very annoying, although I understand it’s hard to get the original caret position after the format. Eclipse actually can do it, so maybe it’s possible – or we have to wait an update to the SublimeText APIs. Are you also annoyed by this?

• [MINOR] The previous issue being solved, I would like to get my code automatically formatted when I close a block with }

[jdc0589]

I absolutely love this plugin, thank you a lot for developing it and for making my code look better!

Thanks! always nice to hear.

I would definitely encourage you to file bug reports over at https://github.com/jdc0589/JsFormat/issues for any bugs or feature requests ( I will see it immediately there).

• When i format my code, the caret is positioned at the end of the file. This is very annoying, although I understand it’s hard to get the original caret position after the format. Eclipse actually can do it, so maybe it’s possible – or we have to wait an update to the SublimeText APIs. Are you also annoyed by this?

To be honest, it doesn’t really bother me. However, it will probably drive me nuts now that you have brought it to my attention . There are a few ways I could do this. Ill think about the best way to do it and push an update in the next few days.

• [MINOR] The previous issue being solved, I would like to get my code automatically formatted when I close a block with }

Interesting. How often are you having to manually close code blocks? sublime always auto pairs ({ characters for me and I almost never find myself typing the closing character.

[gptwisted]

[about caret positioning] To be honest, it doesn’t really bother me. However, it will probably drive me nuts now that you have brought it to my attention . There are a few ways I could do this. Ill think about the best way to do it and push an update in the next few days.

Well in my workflow I usually write some code, then I format it: when I do, I lose the focus in my file. Since the buffer is often different, the line where the caret was is now in another position of the screen, and i’m not fast enough to identify it easily.
I see you added the issue on github, thank you - i will do that the next time.

[quote=“jdc0589”]

• [MINOR] The previous issue being solved, I would like to get my code automatically formatted when I close a block with }

Interesting. How often are you having to manually close code blocks? sublime always auto pairs ({ characters for me and I almost never find myself typing the closing character.[/quote]

Yes you are right, forget it

gp

[jdc0589]

Just pushed an update. The cursor is now re-positioned to the same place it was prior to formatting (accounts for whitespace/formatting changes).

[rdougan]

Thanks for this. I’ve been wanting this for a while, but never bothered looking.

Quick question: are you able to keep the selection indentation level? For example, if I run it on this code:

…it will not keep its indentation:

Thoughts?

Either way, massive thanks!