Home Download Buy Blog Forum Support

Javascript Formatter

Javascript Formatter

Postby jdc0589 on Wed Jul 13, 2011 2:27 am

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): https://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"]
Last edited by jdc0589 on Thu Mar 15, 2012 6:16 pm, edited 15 times in total.
jdc0589
 
Posts: 32
Joined: Fri Jun 03, 2011 2:32 am

Re: Javascript Formatter

Postby nobleach on Sat Jul 30, 2011 2:24 pm

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

Code: Select all
<tab>$('#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[i].id;
    //console.log(id);
    hucs[i].addEventListener('mouseover', function(evt) {
      evt.target.style.fill = '#FF9200';
    }, false);
    hucs[i].addEventListener('mousedown', function(evt) {
      alert('Huc: ' + evt.target.id);
    }, false);
  }

}
nobleach
 
Posts: 48
Joined: Thu Jun 23, 2011 4:14 pm

Re: Javascript Formatter

Postby jdc0589 on Tue Aug 09, 2011 1:35 am

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

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

Code: Select all
<tab>$('#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[i].id;
    //console.log(id);
    hucs[i].addEventListener('mouseover', function(evt) {
      evt.target.style.fill = '#FF9200';
    }, false);
    hucs[i].addEventListener('mousedown', function(evt) {
      alert('Huc: ' + evt.target.id);
    }, false);
  }

}
jdc0589
 
Posts: 32
Joined: Fri Jun 03, 2011 2:32 am

Re: Javascript Formatter

Postby vvo on Tue Aug 09, 2011 9:59 am

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 !
vvo
 
Posts: 2
Joined: Tue Aug 09, 2011 9:58 am

Re: Javascript Formatter

Postby de.monkeyz on Tue Aug 09, 2011 12:04 pm

@vvo - I got it working with tabs, all I did was change the options to these:
Code: Select all
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:
Code: Select all
      if not self.view.scope_name(0).startswith('source.js'):
         return


If you're using a build below 2099. Change startswith to endswith.
de.monkeyz
 
Posts: 4
Joined: Thu Sep 23, 2010 10:27 am

Re: Javascript Formatter

Postby nobleach on Wed Aug 10, 2011 1:08 am

jdc0589 wrote: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



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.
nobleach
 
Posts: 48
Joined: Thu Jun 23, 2011 4:14 pm

Re: Javascript Formatter

Postby bgreenlee on Sat Aug 13, 2011 2:47 pm

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:

Code: Select all
[
    { "caption": "Format: Javascript", "command": "js_format" }
]
bgreenlee
 
Posts: 22
Joined: Wed Jul 20, 2011 8:02 pm
Location: Seattle, WA

Re: Javascript Formatter

Postby jdc0589 on Wed Aug 24, 2011 4:02 am

de.monkeyz wrote:@vvo - I got it working with tabs, all I did was change the options to these:
Code: Select all
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:
Code: Select all
      if not self.view.scope_name(0).startswith('source.js'):
         return


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



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.



bgreenlee wrote: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:

Code: Select all
[
    { "caption": "Format: Javascript", "command": "js_format" }
]


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

UPDATE: plugin updated, shows up in command palette now
jdc0589
 
Posts: 32
Joined: Fri Jun 03, 2011 2:32 am

Re: Javascript Formatter

Postby jdc0589 on Thu Sep 01, 2011 2:14 am

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

https://github.com/jdc0589/JsFormat
jdc0589
 
Posts: 32
Joined: Fri Jun 03, 2011 2:32 am

Re: Javascript Formatter

Postby emelie on Thu Nov 17, 2011 10:51 pm

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
emelie
 
Posts: 3
Joined: Wed Nov 16, 2011 8:10 pm

Next

Return to Plugin Announcements

Who is online

Users browsing this forum: Google [Bot], ionutvmi, Yahoo [Bot] and 8 guests