Sublime Forum

Javascript Formatter

#2

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]***

0 Likes

#3

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]

0 Likes

#4

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 !

0 Likes

#5

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

0 Likes

#6

[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 :wink: )

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.

0 Likes

#7

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" } ]

0 Likes

#8

[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

0 Likes

#9

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

github.com/jdc0589/JsFormat

0 Likes

#10

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

0 Likes

#11

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

0 Likes

#12

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

0 Likes

#13

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

0 Likes

#14

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.

0 Likes

#15

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

0 Likes

#16

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 }

0 Likes

#17

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

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 :smile:. 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.

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.

0 Likes

#18

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”]

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 :smile:

gp

0 Likes

#19

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

0 Likes

#20

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!

0 Likes

#21

I can definitely look in to doing this.

I’m putting this in the bug tracker on the github project page, check it out here: https://github.com/jdc0589/JsFormat/issues/8 and leave me some feedback if you want. When I get this done I will update this post as I have been doing for other features requests and bug fixes.

0 Likes