33

I've run JSLint for the first time on a rather lengthy file, and I have a lot of errors like expected exactly 1 space between "function" and "(" or unexpected ' '. I didn't realize this was important at all anywhere I learned about javascript and now fixing each one of these rather simple things by hand seems frustrating. Some I can figure out with simple find and replaces, but I wondered if there's any tools online that will automatically make these changes for me since they seem to be pretty straightforward?

(I have /*jslint white: false */ in my file, I develop in Netbeans and auto-format (except then I have to correct hanging jQuery chainings because it doesn't do it right), and my code still ends up with a huge number of things that jslint complains about as far as unexpected numbers of spaces.)

MrIsaacs
  • 87
  • 5
Damon
  • 10,493
  • 16
  • 86
  • 144
  • Why not click the "tolerate messy whitespace" checkbox button on the jslint page? – selbie Sep 27 '11 at 04:26
  • I actually tried that and it didn't seem to have an effect – Damon Sep 28 '11 at 02:33
  • 1
    From the [JSLint Instructions](http://www.jslint.com/lint.html) for `white` as of 2012-02-20 CET: "`true` if strict whitespace rules should be ignored." So change `white: false` to `white: true` if you want to get less complaints by JSLint. – feklee Feb 20 '12 at 09:34

8 Answers8

17

While it checks for different things than JSLint, the fixjsstyle mode of the Google closure linter may do what you want.

It automatically fixes code to (more closely) fit with the Google Javascript style guide which is well worth a read.

As others have pointed out, the Javascript beautifier is the way to go for spacing issues.

cjds
  • 8,268
  • 10
  • 49
  • 84
Timothy Jones
  • 21,495
  • 6
  • 60
  • 90
  • I looked at that page and I was unsure about how to install/run it; it appears to need some type of PERL environment? – Damon Sep 27 '11 at 16:04
  • You'll need Python - the install for mac worked for me by running the line they suggest. What operating system do you have? – Timothy Jones Sep 27 '11 at 21:32
  • 1
    Sadly, it looks like the closure linter doesn't change `function() {}` -> `function () {}`. You could use regexes to clean those up - let me know if you'd like help. However, I'm very surprised that the beautifier didn't work for you - try running a subset of your code through it to find out what part makes it go crazy (it shouldn't look like that). – Timothy Jones Sep 27 '11 at 23:21
  • the beautifier is being really weird it turns ` } else if ($(this).val() && $('#elementSelectionList li a[href="#' + elementListing + '"]') .hasClass('logo')) { $('#elementSel` into ` } else if (!$(this).val() && $('#elementSelectionList li a[href="#' + elementListing + '"]').hasClass('logo' ogo ')) { $(') {$('#elementSel` which is very hard to read but it's basically cutting off lines before they're finished and repeating a few chars+ the remainder on the next line. doesn't start til line 199 tho – Damon Sep 28 '11 at 02:31
  • Sounds like a bug. Try beautifying your code in two halves (as long as the halving is done at a legal place, parse-wise), or beautifying using the command line tool instead. If that doesn't work, file a bug [here](https://github.com/einars/js-beautify/issues). – Timothy Jones Sep 28 '11 at 03:45
11

There's an npm module called fixmyjs.

In "legacy mode" with JSHint:

var jshint = require('jshint').JSHINT
    var fixmyjs = require('fixmyjs')
    jshint(stringOfCode, objectOfOptions)
    var stringFixedCode = fixmyjs(jshint.data(), stringOfCode, objectOfOptions).run()

Works great!

There is also a Sublime Text 2/3 Package.

Alex
  • 8,093
  • 6
  • 49
  • 79
timelfelt
  • 680
  • 1
  • 11
  • 26
  • Ugh, this is almost great – unfortunately --legacy mode no longer works and the default formatter strips all empty lines: https://github.com/jshint/fixmyjs/issues/88 – Chris Adams Aug 12 '14 at 18:14
  • Hello, author here, Legacy mode still works, all the tests are passing. Do you have a failing test case? – goatslacker Sep 28 '14 at 06:40
6

http://jsbeautifier.org/ should fix all your problems

albert
  • 8,112
  • 3
  • 47
  • 63
4

jsfmt formats javascript and allows AST searching and rewriting. Analogous to gofmt.

In some ide's like netbeans you can automatically format code with alt+shift+f.

There are also online ones. http://jsbeautifier.org/

Ilia Choly
  • 18,070
  • 14
  • 92
  • 160
3

Simply use IDE which supports custom code formatting. Like NetBeans, WebStorm or Visual Studio.

c69
  • 19,951
  • 7
  • 52
  • 82
2

There's a bunch of tools around for doing things like this. I use JS Beautifier which will at least fix indentation errors and also the spaces-around-functions-part (I've tested it, yay!)

goto-bus-stop
  • 11,655
  • 2
  • 24
  • 31
2

If you use/have Visual Studio it does formatting of JavaScript too. You may need to configure formatting options from defaults.

Alexei Levenkov
  • 98,904
  • 14
  • 127
  • 179
0

Damon, Prettier is probably going to do everything you want wrt painless javascript code formatting. It will convert your code to an AST and then pretty print it back into your file so it auto-formats as you go. You can even add it as a precommit hook or run it on a folder full of files (pretty quickly, too!) so that your entire codebase will be immediately pretty.

Here is a video from ReactConf that explains it pretty well

Damon
  • 10,493
  • 16
  • 86
  • 144