Vim JavaScript code folding

Question

I have been trying to set up code folding in Vim for JavaScript but the default isn't working correctly. I have little experience with Vim and have a hard time understanding the help files (as proven by my failed attempts at doing this myself).

The JavaScript code that creates problems more or less looks like this:

var x = {};

x.prototype = (function () {
    // Variable declarations...
    var y;

    // Other content...

    y = (function () {
        // Stuff...
    }());

    // Other content continues... eg:
    return {
        // Other stuff...
    };
}());

When I fold y = (function () {}());, it looks like this:

var x = {};

x.prototype = (function () {
    // Variable declarations...
    var y;

    // Other content...

    y = (function () {----------------------------------...

Notice how the rest of the function disappears! It should actually be looking like this:

var x = {};

x.prototype = (function () {
    // Variable declarations...
    var y;

    // Other content

    y = (function () {----------------------------------...

    // Other content continues... eg:
    return {
        // Other stuff...
    };
}());

Like I said above I tried playing around with the syntax file but it only broke the folding.

For convenience, here is the code folding section of the JavaScript syntax file:

if exists("javaScript_fold")
    syn match   javaScriptFunction  "\<function\>"
    syn region  javaScriptFunctionFold  start="\<function\>.*[^};]$" end="^\z1}.*$" transparent fold keepend

    syn sync match javaScriptSync   grouphere javaScriptFunctionFold "\<function\>"
    syn sync match javaScriptSync   grouphere NONE "^}"

    setlocal foldmethod=syntax
    setlocal foldtext=getline(v:foldstart)
else
    syn keyword javaScriptFunction  function
    syn match   javaScriptBraces       "[{}\[\]]"
    syn match   javaScriptParens       "[()]"
endif

syn sync fromstart
syn sync maxlines=100

I have 3 questions:

1. Is it possible to fix the code folding through ~/.gvimrc?
2. How do I fix the code folding?
3. How do I make the folded code take this form y = (function () { ... }());?

Answer 1

To make things simple a quick fix is to change the line in your javascript.vim file for the fold to:

syn region javaScriptFunctionFold  start="{" end="}" transparent fold

Over the next few weeks I'll try to do an overhaul on the entire file to make sure it's current with the latest changes for ECMA5 and the various HTML5 APIs and updates but this patch should fix things in the interim.

Answer 2

I've found this replacement syntax file to work very well, it folds even complicated prototype objects. It was specifically targeted at JS commonly used at Mozilla and in Dojo projects, which looks very much like what you are doing.